Menu déroulant en css

Résolu/Fermé
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 - 9 mars 2009 à 16:10
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 - 11 mars 2009 à 18:58
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

17 réponses

Réponse 1 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
9 mars 2009 à 16:35
up
0
Réponse 2 / 17
Utilisateur anonyme
10 mars 2009 à 09:30
il te suffit de lire le code source de leur page en general ces menus sont en javascript
0
Réponse 3 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
10 mars 2009 à 10:28
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 !
0
Réponse 4 / 17
Utilisateur anonyme
10 mars 2009 à 10:41
ah tout en css ben j aimerais bien voir un exemple
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
10 mars 2009 à 10:48
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
0
Réponse 6 / 17
Utilisateur anonyme
10 mars 2009 à 11:02
désactive le js les sous-menus ne seront pas cachés ce qui n empeche pas le fonctionnement
0
Réponse 7 / 17
Utilisateur anonyme
10 mars 2009 à 11:04
ah si cela fonctionne
0
Réponse 8 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
11 mars 2009 à 11:34
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?
0
Réponse 9 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
11 mars 2009 à 12:04
"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".
0
Réponse 10 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
11 mars 2009 à 13:33
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...
0
Réponse 11 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
11 mars 2009 à 13:57
"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 !
0
Réponse 12 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
11 mars 2009 à 15:33
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 

<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 &amp; 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 &amp; 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 &amp; 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
0
Réponse 13 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
11 mars 2009 à 16:43
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...
0
Réponse 14 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
11 mars 2009 à 18:18
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.
0
Réponse 15 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
11 mars 2009 à 18:45
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 ;)
0
Réponse 16 / 17
drogba7213 Messages postés 1524 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 3 avril 2010 21
11 mars 2009 à 18:48
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
0
Réponse 17 / 17
KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
11 mars 2009 à 18:58
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.
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses