Maj inversé Down Menu.
Ce menu CSS propre horizontale contient des onglets avec le texte qui décalage vers le bas légèrement lorsque la souris survole. Et juste pour la démonstration, il montre comment faire les coins en bas de chaque onglet arrondi utilisant à la fois CSS3 et les déclarations exclusives de Mozilla pour les coins arrondis. Notez que l'effet des coins arrondis est actuellement visible dans Firefox (et futur CSS3 navigateurs). Les lignes concernées dans le code CSS sont les suivants:
-Moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
<style type="text/css">
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>
Le code html
<div class="invertedshiftdown">
<ul>
<li><a href="votre lien ici" title="Home">Home</a></li>
<li><a href="votre lien ici" title="New">New</a></li>
<li class="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="CSS">CSS</a></li>
<li><a href="votre lien ici" title="DHTML Forums">Forums</a></li>
</ul>
<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>
<br style="clear: both;" />
0 commentaires:
Enregistrer un commentaire