It is currently Fri 30 Sep 2016 - 03:29 - créer un forum

[Tutoriel] Menu style dropdown tout en css + menu responsive

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3, 4, 5, 6, 7, 8  >

[Tutoriel] Menu style dropdown tout en css + menu responsive
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Fri 4 Apr 2014 - 22:17    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

PublicitéSupprimer les publicités ?
Informations sur le tutoriel
Utilité
Faire un menu DropDown sur son forum
______________________________________
AuteurRotorMan (par MP)
______________________________________
DescriptionCréer un menu dropdown sur son forum
Exemple______________________________________
Sur une barre au fond noir
http://hightech.xooit.com/index.php

Sur une barre au fond bleu
http://hightech.xooit.com/index.php?theme=test

Sur mon forum principal avec fond bleu
http://www.aide-brico.com/index.php
______________________________________
 
Défaut(s)    Aucun à ma connaissance
______________________________________
Difficulté  
               
  • Installation: novice voir initié
               
  • Compréhension: initié
                      
  • Temps d'installation: moyen, dépend de l'utilisateur
  • En trois étapes
            
Templates à modifier  _____________________________________
               
  •   2 :
  •            overall_header.tpl et  Le css du menu (pas obligatoire)        
  _____________________________________
Testé sur
               
  • Navigateurs               
                    
    • Firefox toutes versions, IE 7 à 11, Opéra, Maxthon, Google Chrome, Safari
                    
               
  • Thèmes Xooit               
                     
    • Prosilver adapté sur xooit (dernier lien en exemple) mais fonctionne sur tous.
    • Pluminator (premier lien en exemple).  
    • Subsilverplus (deuxième lien en exemple)       
                      



Exemple en images :










Ce menu m'a été très demandé, c'est pourquoi je vous le propose.    
                  





Menu responsive

Le tuto du menu responsive est plus loin sur ce fil de discussion.

Pour mettre en place le code html, le tuto, ci-dessous s'applique.



Installation
Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.
Sauvegardez


-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Première étape :

Ouvrez votre Overall_Header.tpl et placez ceci avant la balise </head> :

Pour le menu sur barre au fond noir :

Code: Sélectionner - Agrandir




<link href="http://img.xooimage.com/files56/c/9/5/rotormanmenu-44eb4cc.css" rel="stylesheet" type="text/css" />







Pour le menu sur barre au fond bleu :

Code: Sélectionner - Agrandir




<link href="http://img.xooimage.com/files57/8/f/5/rotormanmenu-44eb443.css" rel="stylesheet" type="text/css" />







Deuxième étape :

Toujours dans votre Overall_Header.tpl :

Placez ceci tout en bas (c'est l'ossature que vous pourrez changer selon vos besoins) :

Code: Sélectionner - Agrandir





/*-----------------------DÉBUT DU MENU --------------------*/

<div id="menu">
    
      <div id="conta">
    
<table cellspacing="0" align="left"> 
  <tr>
  <td class="li.row" align="left">

<ul id="nav">
 <li class="top"><a href="/index.php" class="top_link"><span>Index</span></a></li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a>
  <ul class="sub">
   <li><a href="#" class="fly">Sous rubrique A </a>
     <ul>
      <li><a href="#">Sous rubrique A - 1</a></li>
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul>
   </li>
   <li><a href="#" class="fly">Sous rubrique B</a>
     <ul>
      <li><a href="#">Sous rubrique B - 1</a></li>
      <li><a href="#">Sous rubrique B - 2</a></li>
      <li><a href="#">Sous rubrique B - 3</a></li>
      <li><a href="#">Sous rubrique B - 4</a></li>
      <li><a href="#" class="fly">Sous rubrique B - 1</a>
       <ul>
        <li><a href="#">Sous rubrique B - 1 - 1</a></li>
        <li><a href="#">Sous rubrique B - 1 - 2</a></li>
        <li><a href="#">Sous rubrique B - 1 - 3</a></li>
       </ul>
      </li>
      <li><a href="#" class="fly">Sous rubrique B - 2</a>
       <ul>
        <li><a href="#">Sous rubrique B - 2 - 1</a></li>
        <li><a href="#">Sous rubrique B - 2 - 2</a></li>
       </ul>
      </li>
     </ul>
   </li>
   <li><a href="#">Sous rubrique C</a></li>
   <li><a href="#">Sous rubrique D</a></li>
   <li><a href="#">Sous rubrique E</a></li>
  </ul>
 </li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 2</span></a>

  <ul class="sub">
   <li><a href="#">Sous rubrique F</a></li>
   <li><a href="#">Sous rubrique G</a></li>
   <li><a href="#">Sous rubrique H</a></li>
   <li><a href="#">Sous rubrique I</a></li>
  </ul>
 </li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 3</span></a>

  <ul class="sub">

   <li><a href="#">Sous rubrique J</a></li>
   <li><a href="#" class="fly">Sous rubrique K</a>
    <ul>
      <li><a href="#">Sous rubrique K - 1</a></li>
     <li><a href="#">Sous rubrique K - 2</a></li>
     <li><a href="#">Sous rubrique K - 3</a></li>
     <li><a href="#">Sous rubrique K - 4</a></li>
     <li><a href="#">Sous rubrique K - 5</a></li>
     <li><a href="#">Sous rubrique K - 6</a></li>
    </ul>
   </li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
  </ul>
 </li>
 <li class="top"><a href="#" id="" class="top_link"><span class="down">Rubrique 4</span></a>
  <ul class="sub">
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
  </ul>
 </li>
 <li class="top"><a href="#" class="top_link"><span>Rubrique 5</span></a></li>

</ul>
</td>

  </tr>
  

</table>    
</div></div>


/*-------------------Fin du menu---------------------------*/








Troisième étape :


Il ne vous reste plus qu'à renseigner le menu à votre guise.

Pour ce faire, je vous ai nommé les rubriques et les sous-rubriques dans le code de l'overall-header afin que vous puissiez facilement vous retrouver.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Quelques explications sur le code du menu :



Code: Sélectionner - Agrandir





<li class="top"><a href="#" class="top_link">







Est le titre du bouton sur la barre du menu

Cependant pour n'avoir que le bouton sans sous-rubrique, il suffit de mettre un titre et de fermer la "li", exemple :

Code: Sélectionner - Agrandir





<li class="top"><a href="#" class="top_link"><span>Rubrique</span></a></li>







Ensuite :

Code: Sélectionner - Agrandir





<ul class="sub">
                 <li><a href="#">Sous rubrique</a></li>







