Avoir un menu déroulant horizontal

Mirabelle · 28/12/2009 04:30:52

Salut,

Je souhaite affiché le menu sous forme de menu déroulant horizontal.

Voici ce que je voudrais faire :

http://www.pohkao.org/
Réalisé par bvffalo73.

J'ai essayé les différentes tentatives présentes sur le forum (modif de style.css...) mais je n'y arrive pas.

Si vous avez une idée pour arriver à ce résultat avec zite (ou zite plus ?) je vous en serez reconnaissant !

michael79 · 29/12/2009 17:13:57

Bonjour,

Tu peux trouver ce genre de menus sur editeurjavascript.com et le copier
dans l'entête (page _Top)

A bientôt et bonnes fêtes,

Michaël

Mirabelle · 29/12/2009 20:25:00

Bonjour michael 79 et merci de ta réponse.

J'ai un javascript qui fonctionne (firefox, IE...)
source : http://css.developpez.com/tutoriels/menu-deroulant/
résultat : http://marcarea.com/code/css/menu/menu01test.html

Alors j'ai intégré le fichier .css et le menu en .html dans la page top ca marche pas ! Je l'ai alors directement intégré dans ma page "template.php" mais le menu ne marche plus dans Internet Explorer.

Voici mon fichier template.php

<!DOCT YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

body {
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}

/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */

/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 200;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;

}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;

}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;

}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

</style>

<ul id="menuDeroulant">
<li>
<a href="#">Les castors</a>
<ul class="sousMenu">
<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
<li><a href="#">Ils confectionnent des barrages !</a></li>

<li><a href="#">Ils ont des grandes dents</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>

<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>

<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>

<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>

<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>

<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>

</div>
<div id="mid">
<div id="side">

<?php echo $zite->get_content(1156957918, true) ?>
</div>
<div id="main">
<?php echo $zite->content['main'] ?>
</div>
<div id="break"></div>
</div>
<div id="bot">Site motorisé par <a href="http://zite.prositif.com">ZITE CMS <?php echo ZITEVER ?></a>

</div>
</div>

</body>
</html>

Je cherche à faire un menu déroulant horizontal visible sous Firefox et Internet explorer. Avez-vous une idée ou une solution ?

Mirabelle · 29/12/2009 21:52:03

ok j'ai tout repris à zéro, maintenant ca marche !

Voici mon fichier template.php :

