Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Animations au survol - Un menu horizontal
→ Un menu horizontal dont les icônes se déploient lors du survol de la souris pour faire apparaitre le titre.
C'est le procédé qui est visible dans la barre de menu de la partie démos de 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. Il n'apparaît qu'en Web, son activité est suspendue en Mobile via le fichier de style style.css. (voir plus bas une astuce pour supprimer son apparition en Mobile).
L'origine de ce procédé, est utilisé sous le nom de menuhaut, par jac83 sur son site. Ce type de procédé peut être rencontré sous des formes similaires ailleurs...
J'ai trouvé le procédé amusant, très simple à mettre en place, et j'ai apporté quelques très simples variations (individualisations possibles des largeurs et des fonds).
Cet exemple, dont le code est détaillé et commenté le plus possible, a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte ou bien dans un fichier spécifique comme c'est le cas ici (nommé animsurvol_menu_horizontal.css) dont l'appel au début du code source est le suivant :
<link charset="utf-8" href="skin/css/animsurvol_menu_horizontal.css" rel="stylesheet" />
.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;
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:200px;}
.menu-horizontal:nth-child(2):hover {width:165px;}
.menu-horizontal:nth-child(3):hover {width:165px;}
.menu-horizontal:nth-child(4):hover {width:130px;}
.menu-horizontal:nth-child(5):hover {width:115px;}
.menu-horizontal:nth-child(6):hover {width:80px;}
.menu-horizontal:nth-child(7):hover {width:115px;}
.menu-horizontal-titre { /* attributs titres */
margin-left:5px; /* marge extérieure gauche */
width:200px; /* 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;
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 */
}
Les transitions ci-dessus sont de deux types : opacité et échelle, mais on peut n'utiliser que l'un ou l'autre.
Ci-dessous, la seconde partie, détaille le contenu et les liens du menu, à placer où vous le souhaitez dans la page ou la boîte :
<div class="conteneur-menu-horizontal">
<div class="menu-horizontal" title="Courriers & emails"><a href="index.php"><img src="images/tutoriels/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="images/tutoriels/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="images/tutoriels/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="images/tutoriels/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="images/tutoriels/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="images/tutoriels/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="images/tutoriels/NavLat/icone7.png" /></a>
<div class="menu-horizontal-titre"><a href="index.php">Réglages</a>
</div>
</div>
</div><!-- fin conteneur-menu-horizontal -->
Notez que deux liens sont présents à chaque fois pour le titre et pour l'icône associée. Ici, les liens [a href... ]...[/a] pointe sur index.php. Vous placez vos propres liens et vos cibles.
Mes icônes sont placées dans un dossier tutoriels/NavLat placé dans le dossier images d'adHoc. Il vous faut adapter les chemins à vos propres images, évidemment...
title=".............." sert à renseigner l'info-bulles qui apparait au survol (on peut le supprimer).
→ Astuce pour ne pas afficher la boîte qui contient ces boutons en affichage mobile :
Imaginons que vous ayez déclaré cette boîte en premier (donc position 0), dans la section horizontale UpTab de la page _index. Il faut éditer votre feuille de style style.css et dans une des deux parties (à votre choix) :
@media screen and (max-width: 900px) {...}
@media screen and (max-width: 480px) {...}
Vous ajoutez cette règle :
#UpTab-0 {display:none;} /*ne pas afficher la boite menu latéral fixe en mobile*/
NB : Si vous souhaitez que ce menu soit en Web sur la page _index ET sur la page _default, il faut bien sûr que la section horizontale concernée soit déclarée dans les fichiers _index.inc et _default.inc de votre skin.
Dans la partie démos de ce site, ce menu horizontal a été placé en deuxième position du head-btm : header, ligne du bas après le menu (cette section est présente pour toutes les pages du site). Me contacter, si vous souhaitez le placer ainsi. Il y a quelques lignes supplémentaires de style à rédiger, mais rien d'insurmontable...
Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.