C'est notre interprétation de la recherche d'un bloc menu vertical, inspiré par l'original de menu blocs bleus et basé sur les CSS utilisée par le menu vertical de notre site soeur CSS disque . Il supporte l'insertion d'en-têtes de menu pour agir en tant que diviseurs entre des groupes de liens du menu.
Noter: Vous pouvez Traduire les commentaires Votre sélection de css, le modificateur et le translate your language via une CE privilège http://translate.google.com
Le code css
<style type="text/css">
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}
* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>
Le code html
<div id="ddblueblockmenu">
<div class="menutitle">titre menu Dynamic Drive</div>
<ul>
<li><a href="votre lien ici">Home</a></li>
<li><a href="votre lien ici">votre page</a></li>
<li><a href="votre lien ici">What's Revised</a></li>
<li><a href="votre lien ici">Help Forums</a></li>
</ul>
<div class="menutitle">titre menu CSS Library</div>
<ul>
<li><a href="votre lien ici">Horizontal CSS Menus</a></li>
<li><a href="votre lien ici">Vertical CSS Menus</a></li>
<li><a href="votre lien ici">Image Effects</a></li>
<li><a href="votre lien ici">Form Effects</a></li>
<li><a href="votre lien ici">Boxes & containers</a></li>
<li><a href="votre lien ici" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire