Inversé menu moderne Briques

Inversé menu moderne Briques.

À la demande générale, il s'agit d'une alternative, version inversée de l'original Menu briques modernes . Markup sages c'est plus légère plus petite que la version originale, moins un élément DIV.

 Le code css

<style type="text/css">

# {modernbricksmenu2

padding: 0;

width: 100%;

border-top: 5px solid # D25A0B; / * thème de couleur brun * /

background: transparent;

voice-family: "\"} \ "";

voice-family: inherit;

}

# modernbricksmenu2 ul {

margin: 0;

margin-left: 40px; / * La marge entre le premier élément du menu et le bord gauche du navigateur * /

padding: 0;

list-style: none;

}

# modernbricksmenu2 li {

display: inline;

margin: 0 0 0 2px;

padding: 0;

text-transform: uppercase;

}

# modernbricksmenu2 une {

float: left;

display: block;

police: Arial gras 11px;

couleur: blanc;

text-decoration: none;

margin: 0 0 0 1px; / * Marge entre chaque élément du menu * /

padding: 5px 10px;

background-color: black; / thème * Couleur marron * /

border-top: 1px solid blanc;

}

# modernbricksmenu2 a: hover {

background-color: # D25A0B; / thème * Couleur marron * /

couleur: blanc;

}

# # modernbricksmenu2 actuelle a {/ * onglet actuellement sélectionné * /

background-color: # D25A0B; / thème * Couleur marron * /

couleur: blanc;

border-color: # D25A0B; / thème * Couleur marron * /

}

# myform {/ * CSS pour la boîte de recherche de l'échantillon. Retirez si nécessaire * /

float: right;

margin: 0;

margin-top: 3px;

padding: 0;

}

# myform. textinput {

largeur: 190px;

border: 1px solide gris;

}

# myform. soumet {

police: normal 12px Verdana;

hauteur: 22px;

border: 1px solid black;

background-color: JauneClair;

}

</ style>

Le code html

<div id="modernbricksmenu2">
<ul>
<li style="margin-left: 1px"><a href="votre lien ici" title="Home">Home</a></li>
<li><a href="votre lien ici" title="New">New</a></li>
<li id="current"><a href="votre lien ici" title="Revised">Revised</a></li>
<li><a href="votre lien ici" title="Tools">Tools</a></li>
<li><a href="votre lien ici" title="DHTML Forums">Forums</a></li>
</ul>
/ *si vous voulez ajouter boite searsh ou email ..* /
<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>


<br style="clear: left" />

Posted in: blogger html css menu horizontale