Menu CSS - Sliding doors (Vertical)

Publié le par PêUR

Suite à une question de All concernant l'article Menu CSS - Sliding doors (Horizontal) et la possibilité d'avoir les boutons les uns sous les autres, voici un article expliquant les modifications a apporter au code CSS pour un magnifique menu sliding doors vertical.

 

Prérequis

Le code HTML à utiliser et celui présenter dans l'article Menu CSS - Sliding doors (Horizontal)

Contrairement au menu horizontal, pour ce menu vertical, une seule possibilité s'offre à vous: les boutons de menu doivent être de largeur fixe.

 

Code CSS à utiliser

Le code modifié est le suivant:

CSS

#nav li {
    margin: 0;
    padding: 0;
}

#nav li a:link, #nav li a:visited {
    display: block;
    height: 32px;
    width: 200px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    background:#fff url(nav.gif);
    padding: 0;
}

#nav li a:hover, #nav li a:active {
    background:#000 url(nav.gif) 0 -32px;
    padding: 0;
}

 

Résultat

Avec les mêmes images que le menu horizontal:

 

 

Publié dans CSS

Commenter cet article

Vanille 25/08/2007 11:02

Je tente de faire un menu déroulant vertical ... Mais mon image ne semble pas être adaptée pourtant elle fait bien 20px x 64px

Modjokid :0054: 09/03/2007 19:11

Et bein c'est très bien sa :P

PêUR 09/03/2007 22:31

:)

sugi la fourmiz 05/03/2007 11:37

Kikou Guillaume
Chouette, un nouvel article ^o^

Et ben dis donc de la part de ces compagnies aérienne c'est je trouve scandaleux... pfff évidemment c'est toujours l'autre qui a tord!

Passe une très bonne semaine
Biz
Sugi la fourmiz

PêUR 05/03/2007 22:38

:)

R!D3uR45 04/03/2007 20:36

Sympha, merci :)

PêUR 04/03/2007 22:38

:)