Menu Vertical

Fermé

Kolor - 19 juil. 2012 à 11:37
Kolor - 19 juil. 2012 à 14:27

Bonjour,

J'aimerais savoir comment faire pour créer un menu vertical en html en le mettant sur le coté gauche.

<div id="menu">
<div class="menu">
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</div>
</div>

Dans le css je vois pas quoi mettre

#menu {
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 10px;
  float: right;
  width: 180px;
  margin-left: 10px;
  background-color: #ff9900;
  background-position: right top;
  background-repeat: no-repeat;
}
#menu li {
  list-style-type: none;
#menu a {
  color: white;
  text-decoration: none;
}
#menu a:hover {
  color: #cc0000;
}
#menu li a:hover {
  border-left: 5px solid #cc0000;
  background-color: white;
  padding-left: 5px;
}

J'ai essayer ça mais ça me le met en haut a gauche avant le header alors que je voudrais après.
Merci.

A voir également:

Menu Vertical
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Télécommande tcl touche menu - Forum Téléviseurs

3 réponses

Réponse 1 / 3

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
19 juil. 2012 à 12:52

tu place l'ensemble ton menu dans une autre balise div positionner la où il doit se trouver

Kolor
19 juil. 2012 à 13:01

Merci.
Mais j'aimerais que ça soit en verticale et non en horizontal.

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }
 #menu ul li ul {
 display:none;
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 #menu li ul {
 position:absolute;
 }
 #menu {
 height:50px;
 }

Réponse 2 / 3

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
19 juil. 2012 à 13:58

ta derniere regle css :

#menu {
height:50px;
width: 100px;
}

Kolor
19 juil. 2012 à 14:17

Merci j'ai fais un nouveau css mais le problème c'est qu'au lieu qu'il va en dessous de l'image il va a gauche a coter de l'image.

img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#1a61a9; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
	list-style:none;
	}
.menu a, .menu a:visited {
	width:186px;
	height:22px;
	margin:0px 0px 2px -32px;
	position:relative;
	display:block;
	color:#cbe7f5;
	text-decoration:none;
	background:url(../images/menubg2.jpg) no-repeat;
	padding:4px 0 0 8px;
	}
*html .menu a, .menu a:visited {
	width:186px;
	height:22px;
	margin:0px 0px 2px -32px;
	position:relative;
	display:block;
	color:#cbe7f5;
	text-decoration:none;
	background:url(../images/menubg2.jpg) no-repeat;
	padding:4px 0 0 8px;
	}
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited  {
	background:url(../images/menubg1.jpg) no-repeat;
	text-decoration:none;
	}	
.bot{clear:left;}

Réponse 3 / 3

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
19 juil. 2012 à 14:20

colle moi ton code page complet parce que là c'est un peu trop leger comme infos

a tu un conteneur de ta page ? une balise <div> ou <tb> qui contient ta page web.
ca faciliterai grandement ton positionnement de balise

Kolor
Modifié par Kolor le 19/07/2012 à 14:33

Je vois de voir que sur ie il est bien placer...

<td><table width="100%" border="0" cellpadding="18" cellspacing="0" class="footer_legal_notice">
<td width="50%">
<img width="470" height="150" src="../image/test.jpg">
<img src="images/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item"><a href="#">test 1</a></li>
<li class=""><a href="#" title="test">test 2</a></li>
<li class=""><a href="#" title="test">test 3</a></li>
<li class=""><a href="#" title="test">test 4</a></li>
<li class=""><a href="#" title="test">test 5</a></li>
<li class=""><a href="#" title="test">test 6</a></li>
</ul>
</div>

Discussions similaires

Barre verticale droite sur clavier

le signe " | " dans excel

Touche du clavier barre verticale

svp faire une barre verticale avec clavier

menu caché