<!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="en">
<head>
<title><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
body {
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 200;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
</style>
<body>
<ul id="menuDeroulant">
<li>
<a href="#">1</a>
<ul class="sousMenu">
<li><a href="index.php?perma=11">11</a></li>
<li><a href="index.php?perma=12">12</a></li>
<li><a href="index.php?perma=13">13</a></li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul class="sousMenu">
<li><a href="index.php?perma=21">21</a></li>
<li><a href="index.php?perma=22">22</a></li>
<li><a href="index.php?perma=23">23</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul class="sousMenu">
<li><a href="index.php?perma=31">31</a></li>
<li><a href="index.php?perma=32">33</a></li>
<li><a href="index.php?perma=33">34</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul class="sousMenu">
<li><a href="index.php?perma=41">41</a></li>
<li><a href="index.php?perma=42">42</a></li>
<li><a href="index.php?perma=43">43</a></li>
</ul>
</li>
</ul>
<div id="page">
<div id="top">
</div>
<div id="mid">
<div id="side">
<?php echo $zite->get_content(1156957918, true) ?>
</div>
<div id="main">
<?php echo $zite->content['main'] ?>
</div>
<div id="break"></div>
</div>
<div id="bot"><a href="index.php?z=login">login</a>
</div>
</div>

Existe-t-il une possibilité de le rendre "dynamique" ? C'est à dire que le menu se créé quand on crée une page comme pour le menu latéral de base ?

didoch54000 · 30/12/2009 16:31:16

Bonjour,

A force de persévérance (et d'aspirine) je commence à frôler du bout de code mon but à savoir le menu déroulant dynamique :

Considérant que le composant Xmenu soit activé, voici après une analyse de Firebug la stucture HTML qui en découle :

	<ul class="xzul1"> <!-- Menu -->
		<li class="xzli1">
			<a href="#" class="xzli1">Bienvenue</a>
		</li>
		<li class="xzli1 xnest">
			<a href="#" class="xzli1 xnest">Services zite+</a>
				<ul class="xzul2"><!-- SousMenu -->
					<li class="xzli2 xnest">
						<a href="#" class="xzli2 xnest">Mon cv</a>
							<ul class="xzul3">
								<li class="xzli3">
									<a href="#" class="xzli3">cv2</a>
								</li>
							</ul>
					</li>
				</ul>
			</li>
		<li class="xzli1">
			<a href="#" class="xzli1">Nos coordonnées</a>
		</li>
		<li class="xzli1">
			<a href="#" class="xzli1">Plan du site</a>
		</li>
	</ul>

Et voici ma création CSS qui lui est associé :

body
{
	font: 11px verdana, sans-serif;
	width : 800px;
	margin: 0;
	padding: 0;
	font-weight : bold; 
	font-family : Arial;
	font-size : 14px;
}

#menu
{
	background: url("LittleMenu.png") left repeat-x;	
	width: 800px;
	margin: 0px;
	padding: 0;
	border: 0;
	position: absolute;
}
 
#menu li
{
	list-style-type: none;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}	

.xzul1{
	overflow:hidden;
}

li.xzli1
{
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
 }
 
/*Sous-menu*/
.xzul2
{
	display : none;
	margin: 0;
	padding: 0;
	border: 0;
	background: url("LittleMenu.png") left repeat-x;	
}

.xzli2
{
	float:none;
	margin: 0;
	padding: 0;
	border: 0;
}	

/*les liens*/
.xzul1 a:link , 
.xzul1 a:visited /* Liens non visité et visité*/
{
	display : block; 
	color : #fff; 
	text-decoration : none; 
	border-right: 1px solid #fff;
	text-align:center;
	padding : 10px;
	height: 1%;
}


/*Au dessus du lien*/
.xzul1 a:hover  
{
	display: block;
	color: black;
	background: url("LittleMenuInv.png") left repeat-x;
	clear: both;
	height: 1%;
}

/*Au clic sur le lien*/
.xzul1 li:active{ 
	color : #7b6a5a;
}

.xzul1 a:hover  > .xzul2 {
	display:block;
	position:absolute;
}

/*Affiche le sous menu au survol de la souris */
li.xzli1.xnest:hover> ul.xzul2 {
	display:block;
	position:absolute;
}

Cette partie de 'cache-cache' est opérationnelle sous Ffox mais je rencontre quelques soucis sur IE(x).

Si quelqu'un doué en CSS vois d'où peut provenir mon (mes) erreur(s)
Si des personnes ont réalisé de manière différente le menu dynamique je suis prêt à entendre toutes vos critiques.

bonne continuation.

laurent39 · 25/01/2010 15:44:01

Bonjour,

Avez vous réussi à le rendre dynamique ?
Je coince dur....

Laurent39

davyk · 25/01/2010 19:48:19

didoch54000 a écrit :

Cette partie de 'cache-cache' est opérationnelle sous Ffox mais je rencontre quelques soucis sur IE(x).
Si quelqu'un doué en CSS vois d'où peut provenir mon (mes) erreur(s)
Si des personnes ont réalisé de manière différente le menu dynamique je suis prêt à entendre toutes vos critiques.

salut,
je crois que ie ne reconnait pas hover.
à confirmer.

tu peux te pencher sur csshover.htc

laurent39 a écrit :

Bonjour,
Avez vous réussi à le rendre dynamique ?
Je coince dur....

Xmenu EST dynamique

++vYk

Dernière modification par davyk (25/01/2010 19:50:23)

laurent39 · 01/02/2010 13:22:27

Bonjour,

Ok j'ai repris en main le css et cela fonctionne et c'est dynamique effectivement...

Merci !

Mais j'ai quand même quelques petits soucis :

- dans mon menu : le lien "Bienvenue" (correspondant à index.php) s'est écrit "http://monsiteessai.com/divers/essaides … php?perma="
et donc je tombe sur une page inconnue (perma=).

Où faut il que je modifie xmenu pour qu'il mette index.php (sans rien au bout) ??

- Comment modifier le css pour que dans le menu, les pages filles aient une couleur de survol différente de celle en survol des pages mères ?

Bonne journée à toutes et tous

Laurent39

laurent39 · 05/02/2010 11:25:06

Bonjour à tous

Personne n'a de solution pour mes questions ?

Surtout le coup de l'index.php sans rien au bout ? je ne vois pas où je peux modifier ça...
Est ce c'est parce que le site est dans un sous-répertoire et pas à la racine ?

Help !

Bonne journée

Laurent

snypi · 05/02/2010 12:30:47

salut
a tu essayé ça pour le la couleur différente du survole des sous menu?

.xzul2 a:hover  
{background-color: #cfcfcf;
}

et pour l'autre question j'ai pas de réponse
++

laurent39 · 05/02/2010 14:19:44

Bonjour,

arrff je viens d'essayer et rien de mieux...

mon css :

#menu
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
}

#menu li{
float: left;
width: 140px;
margin: 0;
padding: 0;
border: 0;
}

