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


 

 

webmastering,Menu déroulant vertical au clic V2

Menu vertical qui se déroule vers le bas sur le clic d'un élément et se referme sur le clic suivant sur un autre élément. | menu déroulant v1 | Ne pas oublier de cliquer de nouveau dans un onglet pour en ouvrir un autre ! Voyez ci-dessous les codes CSS et JavaScript pour le faire fonctionner. | menu vertical et css : plusieurs exemples |

Menu déroulant vertical sur clic

 

Cliquez sur les items du menu pour voir sa réaction ... Ce menu vertical déroulant 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:#008F24; }

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); /*****************************************************/ /** on cache tous les sous-menus pour n'afficher **/ /** que celui dont le menu correspondant est cliqué **/ /** où 4 correspond au nombre de sous-menus **/ /*****************************************************/ for(var i = 1; i <= 4; i++){ if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){ document.getElementById('sousmenu' + i).style.display = "none"; } } if(sousMenu){ //alert(sousMenu.style.display); if(sousMenu.style.display == "block"){ sousMenu.style.display = "none"; } else{ sousMenu.style.display = "block"; } } }

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":