Menu déroulant en css
Résolu
drogba7213
Messages postés
1524
Date d'inscription
Statut
Membre
Dernière intervention
-
KorriganVehuiah Messages postés 171 Date d'inscription Statut Membre Dernière intervention -
KorriganVehuiah Messages postés 171 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila comme le titre l'indique je vous solicite pour avoir de l'aide pour faire un menu en css.
Hélas je suis pas très doué en menu et surtout en graphique css
j'ai regardé sur le net et j'ai pas trouvé ce que je voudrais.
J'ai pour le moment fait quelque chose mais c'est vraiment très moche admirez par vous meme
[url=https://www.casimages.com/i/090309040854932591.png.html][img]http://nsa06.casimages.com/img/2009/03/09/mini_090309040854932591.png[/img][/url]
par contre, en surfant je suis tombé sur un site et je suis tombé amoureux de leur menu déroulant et je voudrais savoir si quelqu'un saurais en faire un comme ca et si ce serai compliqué a reproduire? svp
https://www.noizikidz.com/
ou
https://www.squawalpine.com/
merci d'avance
Voila comme le titre l'indique je vous solicite pour avoir de l'aide pour faire un menu en css.
Hélas je suis pas très doué en menu et surtout en graphique css
j'ai regardé sur le net et j'ai pas trouvé ce que je voudrais.
J'ai pour le moment fait quelque chose mais c'est vraiment très moche admirez par vous meme
[url=https://www.casimages.com/i/090309040854932591.png.html][img]http://nsa06.casimages.com/img/2009/03/09/mini_090309040854932591.png[/img][/url]
par contre, en surfant je suis tombé sur un site et je suis tombé amoureux de leur menu déroulant et je voudrais savoir si quelqu'un saurais en faire un comme ca et si ce serai compliqué a reproduire? svp
https://www.noizikidz.com/
ou
https://www.squawalpine.com/
merci d'avance
A voir également:
- Menu déroulant en css
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Word
- Canon quick menu - Télécharger - Utilitaires
17 réponses
Ils ne sont pas forcément en JS... il y a tout à fait moyen de gérer ça en CSS !
Il y a tout un tutoriel pas mal foutu sur les Menus en pur xHTML/CSS sur Alsacréations.
Si tu optes pour le JavaScript, attention : ton menu doit être naturellement ouvert, et le JS ne doit servir qu'à le refermer, sinon un utilisateur sans javascript ne pourra pas naviguer dans ton site !
Il y a tout un tutoriel pas mal foutu sur les Menus en pur xHTML/CSS sur Alsacréations.
Si tu optes pour le JavaScript, attention : ton menu doit être naturellement ouvert, et le JS ne doit servir qu'à le refermer, sinon un utilisateur sans javascript ne pourra pas naviguer dans ton site !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Il me semblerait bien que le menu de son premier lien, http://www.noizikidz.com, soit full CSS.
Sinon il y a plein d'exemples de chouettes menus CSS sur AlsaCreations
Sinon il y a plein d'exemples de chouettes menus CSS sur AlsaCreations
merci pour toute vos réponses quelq'un pourrait me donné des liens pour des exemple de menu sacahnt que je souhaite qu'il soit horizontal et qu'il s'ouvre au passage de la souris.
Sinon une autre requete quelqu'un aurait le courage de me faire une ébauche du premier lien lol?
Sinon une autre requete quelqu'un aurait le courage de me faire une ébauche du premier lien lol?
"Merci pour toute vos réponses quelq'un pourrait me donné des liens pour des exemple de menu sacahnt que je souhaite qu'il soit horizontal et qu'il s'ouvre au passage de la souris."
Parfois, taper sa requête dans Google prend moins de temps que sur CÇC... Dans ton cas, taper "menu déroulant horizontal CSS" t'aurait donné accès à ceci : https://www.google.be/search?rlz=1C1GGLS_frBE306BE309&aq=f&sourceid=chrome&ie=UTF-8&q=menu+d&gws_rd=ssléroulant+horizontal+CSS
"Sinon une autre requete quelqu'un aurait le courage de me faire une ébauche du premier lien lol?"
Non. Désolé. Si on commence comme ça on va finir par faire ton code en entier... Accède au code source. Copie le code du menu. Modifies-le. Accède au code CSS. Copie ce dont tu as besoin. Modifies-le. Teste ta page. Essaye de comprendre les éventuels bugs. Si vraiment tu ne t'en sors pas, viens nous retrouver avec une question précise.
En terme clairs :
Question : "Pourriez-vous m'expliquer ... ?" - Réponse : "Oui, volontiers".
Question : "Pourriez-vous me renseigner ... ?" - Réponse : "Oui, bien sur !".
Question : "Pourriez-vous me faire... ?" - Réponse : "Non, sauf si tu paies bien".
Parfois, taper sa requête dans Google prend moins de temps que sur CÇC... Dans ton cas, taper "menu déroulant horizontal CSS" t'aurait donné accès à ceci : https://www.google.be/search?rlz=1C1GGLS_frBE306BE309&aq=f&sourceid=chrome&ie=UTF-8&q=menu+d&gws_rd=ssléroulant+horizontal+CSS
"Sinon une autre requete quelqu'un aurait le courage de me faire une ébauche du premier lien lol?"
Non. Désolé. Si on commence comme ça on va finir par faire ton code en entier... Accède au code source. Copie le code du menu. Modifies-le. Accède au code CSS. Copie ce dont tu as besoin. Modifies-le. Teste ta page. Essaye de comprendre les éventuels bugs. Si vraiment tu ne t'en sors pas, viens nous retrouver avec une question précise.
En terme clairs :
Question : "Pourriez-vous m'expliquer ... ?" - Réponse : "Oui, volontiers".
Question : "Pourriez-vous me renseigner ... ?" - Réponse : "Oui, bien sur !".
Question : "Pourriez-vous me faire... ?" - Réponse : "Non, sauf si tu paies bien".
ok alors je reformule si on regarde bien mon premier post on voit que je ne suis pas comme tu dit c'est à dire pouvez vous me faire ceci svp moi je fait rien.
Moi je pense déja avoir fait une base après je manque de technique et donc je demande si quelqu'un peut m'expliquer comment faire pour avoir le résultat que je souhaite
https://www.noizikidz.com/
alors merci pour ta réponse mais je ne la trouve pas approprié pour moi.
enfin j'ai effectivment fait des rechercheds sur google et vu que je n'ai pas trouvé ce que je voulais je vien chercher de l'aide ici!
Enfin trouver le source css n'est pas facile a copier surtout quand il est a part du code html et oui...
Moi je pense déja avoir fait une base après je manque de technique et donc je demande si quelqu'un peut m'expliquer comment faire pour avoir le résultat que je souhaite
https://www.noizikidz.com/
alors merci pour ta réponse mais je ne la trouve pas approprié pour moi.
enfin j'ai effectivment fait des rechercheds sur google et vu que je n'ai pas trouvé ce que je voulais je vien chercher de l'aide ici!
Enfin trouver le source css n'est pas facile a copier surtout quand il est a part du code html et oui...
"Sinon une autre requete quelqu'un aurait le courage de me faire une ébauche du premier lien lol?"
Réponse : non.
"et donc je demande si quelqu'un peut m'expliquer comment faire pour avoir le résultat que je souhaite"
Réponse : Oui, avec plaisir ;)
Pour commencer, il est très simple de récupérer un code CSS. D'abord, il faut accéder au code source (HTML) de la page. La plupart des navigateurs utilisent le raccourci Ctrl+U. L'adresse du code CSS se trouve dans le header. Ici, en l'occurence, cela donne :
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
Il s'agit d'un lien relatif, ce qui signifie qu'il suffit de l'ajouter à la suite de l'adresse courante. Donc http://www.noizikidz.com/css/styles.css (pour info, google chrome permet de suivre directement les liens dans le code. Pratique ^^).
Ensuite, extraire le code source HTML du menu. Je ne vais pas le retaper ici, il est méga long. En gros, il utilise une structure avec une liste non-numérotée pour le premier niveau de menu, et une autre liste du même type dans chaque élément de la liste, pour les sous-menus. En gros, ça nous donne, en résumé :
<ul>
<li>Titre de l'élément 1
<ul>
<li>Titre du sous élément 1</li>
<li>Titre du sous élément 2</li>
etc.
</ul>
</li>
<li>Titre de l'élément 2
<ul>
<li>Titre du sous élément 1</li>
<li>Titre du sous élément 2</li>
etc.
</ul>
</li>
etc.
</ul>
Je te livre le code CSS brut pour que tu puisses l'analyser à l'aise :
#menu{
width:960px;
height:90px;
background:url(../images/bg_menu.jpg) no-repeat left top;
position:relative;
z-index:5}
#menu ul{
list-style:none
}
#menu ul.main{
margin-top:23px;
padding-left:18px;
position:relative}
#menu ul.main, #menu ul.main li.menu_item, #menu ul.main li.menu_item a.main{
float:left;
display:block
}
#menu ul.main li.menu_item a.main
{cursor:pointer;
text-indent:-9000px;
height:44px;
position:relative;
margin-left:-11px;
}
#menu ul.main li.menu_item:hover a.main{
background-position:left -44px;
}
#menu ul.main li.menu_item a.menu1{
background:url(../images/menu_percu.png) no-repeat left top;
width:104px;
z-index:8;
margin-left:0;
}
#menu ul.main li.menu_item a.menu2{
background:url(../images/menu_guitare.png) no-repeat left top;
width:143px;
z-index:7;
}
#menu ul.main li.menu_item a.menu3{
background:url(../images/menu_claviers.png) no-repeat left top;
width:77px;
z-index:6;
}
#menu ul.main li.menu_item a.menu4{
background:url(../images/menu_flute.png) no-repeat left top;
width:118px;
z-index:5;
}
#menu ul.main li.menu_item a.menu5{
background:url(../images/menu_insolite.png) no-repeat left top;
width:162px;
z-index:4;
}
#menu ul.main li.menu_item a.menu6{
background:url(../images/menu_toys.png) no-repeat left top;
width:91px;
z-index:3;
margin-left:-15px;
}
#menu ul.main li.menu_item a.menu7{
background:url(../images/menu_chant.png) no-repeat left top;
width:118px;
z-index:2;
margin-left:-11px;
}
#menu ul.main li.menu_item a.menu8{
background:url(../images/menu_multimedia.png) no-repeat left top;
width:101px;
z-index:1;
margin-left:-15px;
}
Il a attribué ses id et ses class de manière assez logique : menu principal (main) élément de menu (menu_item),...
Les images se situent à l'adresse http://www.noizikidz.com/images/[nom_du_fichier].png
Quand tu auras jeté un oeil au fonctionnement de ce code, n'hésite pas à poser tes questions ;)
Bonne chance !
Réponse : non.
"et donc je demande si quelqu'un peut m'expliquer comment faire pour avoir le résultat que je souhaite"
Réponse : Oui, avec plaisir ;)
Pour commencer, il est très simple de récupérer un code CSS. D'abord, il faut accéder au code source (HTML) de la page. La plupart des navigateurs utilisent le raccourci Ctrl+U. L'adresse du code CSS se trouve dans le header. Ici, en l'occurence, cela donne :
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
Il s'agit d'un lien relatif, ce qui signifie qu'il suffit de l'ajouter à la suite de l'adresse courante. Donc http://www.noizikidz.com/css/styles.css (pour info, google chrome permet de suivre directement les liens dans le code. Pratique ^^).
Ensuite, extraire le code source HTML du menu. Je ne vais pas le retaper ici, il est méga long. En gros, il utilise une structure avec une liste non-numérotée pour le premier niveau de menu, et une autre liste du même type dans chaque élément de la liste, pour les sous-menus. En gros, ça nous donne, en résumé :
<ul>
<li>Titre de l'élément 1
<ul>
<li>Titre du sous élément 1</li>
<li>Titre du sous élément 2</li>
etc.
</ul>
</li>
<li>Titre de l'élément 2
<ul>
<li>Titre du sous élément 1</li>
<li>Titre du sous élément 2</li>
etc.
</ul>
</li>
etc.
</ul>
Je te livre le code CSS brut pour que tu puisses l'analyser à l'aise :
#menu{
width:960px;
height:90px;
background:url(../images/bg_menu.jpg) no-repeat left top;
position:relative;
z-index:5}
#menu ul{
list-style:none
}
#menu ul.main{
margin-top:23px;
padding-left:18px;
position:relative}
#menu ul.main, #menu ul.main li.menu_item, #menu ul.main li.menu_item a.main{
float:left;
display:block
}
#menu ul.main li.menu_item a.main
{cursor:pointer;
text-indent:-9000px;
height:44px;
position:relative;
margin-left:-11px;
}
#menu ul.main li.menu_item:hover a.main{
background-position:left -44px;
}
#menu ul.main li.menu_item a.menu1{
background:url(../images/menu_percu.png) no-repeat left top;
width:104px;
z-index:8;
margin-left:0;
}
#menu ul.main li.menu_item a.menu2{
background:url(../images/menu_guitare.png) no-repeat left top;
width:143px;
z-index:7;
}
#menu ul.main li.menu_item a.menu3{
background:url(../images/menu_claviers.png) no-repeat left top;
width:77px;
z-index:6;
}
#menu ul.main li.menu_item a.menu4{
background:url(../images/menu_flute.png) no-repeat left top;
width:118px;
z-index:5;
}
#menu ul.main li.menu_item a.menu5{
background:url(../images/menu_insolite.png) no-repeat left top;
width:162px;
z-index:4;
}
#menu ul.main li.menu_item a.menu6{
background:url(../images/menu_toys.png) no-repeat left top;
width:91px;
z-index:3;
margin-left:-15px;
}
#menu ul.main li.menu_item a.menu7{
background:url(../images/menu_chant.png) no-repeat left top;
width:118px;
z-index:2;
margin-left:-11px;
}
#menu ul.main li.menu_item a.menu8{
background:url(../images/menu_multimedia.png) no-repeat left top;
width:101px;
z-index:1;
margin-left:-15px;
}
Il a attribué ses id et ses class de manière assez logique : menu principal (main) élément de menu (menu_item),...
Les images se situent à l'adresse http://www.noizikidz.com/images/[nom_du_fichier].png
Quand tu auras jeté un oeil au fonctionnement de ce code, n'hésite pas à poser tes questions ;)
Bonne chance !
voila alors j'ai suivit tes conseils mais ca ne me donne pas le résultats escompté
regarde :
[url=https://www.casimages.com/i/090311033117567631.png.html][img]http://nsa06.casimages.com/img/2009/03/11/mini_090311033117567631.png[/img][/url]
si tu veut le code html sachant que pour le moment les images je les retraivaillerais après
tien voila le html
soit indulgent je débute
regarde :
[url=https://www.casimages.com/i/090311033117567631.png.html][img]http://nsa06.casimages.com/img/2009/03/11/mini_090311033117567631.png[/img][/url]
si tu veut le code html sachant que pour le moment les images je les retraivaillerais après
tien voila le html
<div id="menu">
<ul class="main">
<li class="menu_item menu1"><a href="/instruments-de-musique-enfants/percussions/5" class="main menu1"><span id="span0">Percussions</span></a>
<ul class="sousmenu" id="sousm0">
<li><a href="/instruments-de-musique-enfants/percussions/percussions-bebe/38">Percussions bébé</a></li>
<li><a href="/instruments-de-musique-enfants/percussions/petites-percussions/17">Petites percussions</a></li>
<li><a href="/instruments-de-musique-enfants/percussions/grandes-percussions/18">Grandes percussions</a></li>
<li><a href="/instruments-de-musique-enfants/percussions/ensembles-percussions/19">Ensembles percussions</a></li>
<li><a href="/instruments-de-musique-enfants/percussions/batteries-et-accessoires/20">Batteries et accessoires</a></li>
</ul>
</li>
<li class="menu_item menu2"><a href="/instruments-de-musique-enfants/guitares-et-cordes/1" class="main menu2"><span id="span1">Guitares & Cordes</span></a>
<ul class="sousmenu" id="sousm1">
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/guitares-en-jouet/53">Guitares en jouet</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/guitares-acoustiques/2">Guitares acoustiques</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/guitares-electriques/3">Guitares électriques</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/basses-electriques/39">Basses électriques</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/ukuleles/13">Ukulélés</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/amplis/11">Amplis</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/accessoires/50">Accessoires</a></li>
<li><a href="/instruments-de-musique-enfants/guitares-et-cordes/multimedia-guitare/52">Multimédia Guitare</a></li>
</ul>
</li>
<li class="menu_item menu3"><a href="/instruments-de-musique-enfants/claviers/6" class="main menu3"><span id="span2">Claviers</span></a>
<ul class="sousmenu" id="sousm2">
<li><a href="/instruments-de-musique-enfants/claviers/pianos-en-jouet/21">Pianos en jouet</a></li>
<li><a href="/instruments-de-musique-enfants/claviers/accordeons-en-jouet/22">Accordéons en jouet</a></li>
<li><a href="/instruments-de-musique-enfants/claviers/xylophones/23">Xylophones</a></li>
<li><a href="/instruments-de-musique-enfants/claviers/kalimba/37">Kalimba</a></li>
<li><a href="/instruments-de-musique-enfants/claviers/multimedia-clavier/55">Multimedia Clavier</a></li>
</ul>
</li>
<li class="menu_item menu4"><a href="/instruments-de-musique-enfants/flutes-et-vents/7" class="main menu4"><span id="span3">Flûtes & Vents</span></a>
<ul class="sousmenu" id="sousm3">
<li><a href="/instruments-de-musique-enfants/flutes-et-vents/flutes-et-sifflets/27">Flûtes et sifflets</a></li>
<li><a href="/instruments-de-musique-enfants/flutes-et-vents/harmonicas/29">Harmonicas</a></li>
<li><a href="/instruments-de-musique-enfants/flutes-et-vents/autres-vents/30">Autres vents</a></li>
</ul>
</li>
<li class="menu_item menu5"><a href="/instruments-de-musique-enfants/instruments-insolites/8" class="main menu5"><span id="span4">Instruments insolites</span></a>
<ul class="sousmenu" id="sousm4">
<li><a href="/instruments-de-musique-enfants/instruments-insolites/pour-le-bain-et-a-bulles/32">Pour le bain et à bulles</a></li>
<li><a href="/instruments-de-musique-enfants/instruments-insolites/a-fabriquer-soi-meme/33">A fabriquer soi-même</a></li>
</ul>
</li>
<li class="menu_item menu6"><a href="/instruments-de-musique-enfants/noiziToyz/9" class="main menu6"><span id="span5">NoïziToyz</span></a>
<ul class="sousmenu" id="sousm5">
<li><a href="/instruments-de-musique-enfants/noiziToyz/bidules-a-sons/34">Bidules à sons</a></li>
<li><a href="/instruments-de-musique-enfants/noiziToyz/boites-a-musique/35">Boîtes à musique</a></li>
</ul>
</li>
<li class="menu_item menu7"><a href="/instruments-de-musique-enfants/chant-voix/40" class="main menu7"><span id="span6">Chant & Voix</span></a>
<ul class="sousmenu" id="sousm6">
<li><a href="/instruments-de-musique-enfants/chant-voix/micros/48">Micros</a></li>
<li><a href="/instruments-de-musique-enfants/chant-voix/amplification/45">Amplification</a></li>
<li><a href="/instruments-de-musique-enfants/chant-voix/accessoires/46">Accessoires</a></li>
<li><a href="/instruments-de-musique-enfants/chant-voix/karaoke/49">Karaoké</a></li>
</ul>
</li>
<li class="menu_item menu8"><a href="/instruments-de-musique-enfants/multimedia/41" class="main menu8"><span id="span7">Multimédia</span></a>
<ul class="sousmenu" id="sousm7">
<li><a href="/instruments-de-musique-enfants/multimedia/livres-cd/42">Livres-CD</a></li>
<li><a href="/instruments-de-musique-enfants/multimedia/dvd-logiciels/43">DVD-Logiciels</a></li>
<li><a href="/instruments-de-musique-enfants/multimedia/mao-midi/44">MAO-MIDI</a></li>
</ul>
</li>
</ul>
</div>
soit indulgent je débute
Effectivement, j'ai oublié le cose CSS du sous-menu. Mea culpa.
Tu peux le trouver juste en dessous de celui du menu dans la page CSS...
Tu peux le trouver juste en dessous de celui du menu dans la page CSS...
effectivement merci pour ton aide ca fonctionne bien je n'ai plus qu'à modifier les textes dans les différentes images.
Saurait tu ou je pourrait trouver quelqu'un pour m'aider a faire ca je n'y arrive pas.
Saurait tu ou je pourrait trouver quelqu'un pour m'aider a faire ca je n'y arrive pas.
A modifier les textes ?!? Ca se fait simplement dans le code HTML !! A moins que ce soient des images auquel cas il suffit d'en refaire sous Gimp/Photoshop...
Ceci dit, pense éventuellement à modifier TOUTES les images également, je ne t'ai pas orienté sur le code pour que tu puisse pomper le menu entier, mais pour que tu puisse en comprendre le fonctionnement et t'en inspirer ;)
Ceci dit, pense éventuellement à modifier TOUTES les images également, je ne t'ai pas orienté sur le code pour que tu puisse pomper le menu entier, mais pour que tu puisse en comprendre le fonctionnement et t'en inspirer ;)
C'est ce que je fait lol je vais pas prendre le site en entier lol tkt
Oui effectivment c'est des images et donc faut que je modifie avec gimp photoshop mais je n'y arrive pas je suis une bille en design
Oui effectivment c'est des images et donc faut que je modifie avec gimp photoshop mais je n'y arrive pas je suis une bille en design
Malheureusement, il est difficile de créer un site web sans la moindre notion d'utilisation d'un programme graphique. Dans ce cas, la seule solution est soit de trouver quelqu'un qui soit suffisamment emballé par ton projet pour te rejoindre bénévolement, soit de payer quelqu'un pour le faire.
Ou alors, tu retrousses tes manches, tu télécharges The Gimp et tu regardes sur le web, il y a plein de tutos... Ce genre de soft a tendance à faire peur de prime abors mais n'est finalement pas si compliqué à utiliser, en tous cas pour ce genre d'usage ;)
Ceci dit, pour répondre à ta question : "Saurait tu ou je pourrait trouver quelqu'un pour m'aider a faire ca je n'y arrive pas.", as-tu pensé à poster dans le forum Infographie de CÇC ? Ça me semble un bon départ.
Ou alors, tu retrousses tes manches, tu télécharges The Gimp et tu regardes sur le web, il y a plein de tutos... Ce genre de soft a tendance à faire peur de prime abors mais n'est finalement pas si compliqué à utiliser, en tous cas pour ce genre d'usage ;)
Ceci dit, pour répondre à ta question : "Saurait tu ou je pourrait trouver quelqu'un pour m'aider a faire ca je n'y arrive pas.", as-tu pensé à poster dans le forum Infographie de CÇC ? Ça me semble un bon départ.