Permet de placer des liens dans les rubriques.

On le place toujours sous la "li" du bouton, exemple :

Code: Sélectionner - Agrandir





 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique</span></a> // Bouton sur la barre
  <ul class="sub">      // ouverture de la sous-rubrique
   <li><a href="#">Sous rubrique</a></li>      // Lien de la sous-rubrique








Ce qui donne avec la mise en place du bouton sur la barre :

Code: Sélectionner - Agrandir





 <li class="top"><a href="#" id="services" class="top_link"><span class="down">Rubrique</span></a> // bouton de la barre

  <ul class="sub">  // ouverture de la sous Rubrique
   <li><a href="#">Sous rubrique</a></li> // Lien dans la rubrique
   <li><a href="#">Sous rubrique</a></li>
   <li><a href="#">Sous rubrique</a></li>
   <li><a href="#">Sous rubrique</a></li>
  </ul>  // fermeture de la sous-rubrique
 </li> // fermeture de la "li" (de la rubrique)








Pour afficher des liens dans les sous sous-rubriques, on se sert de la balise "fly" :

Exemple :

Code: Sélectionner - Agrandir





   <li><a href="#" class="fly">Sous rubrique</a> // permet d'avoir des sous sous rubriques
     <ul> // ouverture des liens de la sous sous-rubrique
      <li><a href="#">Sous rubrique A - 1</a></li> // lien de la sous sous-rubrique (autant que vous le désirez)







On ferme la rubrique afin qu'elle soit active :

Code: Sélectionner - Agrandir




     </ul>
   </li>







Vous devez donc avoir :

Code: Sélectionner - Agrandir





   <li><a href="#" class="fly">Sous rubrique A </a>
     <ul>
      <li><a href="#">Sous rubrique A - 1</a></li>
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul>
   </li>







Ce qui donne : Titre (bouton) de la rubrique sur la barre du menu, lien dans cette rubrique et ce même lien en ouvre d'autres :

Code: Sélectionner - Agrandir





 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a>
  <ul class="sub">
   <li><a href="#" class="fly">Sous rubrique A </a>
     <ul>
      <li><a href="#">Sous rubrique A - 1</a></li>
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul>
   </li>






Rappelons nous, nous avons ouvert une rubrique avec "li" et ses sous-rubriques avec "ul".
Cependant nous avons rajouté une "li" et une "ul" pour avoir une sous rubrique qui ouvre d'autres liens.

De ce fait il faut impérativement fermer ces balises, donc au complet vous devez avoir ceci (exemple tiré du code proposé pour vous aider) :

Code: Sélectionner - Agrandir





<li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a> // Titre du Bouton sur la barre
  <ul class="sub"> // ouverture de la sous-rubrique
   <li><a href="#" class="fly">Sous rubrique A</a> // Lien de la sous-rubrique qui permet d'avoir d'autres sous-rubriques
     <ul> // ouverture des liens
      <li><a href="#">Sous rubrique</a></li> // liens dans la sous-rubrique
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul> // fermeture de l'ul de la sous rubrique
   </li> // fermeture de la li de la sous rubrique
 </ul> // fermeture de l'ul de la rubrique
   </li> // fermeture de la li de la rubrique







Pour avoir des sous sous sous-rubriques dans une rubrique il suffit de mettre en pratique les explications ci-dessus :

Exemple (déjà dans le code proposé) :
    
Code: Sélectionner - Agrandir





 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a> // Titre du Bouton sur la barre
 <ul class="sub"> // ouverture de la sous rubrique
<li><a href="#" class="fly">Sous rubrique B</a> // liens dans la sous-rubrique ouvrant d'autres liens (sous sous-rubrique)
     <ul> // ouverture des liens de la sous sous-rubrique
    <li><a href="#" class="fly">Sous rubrique B - 1</a> //  ouverture de la sous sous-rubrique
       <ul> //  ouverture des liens de la sous sous-rubrique
        <li><a href="#">Sous rubrique B - 1 - 1</a></li> //  liens de la sous sous-rubrique
        <li><a href="#">Sous rubrique B - 1 - 2</a></li>
        <li><a href="#">Sous rubrique B - 1 - 3</a></li>
       </ul> // fermeture de l'ul de la sous sous-rubrique
      </li> // fermeture de la li de la sous sous-rubrique
       </ul> // fermeture de l'ul de la sous-rubrique
      </li> // fermeture de la li de la sous-rubrique
     </ul> // fermeture de l'ul de la rubrique
   </li> // fermeture de la li de la rubrique






Bien entendu, il faut mettre vos liens à la place du # dans les :

Code: Sélectionner - Agrandir






 <a href="#"> // <a href="LIEN">







Vous avez maintenant tout ce qu'il vous faut pour créer votre menu personnalisé.

Vous pouvez donc, modifier à l'infini votre menu et changer son design selon vos envies et besoins.



--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


Avoir un menu plus petit et centré :

Il suffit de déplacer les balises de la table comme ceci :


Code de l'ossature en html :


Code: Sélectionner - Agrandir

 /*-------------------Début du Menu------------------------------*/

<table cellspacing="0" align="center" width:100%;> 
  <tr>
  <td>


<div id="menu">
    
      <div id="conta">
    

