CSS ______menu interactif______

Comment faire un menu comme les miens (quand vous passez votre souris, çà change, c'est magique !!) Mettez ce code à l'endroit ou vous souhaitez que votre menu apparaisse: <div id="navi"><a href="#.php">001. Votre Titre<br> Votre sous-titre</a></div> Ce qui ressemble à çà:

001. Votre Titre
Votre sous-titre

Et rajouter ceci dans votre css: #navi a {display: block; BACKGROUND-COLOR: #000000; border-left: 5px solid #222221; border-right: 0px solid #000000; border-top: 1px solid #222221; border-bottom: 1px solid #222221; color:#ffffff; text-decoration:none; letter-spacing: 0px; font-family:verdana; font-style:bold; font-size: 9px; height:35px; text-align:center; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 15px; } #navi a:hover { BACKGROUND-COLOR: transparent; color:#ffffff; border-left: 0px solid #000000; border-right: 5px solid #000000; border-top: 0px solid #000000; border-bottom: 1px dotted #000000; text-decoration:none; font-family: verdana; letter-spacing: 0px; font-size: 9px; height:35px; text-align:center; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 15px; } Vous pouvez faire plusieurs menus différents, il vous suffit alors de mettre "navi2", "navi3"...

Quelques Idées de Menus Interactifs

001. Votre Titre
Votre sous-titre

Code CSS correspondant
#navi a {display: block; BACKGROUND-COLOR: #eaeaea; -moz-border-radius:20px; border-left: 5px solid #a0c5de; border-right: 0px solid #dcdcdc; border-top: 1px dotted #dcdcdc; border-bottom: 1px dotted #dcdcdc; color:#999999; text-decoration:none; letter-spacing: 0px; font-family:verdana; font-style:bold; font-size: 9px; height:35px; text-align:left; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 15px; } #navi a:hover { BACKGROUND-COLOR: #ffffff; color:#999999; -moz-border-radius:20px; border-left: 5px solid #eaeaea; border-right: 0px solid #000000; border-top: 1px dotted #dcdcdc; border-bottom: 1px dotted #dcdcdc; text-decoration:none; font-family: verdana; letter-spacing: 0px; font-size: 9px; height:35px; text-align:left; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 15px; }

001. Votre Titre
Votre sous-titre

Code CSS correspondant
#navi a {display: block; BACKGROUND-COLOR: #eaeaea; -moz-border-radius:20px; border-left: 50px solid #a0c5de; border-right: 0px solid #dcdcdc; border-top: 1px dotted #dcdcdc; border-bottom: 1px dotted #dcdcdc; color:#999999; text-decoration:none; letter-spacing: 0px; font-family:verdana; font-style:bold; font-size: 9px; height:35px; text-align:left; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 10px; } #navi a:hover { BACKGROUND-COLOR: #eaeaea; color:#999999; -moz-border-radius:20px; border-left: 50px solid #999999; border-right: 0px solid #000000; border-top: 1px dotted #dcdcdc; border-bottom: 1px dotted #dcdcdc; text-decoration:none; font-family: verdana; letter-spacing: 0px; font-size: 9px; height:35px; text-align:left; PADDING-TOP: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 10px; }

Ensuite c'est à vous de changer les couleurs (background-color, color), les bordures (border-left, border-right...), la disposition du texte (center, left...)...


RETOUR ~ ACTUALISER ~ SUIVANT
Warning: main(footer.php) [function.main]: failed to open stream: No such file or directory in /var/www/sdb/9/3/graphicsty/menuinteractif.php on line 186

Warning: main() [function.include]: Failed opening 'footer.php' for inclusion (include_path='/var/www/sdb/9/3/graphicsty/include:.:/usr/php4.1.3/lib/php') in /var/www/sdb/9/3/graphicsty/menuinteractif.php on line 186