It is currently Thu 29 Sep 2016 - 03:32 - 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


Joined: 21 Dec 2006
Posts: 377

PostPosted: Fri 24 Oct 2014 - 23:27    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

Re,

J'ai vu et c'est un très bon travail. Jolie menu, bravo ! Smile

Bonne nuit Smile
Following members like this message:
kieffer (24/10/14)
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: Sun 26 Oct 2014 - 18:22    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonsoir
encore moi je voudrais rajouté un image sur les sous menu dans mon sous menu partenaires j'y est mit le lein direct vers le site la tout va bien j'ai pour mes test rajouté une petite image style le logo du site mais cette image ce trouve décalée vers le haut et non alignée avec le nom y à t il une astuce su oui laquelle
je sais je suis un vrai boulet
_______________________
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: 377
Niveau:
Point(s): 358
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: Sun 26 Oct 2014 - 19:13    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

Rassurez vous ce n'est pas difficile.

Nous allons prendre une partie de votre menu pour exemple de mise en place :


Code: Sélectionner - Agrandir




<li class="top"><a href="index.php" class="top_link"><span class="down">Adhérentes</span></a>
<ul class="sub">
<li><a href="/f37-Questions-diverses.htm"> Adhérentes posez vos questions</a></li>
<li><a href="/t862-Renouvellement-adh-sion-AMARID.htm"> Renouvellement d'adhésion</a></li>
<li><a href="/t87-Votre-Nomenclature-de-classeur.htm"> Nomenclature du classeur</a></li>







Pour l'image, nous allons prendre votre logo réduit à 15 pixels de hauteur sur 15 px de largeur :



Puis nous allons la placer dans ce morceau de code de votre menu :

Code: Sélectionner - Agrandir





 <li class="top"><a href="index.php" class="top_link"><span class="down">Adhérentes</span></a>
<ul class="sub">
<li><a href="/f37-Questions-diverses.htm"><img src="http://img110.xooimage.com/files/3/6/0/logo-30ans-4-45398fc-4846e7a.png"> Adhérentes posez vos questions</a></li>
<li><a href="/t862-Renouvellement-adh-sion-AMARID.htm"><img src="http://img110.xooimage.com/files/3/6/0/logo-30ans-4-45398fc-4846e7a.png"> Renouvellement d'adhésion</a></li>
<li><a href="/t87-Votre-Nomenclature-de-classeur.htm"><img src="http://img110.xooimage.com/files/3/6/0/logo-30ans-4-45398fc-4846e7a.png"> Nomenclature du classeur</a></li>





Vous remarquerez, que l'image est placée juste après la balise "<a href"lien"> et celle qui la ferme "/a" avec un espace juste après le lien de l'image et le nom du sous-menu :




Ce qui donne sur le forum - toujours pour exemple - ceci :





Nous remarquons que notre image est bien alignée devant le nom des sous-menus.

Il faut donc procéder ainsi à chaque sous-menu où nous voulons des images.

Pour rappel : il sera plus adéquat de mettre des petites images en 15 px de hauteur sur 15 px de largeur. 16 px ou 17 px pour la hauteur et la largeur cela passe aussi.

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.
Following members like this message:
kieffer (26/10/14)


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: Sun 26 Oct 2014 - 19:28    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

re
tu est un dieu c'est l'histoire de l'espace que j'avais loupe on avance de plus en plus vers un menu parametrable de A à Z

oups j'ai été trop vite regarde decalage vers le haut

j'arrête l'alcool moi je graphiste amateur j'ai loupe les pixel du bas de mon logo Mad Mad Bannir
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites

Following members like this message:
RotorMan (26/10/14)


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: Wed 29 Oct 2014 - 21:59    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonsoir
toujours moi est t il possible de mettre ce genre d'image pour le fond du menu

