Fork me on GitHub






Menu dynamique deroulant avec theme blueday
Aspirant
Inscrit: 07/10/2007 23:38
Messages: 28
bonsoir

suite aux conseils de birning j ai choisi un theme morphogenesis pour avoir des menus deroulants dynamiques.

J ai donc choisi "bluedays", j ai compris la construction et apposé facilement quelques modifs ( couleurs, image en baniere) pour une fois la doc est super pour un novice comme moi.

J ai un souci pour creer des sous menu. J ai copié l exemple donné dans le pdf dans le fichier global nav et dans theme.php.

quand je regenere le site les sous menus s affichent sous news et les autres menus sont envoyés en dessous
Merci pour votre aide

Posté le : 13/11/2007 22:44
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Guest_
B'soir,

Je n'ai pas vérifié, mais il me semble que dans la doc il est indiqué qu'il faut créer une feuille de style supplémentaire (tu n'en parles pas, peut être un oubli ?).

1. Tu effaces les sélecteurs qui concernent le globalnav dans la feuille style.css

2. Tu ajoutes en haut de la feuille l'instruction d'import de la nouvelle feuille dédiée au formatage des menus déroulants (nommée par exemple navigation.css)

3. Tu crées ta feuille navigation.css et l'enregistres dans le répertoire /css

Exemple de code :

/*============= Style pour l'include globalnav.html ================*/
#xo-globalnav {
  
height:                                    30px;
    
border:                                    none;
    
background-color:                        transparent;
    
font-size:                                .9em;
}

html #xo-globalnav { height:         30px; }

#xo-globalnav img {
    
padding5px 0 0 5px;
}

#xo-globalnav .x2-label {display:    none;}
#xo-globalnav ul {
list-style-type:    none;
}
#xo-globalnav ul li {
    
float:                                    left;
    
position:                                relative;
    
z-index:                                    auto !important /*Non-IE6*/;
    
z-index:                                    1000 /*IE6*/;
}
#xo-globalnav ul li a {
    
float:                                    none !important /*Non-IE6*/;
    
float:                                    left /*IE-6*/;
    
display:                                    block;
    
color#666;
    
height:                                    25px;
    
line-height:                            2em;
    
padding:                                 0 10px 0 10px;
    
text-decoration:                        none;
    
font-weight:                            bold;
}
#xo-globalnav ul li a:hover {
    
color:                                    #3366cc;
    
background-color:                     #fff !important;
    
font-style:                             normal;
    
text-decoration:                        none;
}
#xo-globalnav ul li ul {
    
display:                                    none;
    
border:                                    none;
    
margin-left10px;
}

/*Non-IE6 hovering*/
#xo-globalnav ul li:hover a {} 
#xo-globalnav ul li:hover ul {
    
display:                                block;
    
width:                                130px;
    
position:                            absolute;
    
z-index:                                999;
    
top:                                    25px;
    
margin-top:                            0em;
    
left:                                    0;
}
#xo-globalnav ul li ul li {}
#xo-globalnav ul li:hover ul li a {
    
display:                                block;
    
width:                                130px;
    
height:                                auto;
    
margin-left:                        0;
    
padding:                        4px 10px 4px 10px;
    
border-right:                     1px solid #99b3e6;
    
border-left:                     1px solid #99b3e6;
    
border-bottom:                     1px solid #99b3e6;
    
background-color:                 #fff;
    
font-weight:                        normal;
}
#xo-globalnav ul li:hover ul li a:hover {
    
color:                                #666;
    
background-color:                 #99b3e6 !important;
    
text-decoration:                    none;
}

/*Paramètres spécifiques pour IE6*/
#xo-globalnav table {
    
position:                            absolute;
    
top:                                    -1px;
    
left:                                    0;
    
border-collapse:                    collapse;
}
#xo-globalnav ul li a:hover {
    
background-color:                 #fff;
    
text-decoration:                    none;
}
#xo-globalnav ul li a:hover ul {
    
display:                                block;
    
width:                                90px;
    
position:                            absolute;
    
z-index:                                999;
    
top:                                    25px;
    
left:                                    0;
    
margin-top:                            0.1em;
}
#xo-globalnav ul li a:hover ul li a {
    
display:                                block;
    
width:                                90px;
    
height:                                1px;
    
line-height:                        1.3em;
    
padding:                                4px 10px 4px 10px;
    