<ul id="nav">
    <li class="top"><a href="{U_INDEX}" class="top_link"><span>Index</span></a></li>

    <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a>
        <ul class="sub">
            <li><a href="#" class="fly">Sous rubrique A </a>
                    <ul>
                        <li><a href="#">Sous rubrique A - 1</a></li>
                        <li><a href="#">Sous rubrique A - 2</a></li>
                        <li><a href="#">Sous rubrique A - 3</a></li>
                    </ul>
            </li>
            <li><a href="#" class="fly">Sous rubrique B</a>
                    <ul>
                        <li><a href="#">Sous rubrique B - 1</a></li>
                        <li><a href="#">Sous rubrique B - 2</a></li>
                        <li><a href="#">Sous rubrique B - 3</a></li>
                        <li><a href="#">Sous rubrique B - 4</a></li>
                        <li><a href="#" class="fly">Sous rubrique B - 1</a>
                            <ul>
                                <li><a href="#">Sous rubrique B - 1 - 1</a></li>
                                <li><a href="#">Sous rubrique B - 1 - 2</a></li>
                                <li><a href="#">Sous rubrique B - 1 - 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="fly">Sous rubrique B - 2</a>
                            <ul>
                                <li><a href="#">Sous rubrique B - 2 - 1</a></li>
                                <li><a href="#">Sous rubrique B - 2 - 2</a></li>
                            </ul>
                        </li>
                    </ul>
            </li>
            <li><a href="#">Sous rubrique C</a></li>
            <li><a href="#">Sous rubrique D</a></li>
            <li><a href="#">Sous rubrique E</a></li>
        </ul>
    </li>

    <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 2</span></a>

        <ul class="sub">
            <li><a href="#">Sous rubrique F</a></li>
            <li><a href="#">Sous rubrique G</a></li>
            <li><a href="#">Sous rubrique H</a></li>
            <li><a href="#">Sous rubrique I</a></li>
        </ul>
    </li>

    <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 3</span></a>

        <ul class="sub">

            <li><a href="#">Sous rubrique J</a></li>
            <li><a href="#" class="fly">Sous rubrique K</a>
                <ul>
                     <li><a href="#">Sous rubrique K - 1</a></li>
                    <li><a href="#">Sous rubrique K - 2</a></li>
                    <li><a href="#">Sous rubrique K - 3</a></li>
                    <li><a href="#">Sous rubrique K - 4</a></li>
                    <li><a href="#">Sous rubrique K - 5</a></li>
                    <li><a href="#">Sous rubrique K - 6</a></li>
                </ul>
            </li>
            <li><a href="#">Sous rubrique L</a></li>
            <li><a href="#">Sous rubrique L</a></li>
            <li><a href="#">Sous rubrique L</a></li>
            <li><a href="#">Sous rubrique L</a></li>
        </ul>
    </li>
    <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 4</span></a>
        <ul class="sub">
            <li><a href="#">Sous rubrique M</a></li>
            <li><a href="#">Sous rubrique M</a></li>
            <li><a href="#">Sous rubrique M</a></li>
        </ul>
    </li>
    <li class="top"><a href="#"class="top_link"><span>Rubrique 5</span></a></li>



</ul></li>

</div></div>

</td>

  </tr>
  

</table>    



/*-------------------Fin du menu----------------------------*/








Exemple en image



Ou sur forum de test ICI
          

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


J'ai placé l'explication du style de la barre dans le css.

            
POUR INFO : Le menu est pré-réglé afin qu'il s'affiche sur toute la largeur de votre forum. Il est donc possible que selon les résolutions d'écrans, que le menu se déforme.
Pour régler ce problème, il suffit de changer la valeur "width:100%" par "width:960px;" (par exemple) dans le container du css fourni avec le menu :

Code: Sélectionner - Agrandir




 #conta{position:relative;z-index:20;width:100%;margin:0 auto;padding-top:3px}





--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Quelques boutons astuces tous faits :

Boutons "S'enregistrer" et "Connexion" :



Code: Sélectionner - Agrandir





 <!-- BEGIN switch_user_logged_out -->

                        <li class="top">                                      
        <a href="{U_REGISTER}" class="top_link"><span>S'inscrire</span></a></li>


                        <li class="top"> 
                    <a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>

<!-- END switch_user_logged_out -->








A placer juste après :


Code: Sélectionner - Agrandir





 <table cellspacing="0" align="left"> 
  <tr>
  <td class="li.row" align="left">

<ul id="nav">








Menu membre :




 A placé juste après les boutons "S'enregistrer" et "Connexion". Ils disparaitront au profit de celui çi lorsqu'un membre est connecté :


Code: Sélectionner - Agrandir





 <!-- BEGIN switch_user_logged_in -->
<li class="top"><a href="" id="" class="top_link"><span class="down">Menu membre</span></a>

    <ul class="sub">

        <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

        <li><a href="{U_PRIVATEMSGS}" target="_blank">{PRIVATE_MESSAGE_INFO}</a></li>

        <li><a href="{U_PROFILE}" target="_blank">Gérer votre profil</a></li>

        <li><a href="/viewonline.php" target="_blank">Qui est en ligne</a></li>
</ul>
</li>
<!-- END switch_user_logged_in -->








Bouton Outils (Faq, charte de votre forum, etc) :

A placer où vous voulez (après les boutons astuces ci-dessus par exemple) :


Code: Sélectionner - Agrandir





   <li class="top"><a href="" id="" class="top_link"><span class="down">Outils</span></a>
    
<ul class="sub">
                <li><a href="LIEN DE VOTRE CHARTE" target="_blank">Charte</a></li>
                <li><a href="/faq.php">Faq</a></li>
                
                <li><a href="http://translate.google.com/translate" target="_blank">Traduire la page, un mot ou un texte</a></li>

        </ul>
      </li>








Servez vous des balises utilisées dans ces boutons "astuces" pour les retrouver dans votre overall_header et afin de les neutraliser :

Exemples :



Code: Sélectionner - Agrandir





// Balise Faq :

/**<a href="{U_FAQ}" class="mainmenu"><img src="http://img.xooimage.com/files3/i/c/icon_mini_faq-908b9.png" border="0" alt="{L_FAQ}"/></a>**/

// Balise Profil :

/**<a href="{U_PROFILE}" class="mainmenu"><img src="http://img.xooimage.com/files3/i/c/icon_mini_profile-908bd.png" border="0" alt="{L_PROFILE}" /></a>**/

// Balise MP : vous avez un message privé ou vous n'avez pas de message :

/**<a href="{U_PRIVATEMSGS}"><img src="{PRIVMSG_IMG}" border="0" alt="{PRIVATE_MESSAGE_INFO}" title="{PRIVATE_MESSAGE_INFO}" /></a>**/


// Balise se connecter ou se déconnecter :

/**<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img.xooimage.com/files4/i/c/icon_mini_login-908be.png" border="0" alt="{L_LOGIN_LOGOUT}" /></a>**/








Je pense n'avoir rien oublié, si vous avez des suggestions ou des questions, n'hésitez pas ! Postez les à la suite de ce tuto.

En espérant avoir été le plus explicite possible.

Cordialement

Edit : Ajout des boutons "astuces". Ajout centrage du menu. Ajout liens d'exemple sur forums. Correctif dans les css.

Edit: Ajout du menu responsive



      

_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Following members like this message:
kieffer (05/04/14)


Last edited by RotorMan on Mon 17 Nov 2014 - 19:16; edited 16 times in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Fri 4 Apr 2014 - 23:40    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonsoir 
merci mon ami je vais tester ca de de pas 
premiere question de boulet comment recuperer les variable faq, membre, groupe c'est a dire replace cela 





par ton menu sur ton forum j'ai vu que tu as réussit a le faire 
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 02:02    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour Kieffer,

