5 façons de styler un menu sans images

Les menus de navigations sont conçu avec des liste ul li et d'un titre h1, h2 ou h3, généralement on y ajoute des images pour rendre le tout "joli" mais avec un peu d'astuce, de bordure et de couleur on peut très bien réaliser des menu de navigations tout à fait utilisable sans utiliser d'image, voici 5 exemples de ce que l'on peut faire avec les css sur un même code html.

d'abord voyons le code html il est très simple et donc propre :

    <h2>titre</h2>
    <ul>
        <li><a href="#">lien un</a></li>
        <li><a href="#">lien deux</a></li>
        <li><a href="#">lien trois</a></li>
        <li><a href="#">lien quatre</a></li>
        <li><a href="#">lien cinq</a></li>
    </ul>

on remarque un titre h2 qui contient le titre du menu (navigation, catégories, rubrique, etc.) puis une liste ul et li et bien sur des liens, maintenant voyons les css que l'on peut utiliser.

Premier style

 h2 {
    margin:0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#fff;
    background-color:#2c2c2c;
    border-bottom: 1px solid #eee;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    border-bottom:2px solid #2c2c2c;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#eee;
    color:#2c2c2c;
    text-transform:capitalize;
}
li a:hover {
    color:#fff;
    background-color:#2c2c2c;
}

A noter que le code html peut pour plus de souplesse être placé dans un élément div avec un id genre "sidebar", "zonemenu" etc. et dans ce cas le #id peut être placé devant chaque style pour que ceux ci n'interfère pas sur les autre ul li a de la page

Second style

 h2 {
    margin:0 0 6px 0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#9A1948;
    border-bottom: 1px solid #9A1948;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#fff;
    color:#2c2c2c;
    text-transform:capitalize;
}
li a:hover {
    border-left:6px solid #9A1948;
    padding-left:4px;
}

Ici on utilise la propriété border pour avoir un effet au survol des liens

Troisième style

 h2 {
    margin:0 0 6px 0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:green;
    border-top: 2px solid green;
    border-bottom: 2px solid green;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    text-align: center;
    padding:2px 0;
    margin:0;
    background:none;
    display:block;
    width:160px; 
    background-color:#fff;
    color:green;
    text-transform:capitalize;
}
li a:hover {
    color:#fff;
    background-color: green;
}

Quatrième style

h2 {
    margin:0 0 5px 0;
    padding:3px 0 3px 10px;
    text-transform:uppercase;
    font-size:16px;
    width:130px;
    border-left:30px solid orange;
    color:orange;
    background-color:#fff;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:150px;
    background-color:#fff;
    color:orange;
    text-transform:capitalize;
    border-bottom:2px solid #fff;
}
li a:hover {
    border-bottom:2px solid orange;
}

Ici la couleur peut être utilisée pour différencier plusieurs rubriques.

Cinquième style

h2 {
    margin:0;
    padding:5px 0;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:3px;
    text-align: center;
    width:160px;
    color:#fff;
    background-color:#bbcc00;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    border-bottom:2px solid #bbcc00;
    width:160px;
}
li {
    padding:0;
    margin:0;
}
li a {
    text-decoration:none;
    padding:2px 0 2px 10px;
    margin:0;
    background:none;
    display:block;
    width:139px;
    background-color:#fff;
    color:#000;
    text-transform:capitalize;
    border-left:10px solid #bbcc00;
    border-right:1px solid #bbcc00;
}
li a:hover {
    padding:2px 5px 2px 10px;
    border-left:5px solid #bbcc00;
}

Cette fois encore pas d'image uniquement l'utilisation de bordure et de couleur de fond.