TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 105479 visiteurs

 2 visiteurs en ligne

Le menu est identifié par menuIcons.MIxx

  • Barre horizontale
  • Boîte latérale

Le style général de la barre horizontale du menu est dans ces lignes :

/********** block box Header Menu sections ******/
div.menuIcons { /* block menu */
    padding: 8px 0;
}
div.menuIcons ul { /* block liste du menu */
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
div.menuIcons ul li { /* toutes les sections */
    float: left;
    margin-right: 8px;
    text-align: center;
}
div.menuIcons ul li span { /* toutes les sections */
    display: block;
    white-space: nowrap;
}
div.menuIcons ul li.menu_flags { /* section drapeau */
    float: left;
    margin-right: 10px;
    text-align: center;
}
div.menuIcons ul li.menu_flags img { /* séparation drapeau */
    margin: 0;
}
div.menuIcons ul li.menu_admin { /* section admin */
    float: right;
    padding-right: 3px;
}
div.menuIcons ul li a span { /* lien */
    color: #000000;
    background-color: inherit;
    text-decoration: none;
    font: bold 11px Arial, Helvetica, sans-serif;
}
div.menuIcons ul li a span.current { /* lien actif */
    color:#FF0000;
    background-color: #000000;
    text-decoration: underline;
}
div.menuIcons ul li a:hover span { /* lien survolé*/
    color: #FF0000;
    text-decoration: underline;
    background-color: inherit;
    position: relative;  top: 1px;  left: 1px;
}

/*****************************************************************************/

Pour personnaliser le menu, par exemple si vous le mettez en haut et en bas du site et qu'il doit avoir un style différent.

Pour la position dans le bas de page (#BottomBoxes), ajouter ces lignes :

/********* MENU en bas *************/
div.menuIcons.MIB0 ul li a span { /* lien */
    color: #1e8fff;
    background-color: inherit;
    text-decoration: none;
    font: bold 11px Arial, Helvetica, sans-serif;
}
div.menuIcons.MIB0 ul li a span.current { /* lien actif */
    color:#000;
    background-color: #fff;
    text-decoration: underline;
}
div.menuIcons.MIB0 ul li a:hover span { /* lien survolé*/
    color: #FFcc00;
    text-decoration: underline;
    background-color: inherit;
    position: relative;  top: 1px;  left: 1px;
}
/************************************/

B pour #BottomBoxes

0 pour la configuration principale

Pour cacher le lien ADMIN, ajouter ces lignes :

div.menuIcons ul li.admin a span { /* lien */
    color: transparent;
}

Pour placer le lien ADMIN ailleurs que dans la barre de menu, modifier les lignes suivantes :

div.menuIcons ul li.menu_admin { /* section admin */
  position: absolute;
top: 5px; right: 3px; /*position absolue : en haut à 5 px et à droite à 3 px*/
}

On peut faire cette modification pour tous les items du menu, y compris les icônes qui sont créées :

div.menuIcons ul li.menu_home Accueil
div.menuIcons ul li.menu_forum Forum
div.menuIcons ul li.menu_blog Blog
div.menuIcons ul li.menu_faq Faq
div.menuIcons ul li.menu_links Liens
div.menuIcons ul li.menu_guestbook Livre d'or
div.menuIcons ul li.menu_news Nouvelles
div.menuIcons ul li.menu_photos Photos
div.menuIcons ul li.menu_download Téléchargement
div.menuIcons ul li.menu_monicone Nom de l'icône créée

Le style général du menu dans une boîte latérale est dans ces lignes :

/************ block box lateral Menu Sections ************/
ul.boxmenu { /* block liste */
    margin: 0;
    padding: 5px 0;
    list-style: none;
}
ul.boxmenu li { /* items de la liste */
    margin-bottom: 10px;
}
ul.boxmenu li .curr_item { /* item actif de la liste */
    margin-bottom: 10px;
}
ul.boxmenu li img { /* icones */
    vertical-align: middle;
    margin-right: 10px;
}
/***********************************************************/

 

Si aucune autre indication n'est spécifiée, les items auront les mêmes attributs que les items des articles.

Pour personnaliser le menu dans une boîte latérale, ajouter ces lignes :

ul.boxmenu li a { /*lien des items du menu*/
    color: #c00000;
}

ul.boxmenu .curr_item { /*item actif*/
   background: #1e8fff;
}

ul.boxmenu li.curr_item a span { /*couleur du lien de l'item actif*/
   color: #fff;
}

 

Mots-clés associés

Date de création : 27/06/2013 15:37
Dernière modification : 11/07/2013 16:47
Page lue 3819 fois


Vous êtes ici :   Accueil » Menu