menue haut en déroulant sous phbb3

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu menue haut en déroulant sous phbb3

Message par winatickets le Lun 21 Mar 2016 - 19:37

Bonjour les amis , j'aimerai savoir ou et comment proceder pour :

-changer le menue du haut mais en déroulant ( garder le même mais avec option déroulant ) , je ne parle pas de la barre de navigation etc sur le coté ou autre mais bien du menue en lui même

autre si pas possible:

-changer complètement le menue et installer un menue déroulant via le template

merci pour toute vos réponse amicalement serge


Dernière édition par winatickets le Mer 23 Mar 2016 - 8:46, édité 1 fois

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

http://winatickets.forumactif.org
winatickets a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menue haut en déroulant sous phbb3

Message par Kiowa le Lun 21 Mar 2016 - 21:06

Un peu.. comme dans ce style là?

http://kiowatest.forum-pro.fr/

Kiowa
***

Féminin
Messages : 123
Inscrit(e) le : 25/08/2007

http://alvarosdeadnight.forumgratuit.org/
Kiowa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menue haut en déroulant sous phbb3

Message par winatickets le Mar 22 Mar 2016 - 13:27

Bonjour kiowa

merci pour ta réponse mais un peu plus professionnel quand même , donc pour tous ceux qui sont à la recherche d'un code pour faire un menue déroulant pro je vous donne les étapes et clos le sujet, et je ses que je vais faire plaisir à beaucoup de monde car après énormément de recherche j'ai rien trouvé, bref on attaque:

1- code css:
Code:
/* menue */
body {font: normal 0.75em/1.5em Arial, Helvetica, sans-serif;background: [b]#b1a8f5[/b];width: 100%;margin: 100px auto;color: #666;}
a {color: #333;}
  
#nav {margin: 0;padding: 7px 6px 0;background: #368AD2 url(http://i84.servimg.com/u/f84/17/15/41/45/gradie10.png) repeat-x 0 -110px;line-height: 100%;
   border-radius: 2em;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#nav li {margin: 0 2px;padding: 0 0 8px;float: left;position: relative;list-style: none;}

/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
   -webkit-border-radius: 1.6em;
   -moz-border-radius: 1.6em;
   text-shadow: 0 1px 1px rgba(0,0,0, .3);}
#nav a:hover {background: #000;color: #fff;}

/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(http://i84.servimg.com/u/f84/17/15/41/45/gradie10.png) repeat-x 0 -40px;color: #444;border-top: solid 1px #f8f8f8;
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
   -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
   box-shadow: 0 1px 1px rgba(0,0,0, .2);
   text-shadow: 0 1px 0 rgba(255,255,255, 1);}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: none;border: none;color: #666;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;}
#nav ul a:hover {background: #0078ff url(http://i84.servimg.com/u/f84/17/15/41/45/gradie10.png) repeat-x 0 -100px !important;
   color: #fff !important;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   text-shadow: 0 1px 1px rgba(0,0,0, .1);}

/* dropdown */
#nav li:hover > ul {display: block;}

/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
   background: #ddd url(http://i84.servimg.com/u/f84/17/15/41/45/gradie10.png) repeat-x 0 0;
   border: solid 1px #b4b4b4;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
   box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#nav ul li {float: none;margin: 0;padding: 0;}

#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}

/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
   -webkit-border-top-left-radius: 9px;
   -moz-border-radius-topleft: 9px;

   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
   -webkit-border-bottom-left-radius: 9px;
   -moz-border-radius-bottomleft: 9px;

   -webkit-border-bottom-right-radius: 9px;
   -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}

Pour changer la couleur du menue fond, la ligne est celle-ci: background: le b1a8f5= couleur

