Création menu vertical
Résolu/Fermé
bulitt
-
5 nov. 2008 à 20:49
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 6 nov. 2008 à 13:03
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 6 nov. 2008 à 13:03
A voir également:
- Création menu vertical
- Menu déroulant excel - Guide
- Ps5 vertical - Guide
- Creation compte gmail - Guide
- Création organigramme - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
3 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
6 nov. 2008 à 13:03
6 nov. 2008 à 13:03
SALUT
un modele de menus entierement configurable sans js avec sub et meme sub sub en CSS
RAD
un modele de menus entierement configurable sans js avec sub et meme sub sub en CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>RAD ZONE Webcreation </title> <meta name="author" content="http://radservebeer.free.fr" /> <meta name="generator" content="PSPad editor, www.pspad.com" /> <style type="text/css"> .menu { margin: 10px; height: 100px; font-size: 10pt; font-family: verdana; } .menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 11em; } .menu li { background-color: #cccc99; float: left; } .menu li.sub { background-color: #cccc99; } .menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; } .menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 11em; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; } .menu b { float: right; margin-right: 5px; } * html .menu a, * html .menu a:visited { width: 11em; } * html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover { position: relative; } .menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; } .menu li:hover > ul { visibility: visible; } .menu ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } </style> </head> <body> <div class="menu"> <ul><li> <a href="#"><b>»</b>MENU 1 <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul><li> <a href="#">SUB1</a></li><li> <a href="#"><b>»</b>SUB2 <!--[if IE 7]> <!--></a> <!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td> <![endif]--> <ul><li> <a href="#">SUB SUB2.a</a></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--></li> </ul> <!--[if lte IE 6]> </td> </tr> </table> </a> <![endif]--></li><li> <a href="#">MENU 2</a></li><li> <a href="#">MENU 3</a></li> </ul> </div> </body> </html>
RAD
Salut,
Pour faire un menu vertical (ou horizontal), il faut utiliser une liste. Les balises à utiliser sont :
Ce menu affichera :
*Menu1
*Menu2
Pour enlever les puces, tu peux utiliser une feuille de styles avec le code suivante :
Ton menu sera affiché comme suit :
Menu1
Menu2
Cordialement,
Nikko
Pour faire un menu vertical (ou horizontal), il faut utiliser une liste. Les balises à utiliser sont :
<ul> <li>Menu1</li> <li>Menu2</li> </ul>
Ce menu affichera :
*Menu1
*Menu2
Pour enlever les puces, tu peux utiliser une feuille de styles avec le code suivante :
li { text-decoration: none; }
Ton menu sera affiché comme suit :
Menu1
Menu2
Cordialement,
Nikko
xxkirastarothxx
Messages postés
378
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
22 mars 2013
40
6 nov. 2008 à 10:47
6 nov. 2008 à 10:47
Je reprends juste: "vertical (ou horizontal)"... bah non juste vertical là ^^
avec des <li> sans css particulier ça ne s'affichera pas horizontalement comme ça:
Menu1 - Menu2 - Menu3 ....
mais bien comme tu l'a précisé après, comme ça:
Menu1
Menu2
Menu3
...
Donc verticalement
Ensuite, d'après l'exemple de site que bulitt à donné, je suppose qu'il cherche plutôt un menu verticale déroulant;
Pour faire ça il faut connaitre le javascript,
je te conseil de chercher des script de menu déroulant, ça serra surement plus simple; tu en trouvera ici:
http://www.editeurjavascript.com/scripts/search-asked_menu+deroulant.php
il n'y a pas de meilleur ou de moins bon, choisis en fonction de ton besoin, il y a des exemples ;)
avec des <li> sans css particulier ça ne s'affichera pas horizontalement comme ça:
Menu1 - Menu2 - Menu3 ....
mais bien comme tu l'a précisé après, comme ça:
Menu1
Menu2
Menu3
...
Donc verticalement
Ensuite, d'après l'exemple de site que bulitt à donné, je suppose qu'il cherche plutôt un menu verticale déroulant;
Pour faire ça il faut connaitre le javascript,
je te conseil de chercher des script de menu déroulant, ça serra surement plus simple; tu en trouvera ici:
http://www.editeurjavascript.com/scripts/search-asked_menu+deroulant.php
il n'y a pas de meilleur ou de moins bon, choisis en fonction de ton besoin, il y a des exemples ;)