Glossy Menu horizontal
voir aussi
GLOSSY MENU VERTICAL.
Une jolie courbe, brillant menu de recherche horizontale. Trois images sont utilisées pour créer l'interface-une image soulignant gradient de répéter, en plus parties gauche et droite d'une image en tranches pour onglet l'onglet sélectionné. L'auteur (Santosh) a gentiment créé cinq coloris différents:
noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com/
le code css
le code html
voir aussi
GLOSSY MENU VERTICAL.
Une jolie courbe, brillant menu de recherche horizontale. Trois images sont utilisées pour créer l'interface-une image soulignant gradient de répéter, en plus parties gauche et droite d'une image en tranches pour onglet l'onglet sélectionné. L'auteur (Santosh) a gentiment créé cinq coloris différents:
noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com/
le code css
<style type="text/css">
. glossymenu {
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url (médias / menur_bg.gif) repeat-x; / * chemin de l'image onglet Arrière-plan * /
hauteur: 46px;
list-style: none;
}
. glossymenu li {
float: left;
}
. glossymenu li a {
float: left;
display: block;
color: # 000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding: 0 0 0 16px; / * Rembourrage pour accueillir l'image onglet de gauche. Ne changez pas * /
hauteur: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
. glossymenu li a, b {
float: left;
display: block;
padding: 0 24px 0 8px; / * Remplissage des éléments du menu * /
}
. glossymenu li.current une, glossymenu li a:. hover {
color: # FFF;
background: url (médias / menur_hover_left.gif) no-repeat; / * chemin de gauche de l'onglet Image * /
background-position: left;
}
. li.current glossymenu AB, glossymenu li a:. hover {b
color: # FFF;
background: url (médias / menur_hover_right.gif) no-repeat en haut à droite; / * le droit chemin de l'onglet Image * /
}
</ style>
le code html
<ul class="glossymenu">
<li class="current"><a href="votre lien ici"><b>Home</b></a></li>
<li><a href="votre lien ici"><b>CSS</b></a></li>
<li><a href="votre lien ici"><b>Forums</b></a></li>
<li><a href="votre lien ici"><b>Webmaster Tools</b></a></li>
<li><a href="votre lien ici"><b>JavaScript</b></a></li>
<li><a href="votre lien ici"><b>Gallery</b></a></li>
</ul>
0 commentaires:
Enregistrer un commentaire