.xzul1{
overflow:hidden;
}

li.xzli1{
list-style-type: none;
float: left;
margin: 0;
padding: 0;
border: 0;
}

/*Sous-menu*/

.xzul2{
list-style-type: none;
background-color: #cfcfcf;

display : none;
margin: 0;
padding: 0;
border: 0;

}

.xzli2{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid #FFF;
border-right: 1px solid transparent;

}

/*les liens*/
.xzul1 a:link ,
.xzul1 a:visited
/* Liens non visité et visité*/
{
display: block;
height: 1%;
color: #FFF;
background: #5F879D;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}

/*couleur SURVOL*/
.xzul1 a:hover
{
display: block;
height: 1%;
color: #FFF;
background: #666;
margin: 0;
padding: 4px 8px;
text-decoration: none;
}

/*Au clic sur le lien*/
.xzul1 li:active{
color : #5F879D;
}

.xzul1 a:hover > .xzul2 {
display:block;
position:absolute;
}

/*Affiche le sous menu au survol de la souris */
li.xzli1.xnest:hover> ul.xzul2 {
display:block;
position:absolute;
}

Si quelqu'un a une idée ....

Merci quand même et @plus

Laurent39

snypi · 05/02/2010 15:02:11

trouver

ul.xzul2 a:hover {
background-color: Green;
}

tu nous redonne ton css fini après

Dernière modification par snypi (05/02/2010 15:04:29)

laurent39 · 05/02/2010 16:07:56

Génial !
Merci Snypi ! trop sympa..

Ma css entière :

body {
background-color: #FFF;
background-image: url(deco/fdbg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align:center;
font-size: 80%;
}

body, td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10pt;
}
img {border: none;}
h1 {font-size: 150%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}

a {
color: #4a6381;
text-decoration: none;
}
a:hover {
color: #698ebc;
}

#page {
background-color:#FFF;
border: solid 1px #777;
background-color: #FFF;
width: 1000px;
margin: 0 auto 8px auto;
padding: 0;
text-align: left;
}

/*#top {
height: 69px;
background-image: url(deco/topbg.png);
}*/

#topmenu {
height: 24px;
background-color: #777;
margin-top:-12px;
}

#mid {
width: 1000px;
border-bottom: 1px solid #CCC;
background-image: url(deco/bg.png);
margin:0;
padding: 0;
}

#side {
width: 180px;
float: left;
margin:0;
padding: 5px 10px 5px 10px;
}

#main {
width: 760px;
float: right;
margin: 0 0 20px 0px ;
padding: 7px;
text-align: justify;
}

#break {
clear: both;
}

#bot {
width: 1000px;
border-bottom: 1px solid #777;
background-image: url(deco/fd-menu.png);
height: 20px;
text-align: center;
margin:0;
padding: 0;
color: #225;
}