J'ai édité le tuto et ai rajouté les codes des boutons tous faits (à copier/coller) pour "S'enregistrer", "Connexion", Menu membre (qui apparait à la place des deux premiers lorsque le membre se connecte et "Outils" qui comporte la faq et la charte (entre autres). Le principal que l'on utilise généralement.

Dans "Outils" tu peux rajouter "Groupe", "Membres" etc...

Exemple pour le bouton "Outils" :

Code: Sélectionner - Agrandir

    <li class="top"><a href="" id="" class="top_link"><span class="down">Outils</span></a> 
     
<ul class="sub"> 
                <li><a href="LIEN DE VOTRE CHARTE">Charte</a></li> 
                <li><a href="{U_FAQ}">Faq</a></li> 
                <li><a href={U_SEARCH}">Rechercher</a></li>                
                <li><a href={U_MEMBERLIST}">Membres</a></li> 
                <li><a href="{U_GROUP_CP}">Groupes</a></li>            
                <li><a href="http://translate.google.com/translate" target="_blank">Traduire la page, un mot ou un texte</a></li> 
 
        </ul> 
      </li> 




Dans l'Overall_Header, il faut neutraliser (sinon ce sera en double sur le forum)  les balises utilisées dans le menu :

On neutralise, avec des "/*" et "*/",  (selon les thèmes, cela peut différer légèrement) :

Code: Sélectionner - Agrandir


 /**<a href="{U_SEARCH}" class="mainmenu"><img src="http://img.xooimage.com/files8/i/c/icon_mini_search-908ba.png" border="0" alt="{L_SEARCH}" /></a>**/

/**<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img.xooimage.com/files9/i/c/icon_mini_members-908bb.png"  border="0" alt="{L_MEMBERLIST}" /></a>**/

/**<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img.xooimage.com/files8/i/c/icon_mini_groups-908bc.png" border="0" alt="{L_USERGROUPS}" /></a>**/






Cordialement Smile
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 09:05    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

merci mon ami je regarde de pres
en mettant le 1er exemple bouton ils n'apparaisse pas bon je me suis dit il faut les deuxièmes et la en mettant ce code 

Code: Sélectionner - Agrandir

<!-- BEGIN switch_user_logged_in -->
<li class="top"><a href="" id="" class="top_link"><span class="down">Menu membre</span></a>

    <ul class="sub">

        <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

        <li><a href="{U_PRIVATEMSGS}" target="_blank">{PRIVATE_MESSAGE_INFO}</a></li>

        <li><a href="{U_PROFILE}" target="_blank">Gérer votre profil</a></li>

        <li><a href="/viewonline.php" target="_blank">Qui est en ligne</a></li>

<!-- ENDIF -->
</ul>
</li>
<!-- END switch_user_logged_in -->


j'ai une erreur de syntaxe !!! a priori c'est le endif il sert a quoi

Je te met mon template les boutons rubrique sont pas fini

Code: Sélectionner - Agrandir

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<body>
<head>

<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="google-site-verification" content="Yz3umpFnQmwmTMyDwtJ3OdXY-2-5uWlOOaiE64dnNw0" />

