Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120841 Menu vertical tout navigateur | | Voici un tuto pour un menu vertical pour tout navigateur Code HTML - Code:
-
<ul id="menu-accordeon"> <li><a href="#">Lien menu 1</a> <ul> <li><a href="#">lien sous menu 1</a></li> <li><a href="#">lien sous menu 1</a></li> <li><a href="#">lien sous menu 1</a></li> <li><a href="#">lien sous menu 1</a></li> </ul> </li> <li><a href="#">Lien menu 2</a> <ul> <li><a href="#">Lien sous menu 2</a></li> <li><a href="#">Lien sous menu 2</a></li> <li><a href="#">Lien sous menu 2</a></li> <li><a href="#">Lien sous menu 2</a></li> </ul> </li> <li><a href="#">Lien menu 3</a> <ul> <li><a href="#">Lien sous menu 3</a></li> <li><a href="#">Lien sous menu 3</a></li> <li><a href="#">Lien sous menu 3</a></li> <li><a href="#">Lien sous menu 3</a></li> </ul> </li> </ul> Code CSS - Code:
-
#menu-accordeon { padding:0; margin:0; list-style:none; text-align: center; width: 180px; } #menu-accordeon ul { padding:0; margin:0; list-style:none; text-align: center; } #menu-accordeon li { background-color:#729EBF; background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%); background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%); border-radius: 6px; margin-bottom:2px; box-shadow: 3px 3px 3px #999; border:solid 1px #333A40 } #menu-accordeon li li { max-height:0; overflow: hidden; transition: all .5s; border-radius:0; background: #444; box-shadow: none; border:none; margin:0 } #menu-accordeon a { display:block; text-decoration: none; color: #fff; padding: 8px 0; font-family: verdana; font-size:1.2em } #menu-accordeon ul li a, #menu-accordeon li:hover li a { font-size:1em } #menu-accordeon li:hover { background: #729EBF } #menu-accordeon li li:hover { background: #999; } #menu-accordeon ul li:last-child { border-radius: 0 0 6px 6px; border:none; } #menu-accordeon li:hover li { max-height: 15em; }
|
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 96226 Re: Menu vertical tout navigateur | | Bonjour, Je fait le teste actuelement et cela semble aller avec chrome. En tout cas grand merci les codes, bon job Bonne soirée Roland |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120841 Re: Menu vertical tout navigateur | | Avec plaisir Rectangletops
Bonne fêtes
Amicalement |
| |