Code:
body {font: normal 0.75em/1.5em Arial, Helvetica, sans-serif;background: #b1a8f5;width: 100%;margin: 100px auto;color: #666;}
a {color: #333;}

étape 2: vouc devez allez dans le template général de votre forum
panneau admin--affichage--template--général--overall_header

-vous devez supprimer que cette ligne
Code:
{GENERATED_NAV_BAR}

et la vous pourvez installer le menue juste en dessous de cette ligne
Code:
<div class="inner"><span class="corners-top"><span></span></span>

donc voici le menue:
Code:
<div align="left">
    
   <table border="0" style="width: 95%;">
                                                                                     
      <tbody>
                                
         <tr>
                                                                     
            <td valign="top">
                
               
<ul id="nav">
<li class="current"><a href="#">Accueil</a></li><!-- n1 -->
<li><a href="#">Mon compte</a><!-- n1 -->
   <ul>
      <li><a href="http://forum.forumactif.com//register">Inscription</a></li><!-- n2 -->
      <li><a href="http://forum.forumactif.com//login">Connexion</a></li><!-- n2 -->
          <li><a href="#">Profils <img src="http://i84.servimg.com/u/f84/17/15/41/45/multi10.png" border="0" width="15" height="15" align="absmiddle"></a><!-- n2 -->
         
                  <ul>
            <li><a href="http://forum.forumactif.com//profile?mode=editprofile">Informations</a></li><!-- n3 -->
            <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=preferences">Préférences</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=signature">Signature</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=attachments">Fichiers joints</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=avatars">Avatar</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=notifications">Notifications</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//search?search_id=watchsearch">Sujets surveillés</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//search?search_id=favouritesearch">Favoris</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=tags">Tags</a></li><!-- n3 -->
         </ul>
      </li>
            <li><a href="http://forum.forumactif.com//memberlist">Membres</a></li><!-- n2 -->
         
      <li><a href="#">Groupes <img src="http://i84.servimg.com/u/f84/17/15/41/45/multi10.png" border="0" width="15" height="15" alt="" align="absmiddle"></a><!-- n2 -->
         <ul>
            <li><a href="http://forum.forumactif.com//profile?mode=editprofile">Informations</a></li><!-- n3 -->
            <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=preferences">Préférences</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=editprofile&page_profil=signature">Signature</a></li><!-- n3 -->
         </ul>
      </li>
                  <li><a href="#">Messageries <img src="http://i84.servimg.com/u/f84/17/15/41/45/multi10.png" border="0" width="15" height="15" alt="" align="absmiddle"></a><!-- n2 -->
         <ul>
            <li><a href="http://forum.forumactif.com//privmsg?folder=inbox">Votre messagerie</a></li><!-- n3 -->
            <li><a href="http://forum.forumactif.com//privmsg?mode=post">Editer un message</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//privmsg?folder=sentbox">Messages envoyés</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//privmsg?folder=savebox">Archives</a></li><!-- n3 -->
                                <li><a href="http://forum.forumactif.com//profile?mode=email&u=1"mail</a></li><!-- n3 -->
                             
         </ul>
      </li>
      <li><a href="http://forum.forumactif.com//logout">Déconnexion</a></li><!-- n2 -->
   
   </ul>
</li>
<li><a href="#">teste</a>
   <ul>
      <li><a href="#">teste1 <img src="http://i84.servimg.com/u/f84/17/15/41/45/multi10.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
         <ul>
            <li><a href="http://forum.forumactif.com/">teste1</a></li><!-- n2 -->
            <li><a href="http://forum.forumactif.com/">teste2</a></li><!-- n2 -->
                                <li><a href="http://forum.forumactif.com/">teste3</a></li><!-- n2 -->
                                <li><a href="http://forum.forumactif.com//">teste4</a></li><!-- n2 -->
         
         </ul>
      </li>
      <li><a href="#">teste6 <img src="http://i84.servimg.com/u/f84/17/15/41/45/multi10.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
         <ul>
            <li><a href="http://forum.forumactif.com/">teste6</a></li>
            <li><a href="http://forum.forumactif.com/">teste7</a></li>
            <li><a href="http://forum.forumactif.com/">teste8</a></li>
         </ul>
      </li>

   </ul>
</li>                     
</ul>


                
            </td>
                                                               
         </tr>
                              
      </tbody>
       
   </table><br />
</div>

Voila les amis vous pouvez modifer les liens , en rajouter etc tout se passe dans le overall-header

Bonne journée à tous amicalement serge

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

http://winatickets.forumactif.org
winatickets a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum