fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

webmastering,Menu déroulant vertical au clic V1

Menu vertical qui se déroule vers le bas sur le clic d'un élément et ne se referme que sur le clic de ce même élément. Ne pas oublier de cliquer de nouveau dans un onglet pour le refermer ! | menu déroulant v2 | Voyez ci-dessous les codes CSS et JavaScript pour le faire fonctionner. | menu vertical et css : plusieurs exemples |

Menu déroulant vertical sur clic, webmasrering

 

Cliquez sur les items du menu pour voir sa réaction ... Ce menu vertical est totalement personnalisable.

Compatibilité avec les navigateurs:

  • Internet Explorer
  • FireFox
  • Opera
  • Safari
  • Netscape
  • Konqueror

Ce script nécessite une feuille de style CSS et un petit bout de code Javascript, à mettre dans la partie "header" de la page.

CSS utilisée

Code CSS. A insérer dans la partie 'head':

*{ margin:0; padding:0; } #menu{ width:150px; margin:20px auto 0 auto; } .menu, .sousmenu{ text-align:center; } .menu{ height:18px; width:150px; padding:2px 0; background:#404040; color:#fff; } .sousmenu{ height:18px; width:150px; padding:1px 0; background:#808080; color:#fff; } .menu a{ display:block; width:100%; height:100%; color:#fff; font-family:arial,sans-serif; font-size:12px; font-weight:bold; text-decoration:none; background:#404040; } .sousmenu a{ display:block; width:100%; height:100%; color:#fff; font-family:arial,sans-serif; font-size:12px; font-weight:bold; text-decoration:none; background:#808080; } .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{ background:#006DCC; }

Utilisez le copier / coller si vous le désirez ...

Code Javascript. A insérer dans la partie "head":

function afficheMenu(obj){ var idMenu = obj.id; var idSousMenu = 'sous' + idMenu; var sousMenu = document.getElementById(idSousMenu); /*****************************************************/ /** si le sous-menu correspondant au menu cliqué **/ /** est caché alors on l'affiche, sinon on le cache **/ /*****************************************************/ if(sousMenu.style.display == "none"){ sousMenu.style.display = "block"; } else{ sousMenu.style.display = "none"; } }

Et hop, vite fait un menu vertical déroulant que vous pouvez facilement personnaliser au niveau des couleurs, comme pour les largeurs d'onglets ...

Pour voir le Code HTML pour personnaliser vos onglets. A insérer dans la partie "body":