|
26-07-2008 |
Un menu barre en CSS et javascript
Présentation du menu sans liens
Téléchargez le script
Télécharger le fichier source :
Voyons le code Css à produire pour réaliser ce menu à onglets :
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:Verdana, Arial;
font-size:small;
}
#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
width:.1em;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#accueil #nav-accueil, #tele #nav-tele,
#livre #nav-livre, #forum #nav-forum,
#admin #nav-admin {
background-position:0 -150px;
border-width:0;
white-space:nowrap;
}
#accueil #nav-accueil a, #tele #nav-tele a,
#livre #nav-livre a, #forum #nav-forum a,
#admin #nav-admin a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
white-space:nowrap;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
html>body {
font-size:small;
}
p.clear {
clear: left;
margin:0;
padding:1em
}
|
Ce nowrap appliqué au white-space, empêche les onglets de droite de passer sous les autres en rétrécissant la fenêtre. Si vous mettez le menu dans un tableau, il faudra calculer au pixel près sa taille pour bien caler les onglets.
Code Html à créer pour nos onglets:
<table background="#F0F0E0" width="580px" height="30px" align="center" border="3">
<tr>
<td align="center" white-space="nowrap">
<div id="header">
<ul style="white-space:nowrap;">
<li id="nav-accueil"><a href="index.html" target="_self">Accueil</a></li>
<li id="nav-tele"><a href="1.html" target="_self">Le code CSS</a></li>
<li id="nav-livre"><a href="2.html" target="_self">Le code html</a></li>
<li id="nav-forum"><a href="3.html" target="_self">Menu inactif</a></li>
<li id="nav-admin"><a href="4.html" target="_self">Administration</a></li>
</ul>
</div>
</td>
</tr>
</table>
|
Remarques importantes :
- Dans chaque page html appelée, il faudra noter dans le body, l'id de la page afin de faire passer l'onglet en "rollover", sinon, il restera identique.
Les id ici sont (vous les voyez dans le css dans la page précédente), accueil, tele, livre, forum, admin. Donc dans chaque page, il faudra loader l'id de la page correspondante.
- La différence se fait entre l'id "nav-accueil" par exemple et son id "accueil".
- Ne pas oublier de mettre la targe en _self, pour ne pas recharger une nouvelle page.
- L'utilisation d'un tableau centré est personnelle, vous pouvez laisser le menu dans son <div id="header">, il flottera alors sur la gauche, si vous le voulez centré, c'est une autre histoire et un autre aricle.....
- Vous pouvez retravailler les images pour adapter votre menu en fonction de votre charte graphique.
 Citez cet article
|
- Les messages comportant des attaques verbales contre les personnes seront supprimés.
- Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
- Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved |
Commenter cet article
