En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Un menu haut...rizontal personnalisable
 
 
 
    Imprimer la page...
    Imprimer la section...

Un menu haut...rizontal personnalisable

Un menu horizontal dont les icônes se déploient lors du survol de la souris
pour faire apparaitre un titre.

C'est le procédé qui est visible un peu plus haut sur ce site. Sur celui-ci, les contenus reprennent les liens du menu de navigation et du menu latéral fixe avec les mêmes icônes. C'est uniquement pour en montrer le fonctionnement.

Un menu haut...rizontal... Ce mauvais jeu de mot pour rappeler, l'origine de ce procédé, utilisé sous le nom de menuhaut, par jac83 sur son site. Ce type de procédé peut sans doute être rencontré sous des formes similaires ailleurs...

J'ai trouvé le procédé amusant, simple à mettre en place, et j'ai apporté quelques très simples variations (individualisations possibles des largeurs variables et des fonds).

Ci-dessous un exemple, dont le code est détaillé et commenté le plus possible, avec une première partie <style> </style> à mettre au début de l'article ou de la boite libre ou bien sans les balises <style type="text/css"> et </style> dans votre fichier styleplus.css. Et une seconde partie, détaillant le contenu et les liens du menu, à placer où vous le souhaitez dans l'article ou la boite libre.

<style type="text/css">
.conteneur-menu-horizontal { /* attributs du conteneur */
position:relative; /* mettre éventuellement
fixed pour fixer ce menu et le doter d'une position dans la page :
par exemple ci-dessous
top:20px;
left:20px;
*/
height:26px; /* hauteur */
margin:15px 0 0 15px; /* marges extérieures */
}

.menu-horizontal { /* attributs d'un item du menu */
text-align:center;
margin-right:8px; /* marge extérieure droite */
padding:2px; /* marges intérieures */
float:left;
/*background:#XXXXXX;*/ /* pour fixer un background pour tous en remplacement de la série d'individualisation */
position:relative;
width:40px; /* largeur */
height:30px; /* hauteur */
border:2px solid #b4b4b4; /* bordure : épaisseur nature couleur */
border-radius:10px; /* arrondis */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;       
transition: all 1s ease; /* transition : temps et nature */
}

/* série d'individualisation des backgrounds -à supprimer éventuellement- */
.menu-horizontal:nth-child(1) {background:#CFAEFB;}
.menu-horizontal:nth-child(2) {background:#9C65E0;}
.menu-horizontal:nth-child(3) {background:#4FA7FF;}
.menu-horizontal:nth-child(4) {background:#84FF84;}
.menu-horizontal:nth-child(5) {background:#FFFF6F;}
.menu-horizontal:nth-child(6) {background:#FFCB8A;}
.menu-horizontal:nth-child(7) {background:#FE978B;}

.menu-horizontal:hover .menu-horizontal-titre { /* item menu et titre visibles lorsque item survolé */
opacity:1; /* 1 : donc visible */
transform:scale(1); /* échelle 1 : donc visible */
}

.menu-horizontal:hover { /* attributs item menu survolé */
text-align:right;
/*width:XXXpx;*/ /* pour fixer une largeur pour tous en remplacement de la série d'individualisation */
/*background:#XXXXXX;*/ /* pour fixer un background pour tous */
box-shadow:-1px 1px 1px #1b1b1b; /* ombre portée -peut être supprimée- */
}

/* série d'individualisation des largeurs des items menus survolés -à supprimer éventuellement */
.menu-horizontal:nth-child(1):hover {width:180px;}
.menu-horizontal:nth-child(2):hover {width:155px;}
.menu-horizontal:nth-child(3):hover {width:150px;}
.menu-horizontal:nth-child(4):hover {width:120px;}
.menu-horizontal:nth-child(5):hover {width:110px;}
.menu-horizontal:nth-child(6):hover {width:80px;}
.menu-horizontal:nth-child(7):hover {width:110px;}
 
.menu-horizontal-titre { /* attributs titres */
margin-left:5px; /* marge extérieure gauche */
width:170px; /* largeur du titre non survolé (au moins la largeur maximum des individualisations */
position: absolute;
bottom:0px; /* position basse */
text-align: left;
vertical-align:middle; /* alignement vertical au milieu */
line-height:26px; /* hauteur */
opacity:0; /* 0 : donc non visible */
transform:scale(0); /* échelle 0 : donc non visible */
transform-origin:30px 50%; /* origine de la transformation : ici à 30px à droite, 50% de la hauteur */
-webkit-transition: all 1.1s ease;
-moz-transition: all 1.1s ease;
-ms-transition: all 1.1s ease;       
transition: all 1.1s ease; /* transition : temps et nature */
}
.menu-horizontal-titre a, .menu-horizontal-titre a:hover { /* attributs des liens et liens survolés */
text-decoration:none;
font-weight:bold; /* en gras */
color: #000000; /* couleur */
}
</style>


<div class="conteneur-menu-horizontal">
    <div class="menu-horizontal" title="
Courriers & emails"><a href="index.php"><img src="img/NavLat/icone1.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Courriers et e-mails</a></div>
    </div>

    <div class="menu-horizontal" title="Les statistiques"><a href="index.php"><img src="img/NavLat/icone2.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les statistiques</a></div>
    </div>

    <div class="menu-horizontal" title="Les documents"><a href="index.php"><img src="img/NavLat/icone3.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les documents</a></div>
    </div>

    <div class="menu-horizontal" title="Les vidéos"><a href="index.php"><img src="img/NavLat/icone4.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les vidéos</a></div>
    </div>

    <div class="menu-horizontal" title="Les liens"><a href="index.php"><img src="img/NavLat/icone5.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les liens</a></div>
    </div>

    <div class="menu-horizontal" title="GPS"><a href="index.php"><img src="img/NavLat/icone6.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">GPS</a></div>
    </div>

    <div class="menu-horizontal" title="Réglages"><a href="index.php"><img src="img/NavLat/icone7.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Réglages</a></div>
    </div>
</div>

Mes icônes sont dans le dossier img/NavLat, il faut adapter à votre configuration. Les liens renvoient tous à index.php, là aussi, il faut adapter. title=".............." sert à renseigner l'info-bulles qui apparait au survol (on peut le supprimer, éventuellement).

On peut fixer ce menu, mais la possibilité de le faire dans une boite libre en haut dans l'admin de GuppY est plus simple bien sûr...

Les transitions ci-dessus sont de deux types : opacité et échelle, mais on peut n'utiliser que l'un ou l'autre. Dans le menu équivalent du site, il n'y a que opacité.

----------=====+++++=====----------

Comme d'habitude, pour installer proprement ce menu sur votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §

§MenuHorizontal par exemple...

et dans votre fichier styleplus placez (en remplaçant FB888 par votre n° de boite libre) au moins cela :

.tblbox.FB888  {  /* Corps boite MenuHorizontal */
    background: transparent;   
}

Puis déclarez simplement votre nouvelle boite libre sur une ligne du Topboxes (boites du haut) avec le pourcentage d'occupation souhaité (de 75% par exemple)...

Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site. 


Date de création : 12/08/2017 @ 10:06
Catégorie : Astuces - Changements au survol
Page lue 47724 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !