Création menu vertical

Résolu

bulitt -
RAD ZONE Messages postés 5362 Statut Contributeur - 6 nov. 2008 à 13:03

Bonjour à tous,

j'ai un peu de mal avec les menus (oui je suis encore débutant, dommage pour moi!)

j'aimerai créer un menu vertical du même genre que celui de l'adresse suivante:

https://www.lemondeinformatique.fr/

quel est code html faut-t-il prendre et quel css???

je vous remercie d'avance

Configuration: Windows Vista
Firefox 3.0.3

Afficher la suite

3 réponses

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

SALUT

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>&#187;</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>&#187;</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

Réponse 2 / 3
Nikko
Salut,

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
0
Réponse 3 / 3
xxkirastarothxx Messages postés 415 Statut Membre 40

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 ;)
0

Création menu vertical

3 réponses

Discussions similaires

Newsletters