11550 sujets

JavaScript, DOM et API Web HTML5

Adapter un menu horizontal pour affichage 1er sous menu non caché

Bonjour à tous,

A propos de ce menu horizontal:
http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/

J'essaye de faire que le premier sous menu s'affiche par défaut et lorsqu'on quitte le menu que celui-ci revienne

J'ai changé le premier sous menu à "display block" au lieu de "display none" et après j'ai esséy de mettre onMouseOut=’showmenu()’ et la fonction showmenu(){
document.getElementById(‘span.1ermenu’).style.display = ‘block’;
}
mais ça ne marche pas. Est-ce que quelqu'un peut me dire si j'ai fais une boulette et si ça vous semble la bonne méthode à appliquer ? Puis je arriver à la même action sans passer par javscript ?

Merci par avance

Cotp

Thanks in advance
Pour afficher le premier sous-menu (qui est affilié au deuxième menu), il y a juste à faire ça :

#topnav span:nth-child(2){
display:block !important;
/* Je rajoute un !important au cas où le style css originel est appliqué via javascript, ou via une feuille de style appelée par la suite*/
}

a écrit :

showmenu(){
document.getElementById(‘span.1ermenu’).style.display = ‘block’;
}


L'exemple que tu donnes tourne avec la librairie jquery, donc tu as seulement à faire ça (si besoin est) :

$(".1ermenu").show();


Ah oui, et sinon ton code ne pouvait fonctionner. Tu cherches un id (getElementById), et tu lui donnes ça: "span.1ermenu’". Ce serait plutôt ça : getElementById("1ermenu") (si "1ermenu" est bien un id, et pas une classe !)
Merci beaucoup ZeB_panam pour prendre le temps de répondre à mon sujet !

ZeB_panam a écrit :

L'exemple que tu donnes tourne avec la librairie jquery, donc tu as seulement à faire ça (si besoin est) :

$(".1ermenu").show();


Super, effectivement ça marche Smiley cligne génial Smiley langue


ZeB_panam a écrit :
Pour afficher le premier sous-menu (qui est affilié au deuxième menu), il y a juste à faire ça :

#topnav span:nth-child(2){
display:block !important;
/* Je rajoute un !important au cas où le style css originel est appliqué via javascript, ou via une feuille de style appelée par la suite*/
}


Je m'en suis sorti en remplaçant <span style="display: none;"> par "<span class="1ermenu" style="display: block;">". Peux-tu me ré-expliquer la différence avec ton "!important", est-ce que tu me conseilles de le rajouter ?

Cotp
a écrit :
Je m'en suis sorti en remplaçant &lt;span style=&quot;display: none;&quot;&gt; par &quot;&lt;span class=&quot;1ermenu&quot; style=&quot;display: block;&quot;&gt;&quot;. Peux-tu me ré-expliquer la différence avec ton &quot;!important&quot;, est-ce que tu me conseilles de le rajouter ?

La règle !important assure à la propriété d'être prioritaire quelque soit le moment où elle est déclarée par rapport aux autres.

Par contre, à ce que je vois tu gères les styles css "inline", c'est à dire directement dans le body. C'est déconseillé, tu devrais les gérer soit dans un feuille css externe, ou soit via des déclarations entre les balises <head>.
Sujet clos
Aller à