{META}
{NAV_LINKS}
<title>{SITENAME} .::. {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img.xooimage.com/files58/3/a/e/mylnebuleuse-44e246c.css" type="text/css" />
<style type="text/css">
<!--
TH         { background-image: url(http://img.xooimage.com/files9/c/e/cellpic3-34638.gif) }
TD.cat      { background-image: url(http://img.xooimage.com/files9/c/e/cellpic1-3463c.gif) }
TD.rowpic   { background-image: url(http://img.xooimage.com/files/) }
TD.catHead,TD.catSides,TD.catLeft,TD.catRight,TD.catBottom { background-image: url(http://img.xooimage.com/files9/c/e/cellpic1-3463c.gif) }
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
   if ( {PRIVATE_MESSAGE_NEW_FLAG} )
   {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=300,resizable=yes,WIDTH=400');;
   }
//-->
</script>
<!-- END switch_enable_pm_popup -->



<link href="http://img.xooimage.com/files56/8/8/9/rotormanmenu-44e28cb.css" rel="stylesheet" type="text/css" />



</head>


<script type="text/javascript">
var PreloadFlag = false;
var expDays = 90;
var exp = new Date();
var tmp = '';
var tmp_counter = 0;
var tmp_open = 0;

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function SetCookie(name, value)
{
   var argv = SetCookie.arguments;
   var argc = SetCookie.arguments.length;
   var expires = (argc > 2) ? argv[2] : null;
   var path = (argc > 3) ? argv[3] : null;
   var domain = (argc > 4) ? argv[4] : null;
   var secure = (argc > 5) ? argv[5] : false;
   document.cookie = name + "=" + escape(value) +
      ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
      ((path == null) ? "" : ("; path=" + path)) +
      ((domain == null) ? "" : ("; domain=" + domain)) +
      ((secure == true) ? "; secure" : "");
}

function getCookieVal(offset)
{
   var endstr = document.cookie.indexOf(";",offset);
   if (endstr == -1)
   {
      endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie(name)
{
   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0;
   while (i < clen)
   {
      var j = i + alen;
      if (document.cookie.substring(i, j) == arg)
      {
         return getCookieVal(j);
      }
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0)
      {
         break;
      }
   }
   return null;
}

function ShowHide(id1, id2, id3)
{
   var res = expMenu(id1);
   if (id2 != '')
   {
      expMenu(id2);
   }
   if (id3 != '')
   {
      SetCookie(id3, res, exp);
   }
}

function expMenu(id)
{
   var itm = null;
   if (document.getElementById)
   {
      itm = document.getElementById(id);
   }
   else if (document.all)
   {
      itm = document.all[id];
   }
   else if (document.layers)
   {
      itm = document.layers[id];
   }
   if (!itm)
   {
      // do nothing
   }
   else if (itm.style)
   {
      if (itm.style.display == "none")
      {
         itm.style.display = "";
         return 1;
      }
      else
      {
         itm.style.display = "none";
         return 2;
      }
   }
   else
   {
      itm.visibility = "show";
      return 1;
   }
}
</script>






<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
            <td><a href="{U_INDEX}"><img src="http://img.xooimage.com/files10/3/b/b/logoameliore-1bbe6fe.png" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
            <td align="center" width="100%" valign="middle"><span class="maintitle"></span><span class="gen">{SITE_DESCRIPTION}</span>&nbsp;</td>
              </tr>
         </table>
            <br />


/*-----------------------DÉBUT DU MENU --------------------*/

<div id="menu">
   
      <div id="conta">
   
<table cellspacing="0" align="left">
  <tr>
  <td class="li.row" align="left">

<ul id="nav">



 <!-- BEGIN switch_user_logged_out -->


                     <li class="top">                                     
        <a href="{U_REGISTER}" class="top_link"><span>S'inscrire</span></a></li>


                        <li class="top">
                    <a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>

<!-- END switch_user_logged_out -->


 <!-- BEGIN switch_user_logged_in -->
<li class="top"><a href="" id="" class="top_link"><span class="down">Menu membre</span></a>

    <ul class="sub">

        <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

        <li><a href="{U_PRIVATEMSGS}" target="_blank">{PRIVATE_MESSAGE_INFO}</a></li>

        <li><a href="{U_PROFILE}" target="_blank">Gérer votre profil</a></li>

        <li><a href="/viewonline.php" target="_blank">Qui est en ligne</a></li>


</ul>
</li>

<!-- END switch_user_logged_in -->



 <li class="top"><a href="/index.php" class="top_link"><span>Index</span></a></li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 1</span></a>
  <ul class="sub">
   <li><a href="#" class="fly">Sous rubrique A </a>
     <ul>
      <li><a href="#">Sous rubrique A - 1</a></li>
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul>
   </li>
   <li><a href="#" class="fly">Sous rubrique B</a>
     <ul>
      <li><a href="#">Sous rubrique B - 1</a></li>
      <li><a href="#">Sous rubrique B - 2</a></li>
      <li><a href="#">Sous rubrique B - 3</a></li>
      <li><a href="#">Sous rubrique B - 4</a></li>
      <li><a href="#" class="fly">Sous rubrique B - 1</a>
       <ul>
        <li><a href="#">Sous rubrique B - 1 - 1</a></li>
        <li><a href="#">Sous rubrique B - 1 - 2</a></li>
        <li><a href="#">Sous rubrique B - 1 - 3</a></li>
       </ul>
      </li>
      <li><a href="#" class="fly">Sous rubrique B - 2</a>
       <ul>
        <li><a href="#">Sous rubrique B - 2 - 1</a></li>
        <li><a href="#">Sous rubrique B - 2 - 2</a></li>
       </ul>
      </li>
     </ul>
   </li>
   <li><a href="#">Sous rubrique C</a></li>
   <li><a href="#">Sous rubrique D</a></li>
   <li><a href="#">Sous rubrique E</a></li>
  </ul>
 </li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 2</span></a>

  <ul class="sub">
   <li><a href="#">Sous rubrique F</a></li>
   <li><a href="#">Sous rubrique G</a></li>
   <li><a href="#">Sous rubrique H</a></li>
   <li><a href="#">Sous rubrique I</a></li>
  </ul>
 </li>

 <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 3</span></a>

  <ul class="sub">

   <li><a href="#">Sous rubrique J</a></li>
   <li><a href="#" class="fly">Sous rubrique K</a>
    <ul>
      <li><a href="#">Sous rubrique K - 1</a></li>
     <li><a href="#">Sous rubrique K - 2</a></li>
     <li><a href="#">Sous rubrique K - 3</a></li>
     <li><a href="#">Sous rubrique K - 4</a></li>
     <li><a href="#">Sous rubrique K - 5</a></li>
     <li><a href="#">Sous rubrique K - 6</a></li>
    </ul>
   </li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
  </ul>
 </li>
 <li class="top"><a href="#" id="" class="top_link"><span class="down">Rubrique 4</span></a>
  <ul class="sub">
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
  </ul>
 </li>
 <li class="top"><a href="#" class="top_link"><span>Rubrique 5</span></a></li>
</ul>
</td>

  </tr>
 

</table>   
</div></div>


/*-------------------Fin du menu---------------------------*/




         <table cellspacing="0" cellpadding="0" border="0" align="center">
              <tr>
            <td class="cadre_top_left1" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="5" height="45" border="0" hspace="0" vspace="0"></td>
            <td class="cadre_top_left2" valign="middle" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="0" border="0" hspace="0" vspace="0"><span class="mainmenu2">&nbsp;<a href="{U_FAQ}" class="mainmenu2">{L_FAQ}</a>&nbsp; - &nbsp;<a href="{U_SEARCH}" class="mainmenu2">{L_SEARCH}</a>&nbsp; - &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu2">{L_MEMBERLIST}</a>&nbsp; - &nbsp;<a href="http://www.amarid.fr" class="mainmenu2">Site Internet</a>&nbsp;
   
            <!-- BEGIN switch_user_logged_out -->
            &nbsp;  - &nbsp;<a href="{U_REGISTER}" class="mainmenu2">{L_REGISTER}</a><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="1" border="0" hspace="0" vspace="0">
            <!-- END switch_user_logged_out -->

            <img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="5" border="0" hspace="0" vspace="0"></span></td>
            <td class="cadre_top_left3" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="29" height="45" border="0" hspace="0" vspace="0"></td>
            
<!-- BEGIN switch_user_logged_out -->

            <td class="cadre_top_center" align="center" width="100%" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="20" height="1" border="0" hspace="0" vspace="0"><span class="mainmenu">&nbsp</span></td>

            <!-- END switch_user_logged_out -->

            <!-- BEGIN switch_user_logged_in -->

            <td class="cadre_top_center" align="center" width="100%" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="20" height="1" border="0" hspace="0" vspace="0"><span class="mainmenu"><a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp; - &nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp; - &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a></span></td>
            <!-- END switch_user_logged_in -->

            <td class="cadre_top_right3" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="29" height="45" border="0" hspace="0" vspace="0"></td>
            <td class="cadre_top_right2" valign="middle" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="21" height="1" border="0" hspace="0" vspace="0"><span class="mainmenu"><a href="{U_LOGIN_LOGOUT}" class="mainmenu2">{L_LOGIN_LOGOUT}</a></span><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="9" border="0" hspace="0" vspace="0"></td>
            <td class="cadre_top_right1" nowrap="nowrap"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" width="5" height="45" border="0" hspace="0" vspace="0"></td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<div align="center">
 <iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=fr&timezone=Europe%2FParis" width="100%" height="130" frameborder="0" seamless></iframe>
</div>
<div style="text-align:center;">
<citer>Vous avez aimé ce Forum ? Partagez-le avec vos amis en cliquant sur les boutons ci-dessous </citer>
<br>
<br>
<a target="_blank" title="Twitter" href="https://twitter.com/share?url=http://www.amarid.net/; &text=Venez nous rejoindre sur ce forum http://www.amarid.net &via=AMARID" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="http://img.xooimage.com/files106/c/d/d/teste-twitter-copie-449d74b.png" alt="Twitter" /></a>

        <a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u=http://www.amarid.net&t=Venez nous rejoindre sur ce forum http://www.amarid.net" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><img src="http://img.xooimage.com/files104/1/3/f/test-facebook-copie-449d758.png" alt="Facebook" /></a>

        <a target="_blank" title="Google +" href="https://plus.google.com/share?url=http://www.amarid.net/&hl=fr" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="http://img.xooimage.com/files105/f/4/7/teste-google-copie-449d759.png" alt="Google Plus" /></a>
           </div>






peut on mettre le menu membre a droite j'ai essaye un
Code: Sélectionner - Agrandir

<div align="right"></div>

cela marche pas tu as une solution que ce menu avec connexion et s'inscrire pour les rubriques ca j'ai compris lol
merci
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 14:09    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour Kieffer,

Il rend bien ce menu sur votre forum de test. Very Happy

Alors en effet dans le bouton qui apparait à la connexion d'un membre, j'ai laissé une balise qui ne sert à rien (je vais éditer le tuto), le bouton doit être comme ceci :

Code: Sélectionner - Agrandir
 

    <!-- BEGIN switch_user_logged_in -->
    <li class="top"><a href="" id="" class="top_link"><span class="down">Menu membre</span></a>

        <ul class="sub">

            <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

            <li><a href="{U_PRIVATEMSGS}" target="_blank">{PRIVATE_MESSAGE_INFO}</a></li>

            <li><a href="{U_PROFILE}" target="_blank">Gérer votre profil</a></li>

            <li><a href="/viewonline.php" target="_blank">Qui est en ligne</a></li>
    </ul>
    </li>
    <!-- END switch_user_logged_in -->



La div
Code: Sélectionner - Agrandir
<div align="right"></div>

ne sera pas prise en compte car le css aligne tout sur la gauche ("float left").

Placez à ce moment là ce bouton en dernier sur la barre de menu afin qu'il se place à droite. Donc tout en bas du code mais avant les dernière balises :

Code: Sélectionner - Agrandir
</ul>
</td>

  </tr>
 

</table>   
</div></div>


Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 14:15    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

ok j'ai bien compris cela le place a droite mais si je veux le bouton membre complètement a droite et le reste à gauche il y a une astuce ?
pour le endif je l'avais supprimer je commence a faire des progrès ( mon prénom c'est bruno)

le target blank c'est pour ouvrir le menu sur autre page non on peut le supprimer ou cela affecte ton code
je peut rajouté a cote de membre le nom du membre connecté si oui comment

bug sur l'index il revient bien sur la page principale mais il squeeze ton menu pour gardé l'ancien pourtant cache avec les /** et **/


dans ton script il y a pas la variable u_index bon j'ai trouve
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 14:58    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Bon très rapidement (j'ai de la famille, désolé vraiment). Pour le moment ce menu est flottant...

Le target_blank peut être enlevé sans problème.

La balise
Code: Sélectionner - Agrandir

{USERNAME}
ne sera pas fonctionnel dans le bouton, par contre elle l'est dans le sous-menu.

IL faut remplacer le # du lien de l'index par
Code: Sélectionner - Agrandir

{U_INDEX}


Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Last edited by RotorMan on Sat 5 Apr 2014 - 15:14; edited 2 times in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 15:00    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

ok dsl bonne journée
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 15:02    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Non pas de désolé, c'est moi. ^_ o J'ai tout de même un oeil sur mon pc :<D
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 15:13    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

RotorMan wrote:
Re,

Bon très rapidement (j'ai de la famille, désolé vraiment). Pour le moment ce menu est flottant...

Le target_blank peut être enlevé sans problème.

La balise
Code: Sélectionner - Agrandir

{USERNAME}
ne sera pas fonctionnel dans le bouton, par contre elle l'est dans le sous-menu.

IL faut remplacer le # du lien de l'index par
Code: Sélectionner - Agrandir

{U_INDEX}


Cordialement

_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 15:24    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

re j'ai un souci mais bon vous etes tous la les dieu du code 


j'ai crée une rubrique avec des sous rubrique ( ca j'ai compris lol)
Code: Sélectionner - Agrandir

 <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Catégories</span></a>

 <ul class="sub">

  <li><a href="http://www.amarid.net/f2-assitantematernelleamarid-fr.htm">Accueil</a></li>
  <li><a href="http://www.amarid.net/f3-Assistante-Maternelle.htm">Posez vos questions</a></li>
  <li><a href="http://www.amarid.net/f95-AGENDA-AMARID.htm">Agenda AMARID</a></li>
  <li><a href="http://www.amarid.net/f11-Adherentes-Amarid.htm">Adhérentes AMARID</a></li>
  <li><a href="http://www.amarid.net/f23-Legislation.htm">Documents & législation</a></li>
  <li><a href="http://www.amarid.net/f106-MAM-Maison-d-assistantes-maternelles.htm">Maison d'assistantes maternelles</a></li>
  <li><a href="http://www.amarid.net/f5-Annonce-s.htm">Détente (cuisine, travaux manuels, etc...)</a></li>
  <li><a href="http://www.amarid.net/f40-Partenaires.htm">Partenaires</a></li> 
  <li><a href="http://www.amarid.net/f9-Dates-a-retenir.htm">Archives</a></li>


quand par ce menu j'arrive dans ma catégorie il me remet l'ancien menu 


Screenshot




il m'amene la


_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 16:02    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Tu n'as pas fermé les balises de ta catégorie, essayes comme ça :

Code: Sélectionner - Agrandir
 
    <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Catégories</span></a>

     <ul class="sub">

      <li><a href="http://www.amarid.net/f2-assitantematernelleamarid-fr.htm">Accueil</a></li>
      <li><a href="http://www.amarid.net/f3-Assistante-Maternelle.htm">Posez vos questions</a></li>
      <li><a href="http://www.amarid.net/f95-AGENDA-AMARID.htm">Agenda AMARID</a></li>
      <li><a href="http://www.amarid.net/f11-Adherentes-Amarid.htm">Adhérentes AMARID</a></li>
      <li><a href="http://www.amarid.net/f23-Legislation.htm">Documents & législation</a></li>
      <li><a href="http://www.amarid.net/f106-MAM-Maison-d-assistantes-maternelles.htm">Maison d'assistantes maternelles</a></li>
      <li><a href="http://www.amarid.net/f5-Annonce-s.htm">Détente (cuisine, travaux manuels, etc...)</a></li>
      <li><a href="http://www.amarid.net/f40-Partenaires.htm">Partenaires</a></li>
      <li><a href="http://www.amarid.net/f9-Dates-a-retenir.htm">Archives</a></li>
   </ul>
    </li>



Et mets bien ton autre menu entre les /* et */ ou sauvegarde ton Overall_Header et supprimes ton ancien menu.

D'autre part, c'est normal que cela te ramène vers le thème principal, ce sont des liens en durs.

Par contre, le mieux (en cas de changement de nom de domaine par exemple) c'est de ne pas mettre les liens complets.

Mets les comme cela :

Code: Sélectionner - Agrandir
    <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Catégories</span></a>

     <ul class="sub">

      <li><a href="/f2-assitantematernelleamarid-fr.htm">Accueil</a></li>
      <li><a href="/f3-Assistante-Maternelle.htm">Posez vos questions</a></li>
      <li><a href="/f95-AGENDA-AMARID.htm">Agenda AMARID</a></li>
      <li><a href="/f11-Adherentes-Amarid.htm">Adhérentes AMARID</a></li>
      <li><a href="/f23-Legislation.htm">Documents & législation</a></li>
      <li><a href="/f106-MAM-Maison-d-assistantes-maternelles.htm">Maison d'assistantes maternelles</a></li>
      <li><a href="/f5-Annonce-s.htm">Détente (cuisine, travaux manuels, etc...)</a></li>
      <li><a href="/f40-Partenaires.htm">Partenaires</a></li>
      <li><a href="/f9-Dates-a-retenir.htm">Archives</a></li>
   </ul>
    </li>


Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 16:10    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

pareil j'ai carrément viré l'autre menu ?

Code: Sélectionner - Agrandir

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<body>
<head>

<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="google-site-verification" content="Yz3umpFnQmwmTMyDwtJ3OdXY-2-5uWlOOaiE64dnNw0" />

{META}
{NAV_LINKS}
<title>{SITENAME} .::. {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img.xooimage.com/files58/3/a/e/mylnebuleuse-44e246c.css" type="text/css" />
<style type="text/css">
<!--
TH         { background-image: url(http://img.xooimage.com/files9/c/e/cellpic3-34638.gif) }
TD.cat      { background-image: url(http://img.xooimage.com/files9/c/e/cellpic1-3463c.gif) }
TD.rowpic   { background-image: url(http://img.xooimage.com/files/) }
TD.catHead,TD.catSides,TD.catLeft,TD.catRight,TD.catBottom { background-image: url(http://img.xooimage.com/files9/c/e/cellpic1-3463c.gif) }
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
   if ( {PRIVATE_MESSAGE_NEW_FLAG} )
   {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=300,resizable=yes,WIDTH=400');;
   }
//-->
</script>
<!-- END switch_enable_pm_popup -->

<link href="http://img.xooimage.com/files56/8/8/9/rotormanmenu-44e28cb.css" rel="stylesheet" type="text/css" />

</head>


<script type="text/javascript">
var PreloadFlag = false;
var expDays = 90;
var exp = new Date();
var tmp = '';
var tmp_counter = 0;
var tmp_open = 0;

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function SetCookie(name, value)
{
   var argv = SetCookie.arguments;
   var argc = SetCookie.arguments.length;
   var expires = (argc > 2) ? argv[2] : null;
   var path = (argc > 3) ? argv[3] : null;
   var domain = (argc > 4) ? argv[4] : null;
   var secure = (argc > 5) ? argv[5] : false;
   document.cookie = name + "=" + escape(value) +
      ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
      ((path == null) ? "" : ("; path=" + path)) +
      ((domain == null) ? "" : ("; domain=" + domain)) +
      ((secure == true) ? "; secure" : "");
}

function getCookieVal(offset)
{
   var endstr = document.cookie.indexOf(";",offset);
   if (endstr == -1)
   {
      endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie(name)
{
   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0;
   while (i < clen)
   {
      var j = i + alen;
      if (document.cookie.substring(i, j) == arg)
      {
         return getCookieVal(j);
      }
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0)
      {
         break;
      }
   }
   return null;
}

function ShowHide(id1, id2, id3)
{
   var res = expMenu(id1);
   if (id2 != '')
   {
      expMenu(id2);
   }
   if (id3 != '')
   {
      SetCookie(id3, res, exp);
   }
}

function expMenu(id)
{
   var itm = null;
   if (document.getElementById)
   {
      itm = document.getElementById(id);
   }
   else if (document.all)
   {
      itm = document.all[id];
   }
   else if (document.layers)
   {
      itm = document.layers[id];
   }
   if (!itm)
   {
      // do nothing
   }
   else if (itm.style)
   {
      if (itm.style.display == "none")
      {
         itm.style.display = "";
         return 1;
      }
      else
      {
         itm.style.display = "none";
         return 2;
      }
   }
   else
   {
      itm.visibility = "show";
      return 1;
   }
}
</script>

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
   <tr>
      <td class="bodyline">
         <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
            <td><a href="{U_INDEX}"><img src="http://img.xooimage.com/files10/3/b/b/logoameliore-1bbe6fe.png" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
            <td align="center" width="100%" valign="middle"><span class="maintitle"></span><span class="gen">{SITE_DESCRIPTION}</span>&nbsp;</td>
              </tr>
         </table>
            <br />


/*-----------------------DÉBUT DU MENU --------------------*/

<div id="menu">
   
      <div id="conta">
   
<table cellspacing="0" align="left">
  <tr>
  <td class="li.row" align="left">

<ul id="nav">


 <li class="top"><a href="{U_INDEX}" class="top_link"><span>Page Principale</span></a></li>

<li class="top"><a href="{U_FAQ}" class="top_link"><span>FAQ</span></a></li>

 <li class="top"><a href="{U_SEARCH}" class="top_link"><span>Recherche sur le Forum</span></a></li>

 <li class="top"><a href="{U_PROFILE}" class="top_link"><span>Votre Profil</span></a></li>

<li class="top"><a href="http://amarid.fr/" class="top_link"><span>Site internet</span></a></li>

/** <li class="top"><a href="#" class="top_link"><span class="down">Catégories</span></a>
  <ul class="sub">
   <li><a href="#" class="fly">Sous rubrique A </a>
     <ul>
      <li><a href="#">Sous rubrique A - 1</a></li>
      <li><a href="#">Sous rubrique A - 2</a></li>
      <li><a href="#">Sous rubrique A - 3</a></li>
     </ul>
   </li>
   <li><a href="#" class="fly">Sous rubrique B</a>
     <ul>
      <li><a href="#">Sous rubrique B - 1</a></li>
      <li><a href="#">Sous rubrique B - 2</a></li>
      <li><a href="#">Sous rubrique B - 3</a></li>
      <li><a href="#">Sous rubrique B - 4</a></li>
      <li><a href="#" class="fly">Sous rubrique B - 1</a>
       <ul>
        <li><a href="#">Sous rubrique B - 1 - 1</a></li>
        <li><a href="#">Sous rubrique B - 1 - 2</a></li>
        <li><a href="#">Sous rubrique B - 1 - 3</a></li>
       </ul>
      </li>
      <li><a href="#" class="fly">Sous rubrique B - 2</a>
       <ul>
        <li><a href="#">Sous rubrique B - 2 - 1</a></li>
        <li><a href="#">Sous rubrique B - 2 - 2</a></li>
       </ul>
      </li>
     </ul>
   </li>
   <li><a href="#">Sous rubrique C</a></li>
   <li><a href="#">Sous rubrique D</a></li>
   <li><a href="#">Sous rubrique E</a></li>
  </ul>
 </li>**/

  <li class="top"><a href="{U_INDEX}" class="top_link"><span class="down">Catégories</span></a>

     <ul class="sub">

      <li><a href="http://www.amarid.net/f2-assitantematernelleamarid-fr.htm">Accueil</a></li>
      <li><a href="http://www.amarid.net/f3-Assistante-Maternelle.htm">Posez vos questions</a></li>
      <li><a href="http://www.amarid.net/f95-AGENDA-AMARID.htm">Agenda AMARID</a></li>
      <li><a href="http://www.amarid.net/f11-Adherentes-Amarid.htm">Adhérentes AMARID</a></li>
      <li><a href="http://www.amarid.net/f23-Legislation.htm">Documents & législation</a></li>
      <li><a href="http://www.amarid.net/f106-MAM-Maison-d-assistantes-maternelles.htm">Maison d'assistantes maternelles</a></li>
      <li><a href="http://www.amarid.net/f5-Annonce-s.htm">Détente (cuisine, travaux manuels, etc...)</a></li>
      <li><a href="http://www.amarid.net/f40-Partenaires.htm">Partenaires</a></li>
      <li><a href="http://www.amarid.net/f9-Dates-a-retenir.htm">Archives</a></li>
   </ul>
    </li>

/** <li class="top"><a href="#" class="top_link"><span class="down">Rubrique 3</span></a>

  <ul class="sub">

   <li><a href="#">Sous rubrique J</a></li>
   <li><a href="#" class="fly">Sous rubrique K</a>
    <ul>
      <li><a href="#">Sous rubrique K - 1</a></li>
     <li><a href="#">Sous rubrique K - 2</a></li>
     <li><a href="#">Sous rubrique K - 3</a></li>
     <li><a href="#">Sous rubrique K - 4</a></li>
     <li><a href="#">Sous rubrique K - 5</a></li>
     <li><a href="#">Sous rubrique K - 6</a></li>
    </ul>
   </li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
   <li><a href="#">Sous rubrique L</a></li>
  </ul>
 </li>
 <li class="top"><a href="#" id="" class="top_link"><span class="down">Rubrique 4</span></a>
  <ul class="sub">
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
   <li><a href="#">Sous rubrique M</a></li>
  </ul>
 </li>**/
 


<!-- BEGIN switch_user_logged_out -->


                     <li class="top">                                     
        <a href="{U_REGISTER}" class="top_link"><span>S'inscrire</span></a></li>


                        <li class="top">
                    <a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>

<!-- END switch_user_logged_out -->


 <!-- BEGIN switch_user_logged_in -->


<li class="top"><a href="" id="" class="top_link"><span class="down">Déconnexion & Message privés</span></a>

    <ul class="sub">

        <li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>

        <li><a href="{U_PRIVATEMSGS}" target="_blank">{PRIVATE_MESSAGE_INFO}</a></li>

        /**<li><a href="{U_PROFILE}" target="_blank">Gérer votre profil</a></li>**/

        /**<li><a href="/viewonline.php" target="_blank">Qui est en ligne</a></li>**/


</ul>
</li>

<!-- END switch_user_logged_in -->


</ul>
</td>

  </tr>
 

</table>   
</div></div>


/*-------------------Fin du menu---------------------------*/




<div align="center">
 <iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=fr&timezone=Europe%2FParis" width="100%" height="130" frameborder="0" seamless></iframe>
</div>
<div style="text-align:center;">
<citer>Vous avez aimé ce Forum ? Partagez-le avec vos amis en cliquant sur les boutons ci-dessous </citer>
<br>
<br>
<a target="_blank" title="Twitter" href="https://twitter.com/share?url=http://www.amarid.net/; &text=Venez nous rejoindre sur ce forum http://www.amarid.net &via=AMARID" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="http://img.xooimage.com/files106/c/d/d/teste-twitter-copie-449d74b.png" alt="Twitter" /></a>

        <a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u=http://www.amarid.net&t=Venez nous rejoindre sur ce forum http://www.amarid.net" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><img src="http://img.xooimage.com/files104/1/3/f/test-facebook-copie-449d758.png" alt="Facebook" /></a>

        <a target="_blank" title="Google +" href="https://plus.google.com/share?url=http://www.amarid.net/&hl=fr" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="http://img.xooimage.com/files105/f/4/7/teste-google-copie-449d759.png" alt="Google Plus" /></a>
           </div>

_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sat 5 Apr 2014 - 16:24    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

re,

C'est bon. Comme je te l'ai dit plus haut, c'est normal que l'ancien menu réapparaisse.

Lorsque tu cliques sur un lien de ton nouveau menu (dans ton thème test), ce lien étant en dur, il te ramène sur le message (ou le sous-forum) du thème normal.
Donc forcément comme tu es revenu sur le thème normal, ton ancien menu toujours installé sur ton thème normal s'affiche et pas le nouveau qui est sur ton thème test.

C'est un peu chambard mon explication, mais elle devrait être claire. oO
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sat 5 Apr 2014 - 16:52    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

ok p... je suis vraiment un boulet
moi aussi j'ai du monde mais comme toi un oeil sur l'ordi
et on peut mettre le menu membre complètement a droite ?
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 03:29    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive

Display posts from previous:   
Reply to topic Page 1 of 8 Goto page: 1, 2, 3, 4, 5, 6, 7, 8  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401