Fork me on GitHub




(1) 2 »


menu déroulant
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
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}>
                    <
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.gifrepeat-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.gifrepeat-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 * {
    
margin0;
    
padding0;
}

#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-left3px;
}

#xo_barrenav ul.menu .topline {
    
border-top:         1px solid #aaa;
}

Posté le : 23/08/2013 15:08

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Je crois que tu n'as pas fermé quelque part.

Posté le : 23/08/2013 16:11

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
Bonjour Cesag
Je crois bien qu'il s'agit d'une chose de ce genre mais je n'arrive pas à trouver où.
Heureusement que je ne suis pas payé au rendement, car ce serait la dèche complète !

Je cherche, je cherche...
Merci de ta réponse et bravo pour tes interventions toujours pertinentes.
Je te tiens au courant.

Posté le : 23/08/2013 16:20

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Essaye ceci :

<!---   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}> 
                    <
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
<
ul>
<
li><a href="http://localhost/saigiasso/modules/publisher/" class="menulink">Saigina 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><class="sub" href="http://localhost/modules/googlemaps" title="Localisations">index</a></li>
<
li><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>
</
ul>
</
li>
</
ul>
<
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>
</
ul>
</
li>
</
ul>
<
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>
</ul>
</li>
</ul>
<ul>
<li><a href="Nous%20aider">Nous aider/Les aider</a></li>
</ul>
</div>
<!--- End barrenav --->


EDIT : j'ai ôté le fichier css de ma correction.

Posté le : 23/08/2013 16:22

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
J'avais mis le fichier css avec, j'ai corrigé mon précédent message

Posté le : 23/08/2013 16:46

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
J'ai déjà essayé ce que tu m'indiques, à savoir ajouter à <ul> class="menu"
et mettre ceci pour chaque sous-menu
<ul class="menu">

alors là plus rien ne s'affiche du menu... il a disparu de la barre de navigation !!!

Posté le : 23/08/2013 16:58

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
Cesag
J'ai apporté les modifications que tu m'indiques; mais hélas !

Dans la barre de navigation les menus et sous-menus s'affichent directement à l'ouverture de la page.

Pour le premier les sous-menus s'affichent horizontalement,
pour les autres les sous-menus s'affichent bien verticalement, mais je voudrais qu'ils ne s'affichent que si l'on survole le menu avec le pointeur de la souris

et on cherche et on cherche

Posté le : 23/08/2013 17:14

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Je n'ai fait que corriger ton fichier html.

Pour le menu déroulant au passage de la souris, c'est dans le css que cela se passe.

Une petite aide sur ce lien ou ici

Posté le : 23/08/2013 18:43

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
Merci de ton aide Cesag je vais aller voir et te tiens au courant

Posté le : 23/08/2013 18:54

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: menu déroulant
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Si cela peut aider, ci dessous un petit menu que j'utilise parfois et qui marche trés bien:

Le html:
<div class="userboutons">
    <
ul id="nav">
    <
li><a href="#">Menu1</a>
    <
ul>
        <
li><a href="#">Menu1_item1</a></li>
        <
li><a href="#">Menu1_item2</a></li>
        <
li><a href="#">Menu1_item3</a></li>
     </
ul>
            <
div class="clear"></div>
     </
li>
     <
li><a href="#">Menu2</a>
     <
ul>
         <
li><a href="#">Menu2_item1</a></li>
         <
li><a href="#">Menu2_item2</a></li>
         <
li><a href="#">Menu2_item3</a></li>
         <
li><a href="#">Menu2_item4</a></li>
      </
ul>
         <
div class="clear"></div>
         </
li>
         <
li><a href="#">Menu3</a></li>
         <
li><a href="#">Menu4</a></li>
       </
ul>
       <
div class="clear"></div>
</
div>

Le css:
.clear {clear:both}    
#nav {
margin:0;
padding:0;
list-
style:none;
}    
        
#nav li {
float:left;
display:block;
width:100px;
background:#222222;
position:relative;
z-index:1;
margin:0 1px;
border 1px solid #444444;
}
            
#nav li a {
display:block;
padding:5px 2px 0 2px;
height:18px;
text-decoration:none;
text-align:center;
color:#ffffff;
}

#nav li a:hover {
color:#fff;
background:#c00014;
}
        
#nav a.selected {
color:#f00;
}
        
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-
style:none;
}
            
#nav ul li {
width:100px;
float:left;
border-left 1px solid #444444;
border-right 1px solid #444444;
border-top none;
border-bottom none;
}

#nav ul a {
display:block;
height:15px;
padding5px 5px;
color:#ffffff;
}
            
#nav ul a:hover {
text-decoration:none;
background-color:#c00014;   
}

Posté le : 23/08/2013 19:09

Open in new window

Xoops 2.5.7.2 - Debian 8.2 - Apache 2.4.10 - MySQL 5.5.47 - Php 5.6.17
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

79 Personne(s) en ligne (60 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 79 | Plus ...