Un menu latéral fixe personnalisable
Une astuce pour concevoir un menu latéral fixé (donc toujours visible), à droite ou à gauche, personnalisable dans une boite libre de GuppY.
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 l'article, 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 boite libre et de le fixer.
Cette recherche est dûe à une question de Han ... Auquel j'essaie de répondre toujours avec le plus d'efficacité possible.
Han me donnait comme exemple le menu de ce site : https://www.cordon.fr/. Je me suis très largement inspiré de celui-ci 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.
Pour ce premier menu (aligné à droite), vous trouverez au dessous la partie <style> </style> à copier-coller dans votre boite libre (ou éventuellement, sans les balises dans votre (ou vos) fichier(s) styleplus.css), cette partie est commentée le plus possible. Les classes sont nommées .menu-lat1 pour les différencier du second menu
Puis une partie qui contient les appels aux icônes, les liens... à copier-coller dans votre boite libre. Les icônes sur ce site sont situées dans un dossier img/NavLat/ mais, à vous d'adapter ces liens à votre configuration, bien sûr...
<style type="text/css">
.menu-lat1 .contenu_global { /* attribut du contenu */
z-index:1; /* important, choisir une valeur qui convient */
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:13px; /* taille de caractères */
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:#FFFFFF; /* couleur */
position:absolute;
right:-140px; /* position à droite au repos */
top:2px; /* 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; }
</style>
<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="img/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="img/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="img/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="img/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="img/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="img/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="img/NavLat/icone7.png" title="Lien n°7" />
<span>Lien n°7</span></a>
</div>
</div>
</div>
Pour ce deuxième menu (aligné à gauche), le code est similaire, en plus simple puisqu'il n'y a pas d'angle à fabriquer. Notez cependant que les classes sont nommées ici .menu-lat2.
<style type="text/css">
.menu-lat2 .contenu_global { /* attribut du contenu */
z-index:1; /* important, choisir une valeur qui convient */
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:13px; /* taille de caractères */
margin-bottom:5px; /* marge extérieure basse */
position:relative;
border-bottom: 2px solid rgba(64,0,0,0.5); /* bordure basse : épaisseur - nature - couleur */
border-right: 2px solid rgba(64,0,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:#FFFFFF; /* couleur */
left:-140px; /* position à gauche au repos */
top:2px; /* 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 à gauche */
transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat2 .item:nth-child(1) a{ background:#323232; }
.menu-lat2 .item:nth-child(2) a{ background:#4B4B4B; }
.menu-lat2 .item:nth-child(3) a{ background:#646464; }
.menu-lat2 .item:nth-child(4) a{ background:#7D7D7D; }
</style>
<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="img/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="img/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="img/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="img/NavLat/icone11.png" title="Lien n°11" />
<span>Lien n°11</span></a>
</div>
</div>
</div>
Il est bien sûr possible de personnaliser encore plus chaque item dans les règles :
.menu-latX .item:nth-child(Y) a { ... }
Pour installer proprement ce menu fixe sur un côté de votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §
§MenuNavLat par exemple...
et dans votre (ou vos) fichier(s) styleplus.css placez (en remplaçant FB123 par votre n° de boite libre) au moins cela :
.tblbox.FB123 { /* Corps boite MenuNavLat */
background: transparent;
}
Puis déclarez simplement en admin>Config boites, votre nouvelle boite libre sur une ligne du TopBoxes (boites du haut), avec un pourcentage d'occupation non nul (de 10% par exemple mais 1% suffit, ce qui laisse 99% pour les deux emplacements du reste de la ligne).
Ci-dessous, le code complet de la boite libre du menu latéral présente sur ce site pour information... (j'ai mis ci-dessous la plus grande largeur du lien déroulé (185px), mais sur le site, les largeurs ont été variées, comme les couleurs.
<style type="text/css">
.menu-lat .contenu_global{
z-index:1;
position:fixed;
top:135px;
right:0px;
}
.menu-lat a {
transition-duration: 0.6s;
padding:3px 5px;
height:30px;
line-height:30px;
width:42px;
float:right;
font-size:13px;
margin-bottom:5px;
position:relative;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 2px solid rgba(0,0,0,0.5);
border-left: 2px solid rgba(0,0,0,0.3);
border-radius:8px 0px 0px 8px;
box-shadow:0px 3px 10px rgba(0,0,0,0.7);
}
.menu-lat a {
display:block;
}
.menu-lat img {
position:absolute;
right:4px;
top:3px;
}
.menu-lat span {
position:absolute;
color:#FFFFFF;
font-weight:bold;
right:-140px;
top:2px;
}
.menu-lat a:hover {
width:185px;
}
.menu-lat a:hover span {
color:#FFFFFF;
font-weight:bold;
right:45px;
transition-duration: 0.6s;
}
.menu-lat .item:nth-child(1) a{ background:#1E2E2F; }
.menu-lat .item:nth-child(2) a{ background:#273E3F; }
.menu-lat .item:nth-child(3) a{ background:#304D4E; }
.menu-lat .item:nth-child(4) a{ background:#325152; }
.menu-lat .item:nth-child(5) a{ background:#375A5B; }
.menu-lat .item:nth-child(6) a{ background:#3C6162; }
.menu-lat .item:nth-child(7) a{ background:#446D6F; }
.menu-lat .item:nth-child(8) a{ background:#4B787A; }
.menu-lat .item:nth-child(9) a{ background:#508183; }
.menu-lat .item:nth-child(10) a{ background:#578B8E; }
</style>
<div class="menu-lat">
<div class="contenu_global">
<div class="item" style="clear:both;">
<a href="index.php" title="Accueil">
<img alt="Accueil" src="img/NavLat/accueil.png" title="Accueil" />
<span>Accueil</span></a>
</div>
<div class="item" style="clear:both;">
<a href="https://demoskins.71site.fr/index.php" target="_blank" title="Démo-skins">
<img alt="Démo-skins" src="img/NavLat/demoskins.png" title="Démo-skins" />
<span>Démo-skins</span></a>
</div>
<div class="item" style="clear:both;">
<a href="faq.php" title="FAQ">
<img alt="FAQ" src="img/NavLat/faq.png" title="FAQ" />
<span>FAQ</span></a>
</div>
<div class="item" style="clear:both;">
<a href="frtpc71.php" title="Forum">
<img alt="Forum" src="img/NavLat/forum.png" title="Forum" />
<span>Forum</span></a>
</div>
<div class="item" style="clear:both;">
<a href="links.php" title="Liens">
<img alt="Liens" src="img/NavLat/liens.png" title="Liens" />
<span>Liens</span></a>
</div>
<div class="item" style="clear:both;">
<a href="gstbk71.php" title="Livre d'or">
<img alt="Livre d'or" src="img/NavLat/livredor.png" title="Livre d'or" />
<span>Livre d'or</span></a>
</div>
<div class="item" style="clear:both;">
<a href="nws71.php" title="Nouvelles">
<img alt="Nouvelles" src="img/NavLat/nouvelles.png" title="Nouvelles" />
<span>Nouvelles</span></a>
</div>
<div class="item" style="clear:both;">
<a href="photorama.php" title="Photos">
<img alt="Photos" src="img/NavLat/photos.png" title="Photos" />
<span>Photos</span></a>
</div>
<div class="item" style="clear:both;">
<a href="plugins/Sommaire/Sommaire.php" title="Sommaire">
<img alt="Sommaire" src="img/NavLat/sommaire.png" title="Sommaire" />
<span>Sommaire</span></a>
</div>
<div class="item" style="clear:both;">
<a href="dwnld71.php" title="Téléchargements">
<img alt="Téléchargements" src="img/NavLat/telechargements.png" title="Téléchargements" />
<span>Téléchargements</span></a>
</div>
</div>
</div>
NB : Jean-Pierre ( jpleg ) qui me fait le plaisir d'utiliser aussi cette astuce a trouvé un moyen qu'un de ces liens simule le rôle du bouton "Retour" du navigateur. Merci à lui.
Le code utilise du javascript, aussi ne doit-il pas être désactivé. Voir ici :
thrd71.php?lng=fr&pg=387&cat=4#R4
En ayant "fabriqué" l'icône nécessaire, voilà le type de code que l'on pourrait ajouter :
<div class="item" style="clear:both;">
<a href="javascript:history.go(-1)" title="Retour">
<img alt="Retour.png" src="img/Mes_Icones/Retour.png" title="Retour" />
<span>Retour</span></a>
</div>
NB : Jérôme ( jerlal ) m'a signalé un petit souci de recouvrement lié au z-index mal placé... C'est corrigé dans les exemples ci-dessus. Un grand merci à lui .
Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.
Catégorie : Astuces - Changements au survol
Page lue 11115 fois