| menu déroulant |
Titre du sujet : menu déroulant
par papi sur 23/08/2013 15:08:24
Bonjour,
Merci tout d'abord aux animateurs de Xoops.fr ainsi qu'aux participants au forum, qui, jusqu'ici m'ont permis de me débrouiller seul face aux différents problèmes rencontrés. Il n'y a rien de tel pour apprendre que de chercher et surtout de chercher à comprendre.
Aujourd'hui je suis devant une énigme...
Je souhaite créer un menu déroulant à partir du thème XDPerpetual que j'ai sensiblement modifié au niveau du "header" notamment.
J'ai créé un fichier "xo_barrenav.html" pour les différents menus et sous-menus.
Ensuite les différents fichiers .css et notamment "barrenav.css" pour le design du menu déroulant.
Tout va bien sauf que le menu déroulant... ne se déroule pas !
Lorsque je clique sur le menu, la petite main apparaît bien signifiant que le lien existe bien, mais les sous menus n'apparaissent pas.
Merci de votre aide
J'utilise Xoops 2.5.6
Le fichier xo_barrenav. html
<!--- Barre navigation menu membre --->
<div id="xo_barrenav">
<!--- Start menu --->
<ul class="menu" id="menu"
<{foreach item=item from=$navitems}>
<li><a href="<{$item.link}>" class="menulink"><{$item.text}></a>
<ul>
<{foreach item=sub from=$item.menu}>
<li>
<{if $sub.options != 0}>
<a class="sub" href="<{$sub.link}>" title="<{$sub.title}>"><{$sub.title}></a>
<ul>
<{foreach item=option from=$sub.options}>
<li><a href="<{$sub.url}><{$option.link}>"><{$option.title}></a></li>
<{/foreach}>
</ul>
<{else}>
<a href="<{$sub.link}>" title="<{$sub.title}>"><{$sub.title}></a>
<{/if}>
</li>
<{/foreach}>
</ul>
</li>
<{/foreach}>
</ul>
<li><a href="http://localhost/saigiasso/modules/publisher/" class="menulink">Saigina's Association</a>
<ul class="menu">
<li><a href="http://localhost/modules/publisher/item.php?itemid=1" title="Histoire">Histoire</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Organisation">Organistion</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=3" title="Transparence">Transparence</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=4" title="Gestion membres">Gestion membres</a></li>
<li><a href="http://localhost/modules/googlemaps/item.php?itemid=4" title="Gestion membres">Localisation</a>
<ul class="sub"
<li><a class="sub" href="http://localhost/modules/googlemaps" title="Localisations">index</a></li>
<li><a class="sub" href="http://localhost/modules/googlemaps" title="Localisations">index</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://localhost/saigiasso/modules/publisher/" class="menulink">Objectifs</a>
<ul>
<li><a href="http://localhost/modules/publisher/item.php?itemid=1" title="Enfants de la rue">Enfants de la rue</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Hygiène">Hygiène</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=3" title="Santé">Santé</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=4" title="Information">Information</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=1" title="Donner un toit">Donner un toit</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Scolarisation">Scolarisation</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=3" title="Rester humbles">Rester humbles</a></li>
</li>
</ul>
<li><a href="http://localhost/saigiasso/modules/publisher/" class="menulink">Actions</a>
<ul>
<li><a href="http://localhost/modules/publisher/item.php?itemid=1" title="Lutte contre la faim">Lutte contre la faim</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Scolarisation">Scolarisation</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=3" title="Aide ponctuelle">Aide ponctuelle</a></li>
</li>
</ul>
<li><a href="http://localhost/saigiasso/modules/publisher" class="menulink">Projets</a>
<ul>
<li><a href="http://localhost/modules/publisher/item.php?itemid=1" title="Rendre pérenne l'existant">Rendre pérenne l'existant</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Aide aux soins">Aide aux soins</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=3" title="Nouvelles implantations">Nouvelles implantations</a></li>
<li><a href="http://localhost/modules/publisher/item.php?itemid=2" title="Antennes satellites">Antennes satellites</a></li>
</li>
</ul>
<li><a href="Nous aider">Nous aider/Les aider</a></li>
</ul>
</div>
<!--- End barrenav --->
Le fichier barrenav.css
/*============= Style for barrenav.html ================*/
#xo_barrenav {
clear: both;
height: 49px !important;
width: 100%;
margin: 0;
background : url(/themes/XDPerpetual/XDimages/navbar.gif) repeat-x left top; *
/* color: #99113e;
font-size: 13px;
font-weight: bold; */
vertical-align: central;
text-shadow: 2px 2px 3px #aaa;
}
* html #xo_barrenav {
height: 49px;
}
#xo_barrenav .xo-label {
display: none;
}
/*#xo_barrenavmenu {
display: block;
float: left;
width: 100%;
}*/
/**** horizontal menu ***/
#xo_barrenav {
height: 49px !important;
width: 100%;
margin: 0;
background : url(../XDimages/navbar.gif) repeat-x left top;
color: #99113e;
font-size: 12px;
font-weight: bold;
text-align: center
vertical-align: central;
text-shadow: 2px 2px 3px #aaa;
}
#xo_barrenav ul.menu {
list-style-type: none;
margin: 0;
pading: 0; */
/* height: 49px !important;;
margin: 0;
padding: 0;
background : url(../XDimages/navbar.gif) repeat-x left top;
color: #99113e;
font-size: 12px;
font-weight: bold;
text-align: enter
vertical-align: central;
text-shadow: 2px 2px 3px #aaa; */
}
#xo_barrenav ul.menu a {
display: block;
font-size: 12px;
color: #99113e;
text-decoration: none;
}
#xo_barrenav ul.menu * {
margin: 0;
padding: 0;
}
#xo_barrenav ul.menu li {
position: relative;
float: left;
margin-right: 2px;
list-style-type: none;
}
#xo_barrenav ul.menu ul {
position: absolute;
left: 0;
background-color: #fff;
display: none;
opacity: 0;
}
#xo_barrenav ul.menu ul li {
position: relative;
/* border: 1px solid #aaa; */
border-top: none;
width: 140px;
margin: 0;
list-style-type: none;
}
#xo_barrenav ul.menu ul li a {
display: block;
padding: 3px 7px 5px;
background-color: tranparent;
color: #99113e; /*background: #ddd no-repeat left;*/
padding-left: 20px;
}
#xo_barrenav ul.menu ul li a:hover {
background-color: #fff;
color: #99113e;
}
#xo_barrenav ul.menu ul ul {
left: 120px;
top: -1px;
list-style-type: none;
}
#xo_barrenav ul.menu .menulink {
/* border: 1px solid #333;*/
padding: 5px 7px 4px;
font-weight: bold;
color: #99113e;
background: #fff;
width: 140px;
}
#xo_barrenav ul.menu .menulink:hover,ul.menu .menuhover {
/* border: 1px solid #00F; */
background-color: #fff;
}
#xo_barrenav ul.menu .sub {
background-color: #fff;
padding-left: 3px;
}
#xo_barrenav ul.menu .topline {
border-top: 1px solid #aaa;
}
|
|