border-right:                     1px solid #99b3e6;
    
border-left:                         1px solid #99b3e6;
    
border-bottom:                     1px solid #99b3e6;
    
background-color:                 #fff;
    
font-weight:                        normal;
}
#xo-globalnav ul li a:hover ul li a:hover {
    
background-color:                 #99b3e6 !important;
    
text-decoration:                    none;
}


Note : je te conseille de télécharger la nouvelle archive du thème sur mon site, les 3 premiers jours il y a eu quelques cafouillages / bugs

@+

Posté le : 14/11/2007 01:22
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Aspirant
Inscrit: 07/10/2007 23:38
Messages: 28
Bonjour burning

Merci pour ton aide. Je suis fautif et j ai sauté une etape.
Mea maxima culpa. J ai rectifié mais il me reste une question, en appliquant le code que tu m as proposé, le sous menu (4 sous menus pour "articles" par exemple)se place entre "article" et "forum" et il n y a pas de deroulement des sous menus lors du clic....

Posté le : 14/11/2007 06:23
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Guest_
B'jour,

C'est bizarre, cela fonctionne chez moi :

- je supprime tout ce qui concerne globalnav dans la feuille style.css
- j'écris @import url(navigation.css); en haut de la feuille style.css
- j'enregistre le code ci-dessus dans navigation.css dans le répertoire /css

Si tu as fait cela et que cela ne fonctionne toujours pas, essaies d'ajouter cette déclaration au sélecteur ul :

#xo-globalnav ul {
display: block !important;
}

@+

Posté le : 14/11/2007 11:33
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Aspirant
Inscrit: 07/10/2007 23:38
Messages: 28
Bonsoir j ai bien repris tout
suppression du theme
reinstallation (version du 04/11)
et le probleme est toujours le meme, les sous menus apparaissent entre les menus.
Quant a la derniere modification je la place dans quel fichier exactement ( emplacement...).

desole mais je debute...
et merci pour ton aide...
@+

Posté le : 14/11/2007 22:41
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Guest_
B'soir,

Je vais reprendre la procédure depuis le début et je te tiens au courant... il est possible que j'ai oublié quelque chose

@+

Posté le : 14/11/2007 22:44
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Guest_
B'jour,

J'ai ré-essayé, ton souci doit provenir de la composition du fichier globalnav.html.

Avec ce code pour globalnav.html, associé au précédent navigation.css, les sous-menus se déploient normalement :

<div id="xo-globalnav" class="x2-nl x2-navigation">
<
ul>
        <
li class="x2-label"><{$smarty.const.THEME_NAVTITLE}></li>

        <!-- 
menu en mode anonyme -->

        <
li><a href="<{xoAppUrl}>" accesskey="a"  title="<{$smarty.const.THEME_HOME_DESC}>"><img src="<{xoImgUrl icons/action/home.png}>" />&nbsp;<{$smarty.const.THEME_HOME}></a></li>
        
    
    <{if !
$xoops_isuser}>


    <
li><a href="<{xoAppUrl modules/news/}>" accesskey=""  title="<{$smarty.const.THEME_MODULE1_DESC}>"><img src="<{xoImgUrl icons/action/articles.png}>" />&nbsp;<{$smarty.const.THEME_MODULE1}></a>

                <
ul>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=3}>" title="<{$smarty.const.THEME_MODULE1_SUB1_DESC}>"><{$smarty.const.THEME_MODULE1_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=4}>" title="<{$smarty.const.THEME_MODULE1_SUB2_DESC}>"><{$smarty.const.THEME_MODULE1_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=5}>" title="<{$smarty.const.THEME_MODULE1_SUB3_DESC}>"><{$smarty.const.THEME_MODULE1_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=4}>" title="<{$smarty.const.THEME_MODULE1_SUB2_DESC}>"><{$smarty.const.THEME_MODULE1_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=5}>" title="<{$smarty.const.THEME_MODULE1_SUB3_DESC}>"><{$smarty.const.THEME_MODULE1_SUB5}></a></li>
                
                </
ul></li>

        <
