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 latéral fixe personnalisable
→ Un menu latéral personnalisable que l'on peut fixer à gauche ou à droite du site.
C'est le type de menu qui est visible sur la droite de ce site. Sur celui-ci, les liens reprennent ceux du menu de navigation pour montrer le fonctionnement. Mais chacun peut mettre les liens souhaités.
Ci-dessous dans la page, deux exemples qui sont détaillés. Ils ne sont pas fixés évidemment, mais il est très facile de reprendre le code source, de le placer dans une boîte et de le fixer en Web et d'annuler son action en Mobile (voir en bas de la page).
Je me suis très largement inspiré du menu de ce site même si ce type de menu se trouve assez souvent présent sur des sites et qu'il est difficile d'en créditer un auteur en particulier.
Ci-dessous, le code du style utilisé, à placer dans une partie [style type="text/css"]...[/style] au début de votre code source ou dans un fichier spécifique comme c'est le cas ici.
.menu-lat1{ /* mettre une valeur élevée pour que le menu soit superposé au reste */
z-index:5000;
}
.menu-lat1 .contenu_global{ /* attribut du contenu */
position:relative; /* mettre fixed pour fixer ce menu */
top:0px; /* position en hauteur */
right:150px; /* position à droite, mettre 0px pour fixer sur le bord droit */
}
.menu-lat1 a{ /* attribut du lien */
transition-duration: 0.6s; /* durée de l'animation */
padding:3px 5px; /* marges intérieures */
height:32px; /* hauteur */
line-height:32px; /* hauteur de ligne */
width:42px; /* largeur */
float:right; /* placé à droite */
font-size:15px; /* taille de caractères */
font-weight:bold;
margin-bottom:5px; /* marge extérieure basse */
position:relative;
border-bottom: 2px solid rgba(0,0,0,0.5); /* bordure basse : épaisseur - nature - couleur */
}
.menu-lat1 a:before { /* attribut du lien pour l'angle */
content: ''; /* important dans ce cas, ne pas ôter */
border-left: 15px solid transparent; /* permet l'angle */
position: absolute;
top: 0; left:-15px; /* permet l'angle : même valeur que ci-dessus */
}
.menu-lat1 a{
display:block;
}
.menu-lat1 img{ /* attribut de l'image */
position:absolute;
right:4px; /* position à droite */
top:3px; /* position en hauteur */
}
.menu-lat1 span{ /* attribut du texte */
color:transparent; /* couleur */
position:absolute;
right:-140px; /* position à droite au repos */
top:0px; /* position en hauteur */
}
.menu-lat1 a:hover{ /* attribut du lien survolé */
width:110px; /*largeur*/
}
.menu-lat1 a:hover span{ /* attribut du lien (texte) survolé */
color:#000000; /* couleur */
right:42px; /* position à droite */
transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat1 .item:nth-child(1) a{ background:#CFAEFB; }
.menu-lat1 .item:nth-child(2) a{ background:#9C65E0; }
.menu-lat1 .item:nth-child(3) a{ background:#4FA7FF; }
.menu-lat1 .item:nth-child(4) a{ background:#84FF84; }
.menu-lat1 .item:nth-child(5) a{ background:#FFFF6F; }
.menu-lat1 .item:nth-child(6) a{ background:#FFCB8A; }
.menu-lat1 .item:nth-child(7) a{ background:#FE978B; }
/* permet l'angle, même couleur que ci-dessus */
.menu-lat1 .item:nth-child(1) a:before{ border-top:28px solid #CFAEFB; }
.menu-lat1 .item:nth-child(2) a:before{ border-top:28px solid #9C65E0; }
.menu-lat1 .item:nth-child(3) a:before{ border-top:28px solid #4FA7FF; }
.menu-lat1 .item:nth-child(4) a:before{ border-top:28px solid #84FF84; }
.menu-lat1 .item:nth-child(5) a:before{ border-top:28px solid #FFFF6F; }
.menu-lat1 .item:nth-child(6) a:before{ border-top:28px solid #FFCB8A; }
.menu-lat1 .item:nth-child(7) a:before{ border-top:28px solid #FE978B; }
Et, le code à placer ensuite dans votre boîte, éventuellement votre page à adapter évidemment : mes images sont dans un dossier tutoriels/NavLat situé dans le dossier images d'adHoc et ici les liens sont juste indicatifs...
<div class="menu-lat1">
<div class="contenu_global">
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°1"><img alt="Lien n°1" src="images/tutoriels/NavLat/icone1.png" title="Lien n°1" /><span>Lien n°1</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°2"><img alt="Lien n°2" src="images/tutoriels/NavLat/icone2.png" title="Lien n°2" /><span>Lien n°2</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°3"><img alt="Lien n°3" src="images/tutoriels/NavLat/icone3.png" title="Lien n°3" /><span>Lien n°3</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°4"><img alt="Lien n°4" src="images/tutoriels/NavLat/icone4.png" title="Lien n°4" /><span>Lien n°4</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°5"><img alt="Lien n°5" src="images/tutoriels/NavLat/icone5.png" title="Lien n°5" /><span>Lien n°5</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°6"><img alt="Lien n°6" src="images/tutoriels/NavLat/icone6.png" title="Lien n°6" /><span>Lien n°6</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°7"><img alt="Lien n°7" src="images/tutoriels/NavLat/icone7.png" title="Lien n°7" /><span>Lien n°7</span></a>
</div>
</div><!-- fin contenu global -->
</div><!-- fin menu-lat1 -->
Pour ce deuxième menu (aligné à gauche), les codes au dessous sont assez similaires, en plus simple puisqu'il n'y a pas d'angle à fabriquer. Notez cependant que les classes sont nommées ici .menu-lat2.
.menu-lat2{ /* mettre une valeur élevée pour que le menu soit superposé au reste */
z-index:5000;
}
.menu-lat2 .contenu_global{ /* attribut du contenu */
position:relative; /* mettre fixed pour fixer ce menu */
top:0px; /* position en hauteur */
left:150px; /* position à gauche, mettre 0px pour fixer sur le bord gauche */
}
.menu-lat2 a{ /* attribut du lien */
transition-duration: 0.6s; /* durée de l'animation */
padding:3px 5px; /* marges intérieures */
height:32px; /* hauteur */
line-height:32px; /* hauteur de ligne */
width:42px; /* largeur */
float:left; /* placé à gauche */
font-size:15px; /* taille de caractères */
font-weight:bold;
margin-bottom:5px; /* marge extérieure basse */
position:relative;
border-bottom: 2px solid rgba(255,128,0,0.5); /* bordure basse : épaisseur - nature - couleur */
border-right: 2px solid rgba(255,128,0,0.3); /* bordure droite : épaisseur - nature - couleur */
border-radius:0px 4px 12px 0px; /* arrondis : ici en haut et en bas à droite */
}
.menu-lat2 a{
display:block;
}
.menu-lat2 img{ /* attribut de l'image */
position:absolute;
left:4px; /* position à gauche */
top:3px; /* position en hauteur */
}
.menu-lat2 span{ /* attribut du texte */
position:absolute;
color:transparent; /* couleur */
left:-140px; /* position à gauche au repos */
top:0px; /* position en haut */
}
.menu-lat2 a:hover{ /* attribut du lien survolé */
width:120px; /*largeur*/
}
.menu-lat2 a:hover span{ /* attribut du lien (texte) survolé */
color:#FFFFFF; /* couleur */
left:42px; /* position à droite */
transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat2 .item:nth-child(1) a{ background:#A5351A; }
.menu-lat2 .item:nth-child(2) a{ background:#BF3E1E; }
.menu-lat2 .item:nth-child(3) a{ background:#D94622; }
.menu-lat2 .item:nth-child(4) a{ background:#E6775B; }
<div class="menu-lat2">
<div class="contenu_global">
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°8"><img alt="Lien n°8" src="images/tutoriels/NavLat/icone8.png" title="Lien n°8" /><span>Lien n°8</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°9"><img alt="Lien n°9" src="images/tutoriels/NavLat/icone9.png" title="Lien n°9" /><span>Lien n°9</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°10"><img alt="Lien n°10" src="images/tutoriels/NavLat/icone10.png" title="Lien n°10" /><span>Lien n°10</span></a>
</div>
<div class="item" style="clear:both;"><a href="index.php" title="Lien n°11"><img alt="Lien n°11" src="images/tutoriels/NavLat/icone11.png" title="Lien n°11" /><span>Lien n°11</span></a>
</div>
</div><!-- fin contenu global -->
</div><!-- fin menu-lat2 -->
Pour cette page, j'ai nommé le fichier de style animsurvol_menu_lateral.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :
<link charset="utf-8" href="skin/css/animsurvol_menu_lateral.css" rel="stylesheet" />
→ Astuce pour ne pas afficher la boîte qui contient ce menu 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.
Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.