Le menu principal

Pour obtenir l'aspect graphique sous forme d'onglet du menu principal, seule la définition de la classe main-menu est nécessaire.

Cliquez sur l'image pour l'agrandir

Comme nous le voyons sur l'image (issue d'une observation avec le plugin "firebug" d'un navigateur chrome ou firefox), cette classe est définie  dans la balise "ul" (définition  de liste) et s'applique aux balises  a (liens) existant à l'intérieur de cette liste : li (élément de liste).

 


 Le menu principal de navigation

 
ul.main-menu  li  a  {
    display: block;
    float: right;
    text-align: center;
    text-decoration: none;
    margin: 1.5em -0.2em -1em;
    padding: 1em 1em;
    border: 1px solid black;
    border-radius: 15px 15px 0 0;
    color:#333;
    background-color:#CCC;
    font-weight: bolder; 
    }

 

Commence à afficher le plus à droite

 

 

affiche un rectangle avec les bords

supérieurs arrondis

 

 

   

En hml5 ( voir mon thème en html5), l'utilisation de la balise >nav>  ou avec plus de finesse <nav[role="menu-principal"]>, nous donne le même résultat.

nav[role="menu-principal"] ul li a
{      
display: block;
    float: right;
    text-align: center;
    text-decoration: none;
    margin: 1.5em -0.2em -1em;
    padding: 1em 1em;
    border: 1px solid black;
    border-radius: 15px 15px 0 0;
    color:#333;
    background-color:#CCC;
    font-weight: bolder;
}


 

-*- mar 31/12/2013 - 11:44 -*-
dhumbert