li><a href="<{xoAppUrl modules/mydownloads/}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_DESC}>"><img src="<{xoImgUrl icons/action/telechargement.png}>" />&nbsp;<{$smarty.const.THEME_MODULE2}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE2_SUB1_DESC}>"><{$smarty.const.THEME_MODULE2_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE2_SUB2_DESC}>"><{$smarty.const.THEME_MODULE2_SUB2}></a></li>
                          <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE2_SUB3_DESC}>"><{$smarty.const.THEME_MODULE2_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE2_SUB2_DESC}>"><{$smarty.const.THEME_MODULE2_SUB4}></a></li>
                          <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=6}>" title="<{$smarty.const.THEME_MODULE2_SUB3_DESC}>"><{$smarty.const.THEME_MODULE2_SUB5}></a></li>                
                         </
ul></li>

        <
li><a href="<{xoAppUrl modules/mylinks/}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_DESC}>"><img src="<{xoImgUrl icons/action/lien.png}>" />&nbsp;<{$smarty.const.THEME_MODULE3}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE3_SUB1_DESC}>"><{$smarty.const.THEME_MODULE3_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=2}>" title="<{$smarty.const.THEME_MODULE3_SUB2_DESC}>"><{$smarty.const.THEME_MODULE3_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE3_SUB3_DESC}>"><{$smarty.const.THEME_MODULE3_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE3_SUB4_DESC}>"><{$smarty.const.THEME_MODULE3_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE3_SUB5_DESC}>"><{$smarty.const.THEME_MODULE3_SUB5}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=6}>" title="<{$smarty.const.THEME_MODULE3_SUB6_DESC}>"><{$smarty.const.THEME_MODULE3_SUB6}></a></li>                
                </
ul></li>
                
        <
li><a href="<{xoAppUrl modules/myalbum/}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_DESC}>"><img src="<{xoImgUrl icons/action/images.png}>" />&nbsp;<{$smarty.const.THEME_MODULE4}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE3_SUB1_DESC}>"><{$smarty.const.THEME_MODULE3_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=2}>" title="<{$smarty.const.THEME_MODULE3_SUB2_DESC}>"><{$smarty.const.THEME_MODULE3_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE3_SUB3_DESC}>"><{$smarty.const.THEME_MODULE3_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE3_SUB4_DESC}>"><{$smarty.const.THEME_MODULE3_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE3_SUB5_DESC}>"><{$smarty.const.THEME_MODULE3_SUB5}></a></li>
                </
ul></li>


        <{else}>

    <
li><a href="<{xoAppUrl modules/news/}>" accesskey=""  title="<{$smarty.const.THEME_MODULE1_DESC}>"><img src="<{xoImgUrl icons/action/articles.png}>" />&nbsp;<{$smarty.const.THEME_MODULE1}></a>

                <
ul>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=3}>" title="<{$smarty.const.THEME_MODULE1_SUB1_DESC}>"><{$smarty.const.THEME_MODULE1_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=4}>" title="<{$smarty.const.THEME_MODULE1_SUB2_DESC}>"><{$smarty.const.THEME_MODULE1_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=5}>" title="<{$smarty.const.THEME_MODULE1_SUB3_DESC}>"><{$smarty.const.THEME_MODULE1_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=4}>" title="<{$smarty.const.THEME_MODULE1_SUB2_DESC}>"><{$smarty.const.THEME_MODULE1_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/news/article.php?storyid=5}>" title="<{$smarty.const.THEME_MODULE1_SUB3_DESC}>"><{$smarty.const.THEME_MODULE1_SUB5}></a></li>
                
                </
ul></li>

        <
li><a href="<{xoAppUrl modules/mydownloads/}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_DESC}>"><img src="<{xoImgUrl icons/action/telechargement.png}>" />&nbsp;<{$smarty.const.THEME_MODULE2}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE2_SUB1_DESC}>"><{$smarty.const.THEME_MODULE2_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE2_SUB2_DESC}>"><{$smarty.const.THEME_MODULE2_SUB2}></a></li>
                          <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE2_SUB3_DESC}>"><{$smarty.const.THEME_MODULE2_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE2_SUB2_DESC}>"><{$smarty.const.THEME_MODULE2_SUB4}></a></li>
                          <
li><a href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=6}>" title="<{$smarty.const.THEME_MODULE2_SUB3_DESC}>"><{$smarty.const.THEME_MODULE2_SUB5}></a></li>                
                         </
ul></li>

        <
