La date/heure actuelle est Ven 20 Oct 2017 - 21:52 - créer un forum

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

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8  >

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


Inscrit le: 21 Déc 2006
Messages: 858

MessagePosté le: Ven 24 Oct 2014 - 23:27    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

PublicitéSupprimer les publicités ?
Revue du message précédent :

Re,

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

Bonne nuit Smile
Les membres suivants remercient RotorMan pour ce message :
kieffer (24/10/14)
Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 26 Oct 2014 - 18:22    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 26 Oct 2014 - 19:13    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
Aucune 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.
Discord - Twitter
Les membres suivants remercient RotorMan pour ce message :
kieffer (26/10/14)


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 26 Oct 2014 - 19:28    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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

Les membres suivants remercient kieffer pour ce message :
RotorMan (26/10/14)


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Mer 29 Oct 2014 - 21:59    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Jeu 30 Oct 2014 - 13:00    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
Aucune 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.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Jeu 30 Oct 2014 - 21:31    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Ven 31 Oct 2014 - 18:52    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
Aucune 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.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Ven 31 Oct 2014 - 22:50    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Sam 1 Nov 2014 - 14:12    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
Aucune 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.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Sam 1 Nov 2014 - 21:56    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Sam 15 Nov 2014 - 09:48    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Lun 17 Nov 2014 - 00:42    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
Aucune 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.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Lun 17 Nov 2014 - 00:55    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

RotorMan a écrit:
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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 858
Niveau:
Point(s): 856
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Lun 17 Nov 2014 - 18:15    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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.
_______________________
Aucune 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.
Discord - Twitter


Dernière édition par RotorMan le Mar 18 Nov 2014 - 00:41; édité 2 fois
Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Lun 17 Nov 2014 - 20:28    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 21:52    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive

Montrer les messages depuis:   
Répondre au sujet Page 6 sur 8 Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401