#top h1 {
margin: 0;
padding: 0;
}
#top h2 {
margin: 0;
padding:0;
}

#menu
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
}

#menu li{
float: left;
width: 140px;
margin: 0;
padding: 0;
border: 0;
}

.xzul1{
overflow:hidden;
}

li.xzli1{
list-style-type: none;
float: left;
margin: 0;
padding: 0;
border: 0;
}

/*Sous-menu*/

.xzul2{
list-style-type: none;
display : none;
margin: 0;
padding: 0;
border: 0;
}

ul.xzul2 a:hover {
background-color: Green;
}

.xzli2{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid #FFF;
border-right: 1px solid transparent;

}

/*les liens*/
.xzul1 a:link ,
.xzul1 a:visited
/* Liens non visité et visité*/
{
display: block;
height: 1%;
color: #FFF;
background: #5F879D;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}

/*couleur SURVOL*/
.xzul1 a:hover
{
display: block;
height: 1%;
color: #FFF;
background: #666;
margin: 0;
padding: 4px 8px;
text-decoration: none;
}

/*Au clic sur le lien*/
.xzul1 li:active{
color : #5F879D;
}

.xzul1 a:hover > .xzul2 {
display:block;
position:absolute;
}

/*Affiche le sous menu au survol de la souris */
li.xzli1.xnest:hover> ul.xzul2 {
display:block;
position:absolute;
}

/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
#zadmin a {
margin-right: 10px;
}

.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 0;
width: 100%;
}
.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}.zerr {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 1px;
}

davyk · 05/02/2010 16:34:17

salut,
avez-vous vu ce thread?:
http://www.zitecms.org/zite/forum/viewtopic.php?id=645

snypi · 05/02/2010 19:29:36

salut davyk
chez moi ton code ne marche pas !!!

édit : sisi ça marche très bien, mille excuse !! (juste moi qui à zapé que j'avais changer le calque menu en xmenu !!

Dernière modification par snypi (05/02/2010 19:34:22)

snypi · 28/02/2010 22:24:45

hello
j'aurais besoin d'un traducteur SVP
ca veut dire quoi ca !!

li.xzli1.xnest:hover> ul.xzul2 {

}

je pense que ma solution est dans cette ligne j'ai besoin d'afficher mes xzul2 lorsqu'il sont actif !! mais j'y arrive po
un truc dans le genre
.xzli1.xnest.xzul2.xzli2.xzon:active > ul.xzul2 {
display:block;
position:absolute;
}

Dernière modification par snypi (01/03/2010 00:09:05)

Forum ZitePLUS

#1 28/12/2009 04:30:52

Avoir un menu déroulant horizontal

#2 29/12/2009 17:13:57

Re : Avoir un menu déroulant horizontal

#3 29/12/2009 20:25:00

Re : Avoir un menu déroulant horizontal

#4 29/12/2009 21:52:03

Re : Avoir un menu déroulant horizontal

#5 30/12/2009 16:31:16

Re : Avoir un menu déroulant horizontal

#6 25/01/2010 15:44:01

Re : Avoir un menu déroulant horizontal

#7 25/01/2010 19:48:19

Re : Avoir un menu déroulant horizontal

#8 01/02/2010 13:22:27

Re : Avoir un menu déroulant horizontal

#9 05/02/2010 11:25:06

Re : Avoir un menu déroulant horizontal

#10 05/02/2010 12:30:47

Re : Avoir un menu déroulant horizontal

#11 05/02/2010 14:19:44

Re : Avoir un menu déroulant horizontal

#12 05/02/2010 15:02:11

Re : Avoir un menu déroulant horizontal

#13 05/02/2010 16:07:56

Re : Avoir un menu déroulant horizontal

#14 05/02/2010 16:34:17

Re : Avoir un menu déroulant horizontal

#15 05/02/2010 19:29:36

Re : Avoir un menu déroulant horizontal

#16 28/02/2010 22:24:45

Re : Avoir un menu déroulant horizontal

Pied de page des forums