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

webmastering,Menu déroulant vertical au clic V2

CSS utilisée

Scripts

Outils

Dossiers