li><a href="<{xoAppUrl modules/mylinks/}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_DESC}>"><img src="<{xoImgUrl icons/action/lien.png}>" />&nbsp;<{$smarty.const.THEME_MODULE3}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE3_SUB1_DESC}>"><{$smarty.const.THEME_MODULE3_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=2}>" title="<{$smarty.const.THEME_MODULE3_SUB2_DESC}>"><{$smarty.const.THEME_MODULE3_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE3_SUB3_DESC}>"><{$smarty.const.THEME_MODULE3_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE3_SUB4_DESC}>"><{$smarty.const.THEME_MODULE3_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE3_SUB5_DESC}>"><{$smarty.const.THEME_MODULE3_SUB5}></a></li>
                  <
li><a href="<{xoAppUrl modules/mylinks/viewcat.php?cid=6}>" title="<{$smarty.const.THEME_MODULE3_SUB6_DESC}>"><{$smarty.const.THEME_MODULE3_SUB6}></a></li>                
                </
ul></li>
                
        <
li><a href="<{xoAppUrl modules/myalbum/}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_DESC}>"><img src="<{xoImgUrl icons/action/images.png}>" />&nbsp;<{$smarty.const.THEME_MODULE4}></a>
                <
ul>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=1}>" title="<{$smarty.const.THEME_MODULE3_SUB1_DESC}>"><{$smarty.const.THEME_MODULE3_SUB1}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=2}>" title="<{$smarty.const.THEME_MODULE3_SUB2_DESC}>"><{$smarty.const.THEME_MODULE3_SUB2}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=3}>" title="<{$smarty.const.THEME_MODULE3_SUB3_DESC}>"><{$smarty.const.THEME_MODULE3_SUB3}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=4}>" title="<{$smarty.const.THEME_MODULE3_SUB4_DESC}>"><{$smarty.const.THEME_MODULE3_SUB4}></a></li>
                  <
li><a href="<{xoAppUrl modules/myalbum/viewcat.php?cid=5}>" title="<{$smarty.const.THEME_MODULE3_SUB5_DESC}>"><{$smarty.const.THEME_MODULE3_SUB5}></a></li>
                </
ul></li>
        
        <{/if}>


        <{if 
$xoops_isadmin}>

        <!-- 
lien supplémentaire si je suis administrateur -->

        <
li><a href="<{xoAppUrl modules/system/admin.php}>" accesskey="p" title="<{$smarty.const.THEME_ADMIN_DESC}>"><img src="<{xoImgUrl icons/action/administration.png}>" />&nbsp;<{$smarty.const.THEME_ADMIN}><!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if 
lte IE 6]><table><tr><td><![endif]-->
                <
ul
                  <
li><a rel="external" href="<{xoAppUrl modules/system/admin.php?fct=preferences}>" title="<{$smarty.const.THEME_ADMIN_PREFERENCES_DESC}>"><{$smarty.const.THEME_ADMIN_PREFERENCES}></a></li>
                  <
li><a rel="external" href="<{xoAppUrl modules/system/admin.php?fct=modulesadmin}>" title="<{$smarty.const.THEME_ADMIN_GENERAL_DESC}>"><{$smarty.const.THEME_ADMIN_GENERAL}></a></li>
                  <
li><a rel="external" href="<{xoAppUrl modules/xoopsinfo/admin/index.php}>" title="<{$smarty.const.THEME_ADMIN_MODULES_DESC}>"><{$smarty.const.THEME_ADMIN_MODULES}></a></li>
                  <
li><a rel="external" href="<{xoAppUrl modules/xoopsinfo/admin/index.php}>" title="<{$smarty.const.THEME_ADMIN_IMAGES_DESC}>"><{$smarty.const.THEME_ADMIN_IMAGES}></a></li>                  
                </
ul></li>
                <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->

        
        <{/if}>
        <
li><a href="<{xoAppUrl modules/liaise/}>" accesskey="c" title="<{$smarty.const.THEME_CONTACT_DESC}>"><img src="<{xoImgUrl icons/action/contact.png}>" />&nbsp;<{$smarty.const.THEME_CONTACT}></a></li>
</
ul>
</
div>


@+

Posté le : 15/11/2007 14:13
Partager Twitter Partagez cette article sur GG+
Re: Menu dynamique deroulant avec theme blueday
Aspirant
Inscrit: 07/10/2007 23:38
Messages: 28
bonsoir burning

Merci pour ton aide maintenant cela fonctionne a merveille....

Encore merci pour avoir aider un newbies comme moi.

Longue vie a Xoops

Posté le : 15/11/2007 17:50
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



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

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