j'ai essaye un:
Code: Sélectionner - Agrandir
background:url=("href et le suite de mon image");position:relative;margin:auto;padding:auto;width:100%;height:40px;color:#fff;font-size:18px;}
cela ne fonctionne pas
merci de ta réponse
_______________________
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: 377
Niveau:
Point(s): 358
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: Thu 30 Oct 2014 - 13:00    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,


Pas compliqué et tout à fait possible. Wink

Dans rotormanmenu.css, chercher ceci :

Code: Sélectionner - Agrandir

 #menu {background:#01B0F0;background:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.4)}


Le neutraliser pour ne pas le perdre au cas où, comme ceci :


Code: Sélectionner - Agrandir

/*****************************************
#menu {background:#01B0F0;background:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.4)}
******************************************/ 


Juste après, ajouter ceci :

Code: Sélectionner - Agrandir

 #menu {background:#000066 url("http://img.xooimage.com/files110/8/8/d/capture-d-cran-20...16.27.38-4853c18.png") repeat-x; position:relative;margin:auto;padding:auto;width:100%;height:40px;color:#fff;font-size:18px;}


Cela donne cela  :





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: Thu 30 Oct 2014 - 21:31    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

c'est ok pour moi

bo a force de triturer ce menu dans mon css je trouve pas la taille des boutons (je pense 300-35) je voudrais pouvoir y mettre un bouton carré comme celui la





Je comprend pas regarde le résultat



la il devrait y avoir la fleche



de plus sur la gauche des boutons je n'est pas le cadre ?

Mon CSS

Code: Sélectionner - Agrandir

/******************************************/
/******** BARRE MENU ROTORMAN ************/
/****************2014*********************/
/*****************************************/

/*------Container qui permet de placer les boutons sur la barre
---------------------------------------------------------------*/

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

/*--Barre dégradé fond bleu
---------------------------*/

/**************
#menu {background:#191919;background:-moz-linear-gradient(top,#191919 0%,#ffffff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#191919),color-stop(100%,#ffffff));background:-webkit-linear-gradient(top,#191919 0%,#ffffff 100%);background:-o-linear-gradient(top,#191919 0%,#ffffff 100%);background:-ms-linear-gradient(top,#191919 0%,#ffffff 100%);background:linear-gradient(to bottom,#191919 0%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#191919',endColorstr='#ffffff',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.0)}
************/

 #menu {background:#000066 url("http://img.xooimage.com/files110/8/8/d/capture-d-cran-20...16.27.38-4853c18.png") repeat-x; position:relative;margin:auto;padding:auto;width:100%;height:40px;color:#fff;font-size:18px;}

/*----Composition du menu sur la barre
--------------------------------------*/

#nav {padding:0; margin:0; list-style:none; height:38px;position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

/*-- Position des boutons sur la barre des menu --*/

#nav li.top {display:block; float:left; height:38px;} 

/*-- Couleur, taille, police des boutons --*/ 
                     
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#fff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

/*-- Position de l'ensemble --*/

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px;}
 
/*-- Images des boutons qui apparaissent au passage de la sourie --*/   
                           
#nav li:hover a.top_link {color:#000000; background: url(http://img110.xooimage.com/files/a/c/9/test2-avec-fleche-485a8c3.png)) no-repeat;}
#nav li:hover a.top_link span {background:url(http://img110.xooimage.com/files/d/7/f/test2-485a8b3.png) no-repeat right top;} 
#nav li:hover a.top_link span.down {http://img110.xooimage.com/files/a/c/9/test2-avec-fleche-485a8c3.png) no-repeat right top;}

/*-- Position des fenêtres qui affichent les sous-menus -- Ne pas toucher --*/

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #E8EAEC; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:300px; height:auto; z-index:350;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:300px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:300px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #E8EAEC;}

