THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 Menu déroulant

(08-11-2007 19:34:32)

Bonjour

J'ai un menu vertical ou les sous catégories restent apparentes.

Pour des raisons pratiques liées à la longueur des menus et d'esthétique, je souhaite que celles ci ne s'affichent qu'au clic sur la catégorie. (un clic sur la catégorie déclenche l'ouverture des sous catégories). Un clic sur une autre catégorie ferme le 1er, et ouvre la nouvelle catégorie.

Comme je débute sur Thélia, pourriez vous m'indiquer ou fouiner pour trouver ce type de menu et comment l'intégrer simplement.

Merci

Offline

#2 Re: Menu déroulant

(08-11-2007 20:18:09)

<http://jquery.bassistance.de/accordion/>

sholby@free.fr • http://www.sholby.net/
  Dernière publication en librairie :
  "Extrait des archives du district" de Kenneth Bernard (roman, traduction)

Offline

#3 Re: Menu déroulant

(09-11-2007 12:19:56)

Bonjour

Ca correspond à ce que je recherche. Le tout premier exemple, le plus simple me va bien.

Par contre entre le fichier css et le code html je n'arrive pas a faire correspondre l'ensemble pour l'integrer correctement.

A l'arrivee rien ne va... Peut on m'aider a intégrer ces éléments ?

Merci

Offline

#4 Re: Menu déroulant

(09-11-2007 12:58:47)

J'ai récupéré ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>

	
</dl>

<div id="mentions">Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Retour / Back</a></div>

</body>
</html>

et j'ai voulu l'intégrer comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('menu'+i)) {document.getElementById('menu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<!-- menu général-->

		<div id="menuGeneral">
			<dl id="menu">
			<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
				<dt onclick="javascript:montre();"><a href="#URL">#TITRE</a></dt>
				
				<dd class="ssmenu">
					<ul>
					<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
					<THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0">
						<li><a href="#URL">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE>	
					<THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
						<li><a href="#URL" class="selected">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
					</THELIA_BLOC_SOUS_MENU>
						<li class="invisibleW3C"> </li>	
					</ul>
				</dd>
			  </THELIA_MENU_RUBRIQUES>
				<THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel">			  </THELIA_MENU_CONTENU>
				<THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel"><dt><a href="#URL">#TITRE</a></dt>
			</THELIA_MENU_CONTENU>
				<dt>----------------</dt>
				<dt><a href="test.php">FOURNITURES</a></dt>
				<dt>----------------</dt>
				<dt><a href="contact.php">Contact</a></dt>
			</dl>
		</div>

mais le résultat n'est pas celui que l'on peut voir a cette adresse :

http://css.alsacreations.com/xmedia/exe … rtical.htm

puisque rien ne se passe ...

Merci de m'aider

Offline

#5 Re: Menu déroulant

(26-02-2008 00:12:30)

Hello, je sais pas si ton problème est toujours d'actualité mais ca peut en intéresser certain donc...

En fait tu utilise une fonction :montre() sans paramètres, tu lui demandes de rien "montrer", contrairement à l'exemple qui appelle le sous menu :montre('smenu2')

Donc le code devient :

 <div id="content">
   <div id="menuGeneral">

            <dl id="menu">
            
			<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
				<dt onclick="javascript:montre('smenu#ID');"><a href="#">#TITRE</a></dt>
				<dd class="ssmenu" id="smenu#ID">
					<ul>
					<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
					<THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0">
						<li><a href="#URL">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE>	
					<THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
						<li><a href="#URL" class="selected">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
					</THELIA_BLOC_SOUS_MENU>
						<li class="invisibleW3C"> </li>	
					</ul>
				</dd>
				</THELIA_MENU_RUBRIQUES>
				<THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel">
				<dt >#TITRE</dt>
			</THELIA_MENU_CONTENU>
			</dl>
		</div>
        </div></td>

Ca marche bien chez moi wink

Offline

#6 Re: Menu déroulant

(15-05-2008 10:59:29)

Bonjour,
j'ai reussi à faire le menu déroulant avec javascript : lorsque je clique sur une rubrique, elle se déroule, je clique sur l'un des sous-menu et le titre apparaît dans le contenu.
J'ai cependant un petit souci: certaines rubriques n'ont pas de sous-menu et lorsque je clique sur elles, le contenu n'apparaît pas. C'est normal puisque dans mon code je n'ai pas spécifié l'URL.
<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
<dt onclick="javascript:montre('smenu#ID');"><a href="#">#TITRE</a>
Si je rajoute l'URL, ce qui me dérange c'est que l'orsque je clique sur une rubrique ayant un sous-menu le titre de la rubrique apparaît dans le contenu et la page se rafraîchit avant d'avoir appuyer sur l'un des sous-menu (je ne sais pas si je suis claire ^^).
La solution serait de faire autant de pages que j'ai de rubriques mais c'est dommage de ne pas utiliser l'interface de gestion et la boucle thélia!!
L'autre solution est de remplacer "<dt onclick"  par "<dt onmouseover" . C'est bien mais j'aurai voulu savoir s'il y avait une solution au problème avec le mode "onclick" wink
Merci.

Offline

#7 Re: Menu déroulant

(22-07-2010 14:07:39)

Bonjour,
j'ai créée un menu, sauf que le soucis est que mon menu deroulant sa cache derrière mon pied, et impossible de régler ce problème. J'ai pourtant essayé pleins de choses au niveau du css avec les positions absolute et relative, les index....

Mais je n'y arrive pas si quelqu'un peut jeter un coup d'oeil au site et me dire ce qu'il en pense.... : http://www.jouez-aux-bois.fr/thelia_1.4.3.1/

Merci

Offline

#8 Re: Menu déroulant

(23-07-2010 02:51:31)

Il y a d'autres problemes css sur ton site 'ajouter au panier' par exemple...
N'etant perso pas un expert en css tu peux peut etre "ruser" en modifiant la dispo,
'nos marques' sous ton menu, ou deplacer 'chambre enfant' 'mode enfant' un cran plus haut...

le-bouquiniste.com                                                      tongue  plugin 1.4.x / 1.5   => valeurstock / Mailpaiement / formcontact

Offline

#9 Re: Menu déroulant

(23-07-2010 21:24:14)

Bonjour,
en fait mon site est différent selon si tu le visualise avec firefox ou internet explorer, la est mon problème. En effet si tu le regarde avec firefox le panier est décalé, mais si je remonte le tout, c'est sur internet explorer que cela sera décalé vers le haut. Et en ce qui concerne "nos marques" j'ai déjà essayé de le mettre en dessous du menu, sur internet explorer ça passe, mais sur firefox le logo ne veut pas s'y mettre.

Donc je ne vois pas la solution...

Offline

#10 Re: Menu déroulant

(24-07-2010 02:48:34)

Bonjour Elise1,

Donc je ne vois pas la solution...

La solution s'est un apprentissage css...
il faudrait que tu prennes le temps d'aller voir ces liens que j'ai retrouve dans mes favoris:
http://www.alsacreations.com/tutoriels/
http://ressources.mediabox.fr/documentation/css
http://www.webdevout.net/
http://www.iecss.com/

Il est important que ton affichage soit pratiquement identique, je ne crois pas que strictement soit possible, d'un navigateur a l'autre, Firefox, IE, Opera, Google Chrome, et autre Safari...
Bonne lecture wink

Reg

le-bouquiniste.com                                                      tongue  plugin 1.4.x / 1.5   => valeurstock / Mailpaiement / formcontact