28172 sujets

CSS et mise en forme, CSS3

Menu vertical en css (avec un peu de javascript)

Un petit menu vertical sans prétention réalisé vite fait pour le site intranet du boulot...
Les sous menus s'ouvrent et se ferment grâce à un petit script.

Le tout fonctionne sous IE6 et IE8. Sous firefox les sous menus sont fixes, donc affichés par défaut.

Si ça peut servir (le code n'est pas commenté, et le tout est largement perfectible, je reviendrai dessus plus tard)...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<link href="test.css" rel="stylesheet" type="text/css" />


<SCRIPT language="JavaScript1.2">
<!--
function test(myItem){
	var m = myItem.children;
    for (i=0; i<m.length; i++) 
       {var etat= m.item(i).className;
	    if (etat=="sous_item_apparent") {ferme();} else {ferme();m.item(i).className="sous_item_apparent";}
	                              
	    }
                      }

function ferme(){
mesDiv = document.getElementsByTagName("div" ); 
for (j = 0; j < mesDiv.length; j++) {
 if (mesDiv[j].id.indexOf("sous_item" )!=-1) 
      {mesDiv(j).className="sous_item_masque";
      }                             
 }
}
// -->
</SCRIPT>
</head>
<body onload="ferme()">




<div id="accueil" class="entete">Page d'accueil</div>

<div id="menu" class="menu">

<div id="titre1" class="item" onclick="ferme()" >Plan du site</div>

<div id="titre2" class="item_bottom" onclick="test(titre2)">La Brigade
  <div id="sous_item2" class="sous_item_apparent">
<div>Présentation</div>
<div>Organigramme</div> 
<div>Les Antennes</div>
<div>Cellule CEZAR</div>  
<div>Cellule SéZAM</div> 
<div>Cellule TAG</div> 
<div>Cellule SEF</div> 
</div>
  </div>

<div id="titre3" class="item_bottom" onclick="test(titre3)">Communication

<div id="sous_item3" class="sous_item_apparent">
<div>Le Quai N</div>
<div>Histoire de la SUGE</div> 
<div>Documentation</div> 
<div>Actualités</div> 
</div>
</div>

<div id="titre4" class="item_bottom" onclick="ferme()">Liens sûreté</div>
<div id="titre5" class="item_bottom" onclick="ferme()">Liens pratiques</div>
<div id="titre6" class="item_bottom" onclick="ferme()">Sites de proximité</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p class="FC"><strong>FICHE CEZAR</strong></p>
</body>
</html>








body {margin-left: 0px;margin-top: 0px;background-color:#009900 }

.entete { padding-bottom:17px;padding-top:17px;padding-left:10px;font-family: Arial, Helvetica, sans-serif;  font-size: 14px; color: white}

.menu {width:143px}

.item {padding-bottom:2px;padding-top:2px;padding-left:10px;border:solid;border-width:1px; border-color:white; border-left:none;border-right:none;font-family: Arial, Helvetica, sans-serif;  font-size: 14px; color: white}

.item_bottom{padding-bottom:2px;padding-top:2px;padding-left:10px;border:solid;border-width:1px; border-color:white; border-left:none;border-right:none;border-top:none;font-family: Arial, Helvetica, sans-serif;  font-size: 14px; color: white}

.sous_item_apparent {padding-bottom:2px;padding-top:2px;padding-left:5px;font-family: Arial, Helvetica, sans-serif;  font-size: 12px; color: #C0C0C0}

.sous_item_masque {display:none}

.rubrique {list-style:  none;}

.sous rubrique {list-style:none; }

.FC {padding-left:22px;font-family: Arial, Helvetica, sans-serif;  font-size: 14px; color: White; }

Modifié par sergentrazor (21 Mar 2010 - 13:52)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à