#nav li ul.sub li a.fly
{background:#E8EAEC url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat;}

#nav li:hover ul.sub li a:hover
{background:#D0D5E4; color:#000; border-color:#fff;}

#nav li:hover ul.sub li a.fly:hover
{background:#D0D5E4 url(http://img.xooimage.com/files5/a/0/4/arrow_over-f69528.gif) 290px 6px no-repeat; color:#000;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:300px; top:-4px; background: #E8EAEC; padding:3px; border:1px solid #000; white-space:nowrap; width:300px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#00E6FF url(http://img.xooimage.com/files5/a/0/4/arrow_over-f69528.gif) 290px 6px no-repeat; color:#000; border-color:#;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#E8EAEC url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat; color:#000; border-color:#;}


editer le 31 noctobre
_______________________
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: 377
Niveau:
Point(s): 358
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 31 Oct 2014 - 18:52    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

Il y a une petite erreur dans le code.

Remplace ceci :

Code: Sélectionner - Agrandir


 #nav li:hover a.top_link {color:#000000; background:  url(http://img110.xooimage.com/files/a/c/9/test2-avec-fleche-485a8c3.png))  no-repeat;} 
#nav li:hover a.top_link span {background:url(http://img110.xooimage.com/files/d/7/f/test2-485a8b3.png) no-repeat right top;}   
#nav li:hover a.top_link span.down {http://img110.xooimage.com/files/a/c/9/test2-avec-fleche-485a8c3.png) no-repeat right top;} 



par cela :

Code: Sélectionner - Agrandir


 #nav li:hover a.top_link {color:#000; background: url(http://img.xooimage.com/files110/a/c/9/test2-avec-fleche-485a8c3.png) no-repeat;}
#nav li:hover a.top_link span {background:url(http://img.xooimage.com/files110/d/7/f/test2-485a8b3.png) no-repeat right top;}  
#nav li:hover a.top_link span.down {background:url(http://img.xooimage.com/files110/a/c/9/test2-avec-fleche-485a8c3.png) no-repeat right top;}



Tu remarqueras que les boutons s'adaptent à la largeur des titres et s'affichent en entier. Cette capture vient de mon thème test.





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: Fri 31 Oct 2014 - 22:50    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

merci pour la correction cela marche bien sauf pour deux menu partenaires et contact je comprend pas ces deux menus pointent sur un site extérieur xooit c'est peut etre pour cela tu peut me confirmer (c'est pas trop grave lol)
_______________________
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: 377
Niveau:
Point(s): 358
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 1 Nov 2014 - 14:12    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

J'ai regardé ton menu, tous ses onglets s'affichent très bien, tous les boutons aussi.
Tous les liens du menu "Partenaires" et "Contacts" sont bien actifs et redirigent bien aux pages visées.

Je n'ai pas relevé de problème. Smile Jolie menu soit dit en passant.

Bon week-end
_______________________
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 1 Nov 2014 - 21:56    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

je parle des fleches lol sur les deux menus cités elle n'apparaissent pas mais pas grave

merci pour le compliment tout fait maison sur le site et forum
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



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 15 Nov 2014 - 09:48    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

tous roule est il possible d'avoir la fonction responsive dans ce menu
_______________________
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: 377
Niveau:
Point(s): 358
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: Mon 17 Nov 2014 - 00:42    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonsoir,

Je n'avais pas vu ta requête car malheureusement, et en ce moment, je suis très occupé (il faudrait des journées de 30 heures minimum). Je reviendrai vers toi dès que possible.

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: Mon 17 Nov 2014 - 00:55    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

RotorMan wrote:
Bonsoir,

Je n'avais pas vu ta requête car malheureusement, et en ce moment, je suis très occupé (il faudrait des journées de 30 heures minimum). Je reviendrai vers toi dès que possible.

Cordialement


je sais bonne programmation
_______________________
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: 377
Niveau:
Point(s): 358
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: Mon 17 Nov 2014 - 18:15    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

Bon ayant terminé le mien sur mon forum et l'ayant mis en place, je peux le partager :

C'est un menu responsive, compatible toutes résolutions d'écrans PC, tablettes et mobiles et tous navigateurs.

Il est parfaitement fonctionnel avec le menu de ce tuto, ils ne rentrent pas en conflit !


Exemple, il est installé  ICI


Vues sur un écran PC :











Vues lorsque le navigateur est rétréci dans sa largeur ou avec une tablette ou un mobile :










Installation :

Sauvegarder votre Overall_header avant tout !

Ouvrir Overall_header.tpl, juste avant </head>, placer (ou remplacer les liens du menu style dropdown de ce tuto) :

Code: Sélectionner - Agrandir




<link href="http://img110.xooimage.com/files/5/9/9/style-responsive-rotor-48a0bab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://img.xooimage.com/files110/e/1/6/script-489ebcb.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>






Puis soit reprendre le code html du menu style dropdown en changeant les "class", soit le reconstruire de la manière suivante :
Pour vous aiguiller, j'ai utiliser une partie du menu de mon forum :

 
Code: Sélectionner - Agrandir




<div id='cssmenu'>
<ul>
   <li><a href='/index.php'><span>Index</span></a></li>
   <li class='has-sub'><a href='LIEN><span>Forums</span></a>
      <ul>
         <li class='has-sub'><a href='LIEN'><span>Accueille, écoute</span></a>
            <ul>
               <li><a href='LIEN'><span>Charte</span></a></li>
               <li class='last'><a href='LIEN'><span>Vos suggestions</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='LIEN'><span>Informatique-Multimédia</span></a>
            <ul>
               <li><a href='LIEN'><span>Tutoriels logiciels</span></a></li>
               <li class='last'><a href='LIEN'><span>Protection des PC sur le net</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   
/*** Ajout si vous le désirez d'un bouton sans sous-menu **/
   <li class='last'><a href='LIEN'><span>Contact</span></a></li>
</ul>
</div>





La class "has sub" rend le "bouton" prioritaire. Placé en premier, le bouton sera sur la barre.
Avec "ul" placé juste derrière, les liens en "li" seront ses sous-menus. Pour fermer un bouton qui a des sous-menu (ou pas), il suffit de mettre la class "last".

Vous pouvez mettre autant de boutons - avec ou sans sous-menu - que vous le désirez.
Il suffit simplement de bien suivre l'ordre des "class" donné dans le code ci-dessus.

Si vous rajoutez :

Code: Sélectionner - Agrandir



<div id="container">




tout au début du code html et

Code: Sélectionner - Agrandir



</div>




tout à la fin, vous aurez la bande bleu sur toute la largeur du forum (optionnel, j'ai inclus la class dans le css).

Plus simple à créer que le style dropdown.

Bien entendu, il est personnalisable. Des indications sont placées dans le css pour vous aider à le personnaliser à votre guise.

Complément :  Si vous gardez votre menu style dropdown, enlevez toutes les class. Seules les class "has sub" et "last" sont utilisées dans le menu responsive.
N'hésitez pas à parcourir le tuto principal qui est applicable sur celui-ci.


INFO :
Je ne l'ai pas créé comme le style dropdown du topic de ce fil !
J'ai utilisé le fichier source en zip offert gratuitement par cssmenumaker que j'ai repris en long, en large et en travers (style, couleurs, fenêtre du drop-down, etc..) pour l'adapter à mon forum (compatible tous thèmes sur xooit). Bref, j'ai mis les mains dans le cambouis.
Pour la modération : ce n'est pas de la pub, j'ai juste cité ma source. Normal !


Merci de m'avoir lu.
Cordialement

Edit: complément d'info et quelques fautes d'orthographes.
_______________________
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 Tue 18 Nov 2014 - 00:41; 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: Mon 17 Nov 2014 - 20:28    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

kikoo

je resume les li class='has-sub' replace le li=class top"
les li class='last' ferme le sous menu ?

si tu a plus de deux sous menu tu fait comment ? je seche
_______________________
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:32    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive

Display posts from previous:   
Reply to topic Page 6 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