Liens onglets à l'horizontale
Des liens sur des onglets à l'horizontale
Dans le fichier styleplus.css de votre skin, vous ajoutez le style ci-dessous:
/* Ajouter au styleplus.css */ /********* ONGLETS *******/ ul.onglets { width: 100% ;} ul.onglets li { display:block;width: 12%;height: auto;float: left;} ul.onglets li[float="left"] + li { float:none; } .onglets li { font: bold 16px Arial, Helvetica, sans-serif;background-color:#fff;color: #BB8060;border: 1px solid #BB8060; border-radius: 8px;margin:8px;padding:5px;display:block;text-align:center; } .onglets li:hover { font: bold 16px Arial, Helvetica, sans-serif;background-color:#BB8060;color: #fff !important; border: 1px solid #BB8060;border-radius: 8px; } .onglets a { color:#BB8060; } .onglets a:hover { font-weight: bold;color: #fff !important; } /********* FIN ONGLETS *******/
Vous pouvez modifier :
- la taille des onglets en modifiant width; 12%; en remplaçant 12% par la largeur souhaitée,
- la police, la couleur du texte, la couleur du background.
Sans rien modifier, vous devez avoir le même affichage que sur la copie d'écran ci-dessus.
Dans chaque article ou document vous devez ajouter au début ou à la fin le code pour afficher les liens comme ci-dessous :
/* Ajouter au début ou à la fin de chaque article concerné par un lien */ <div style="text-align:center;width:100%;margin:auto;"> <ul class="onglets"> <li><a href="articles.php?lng=fr&pg=509#z2">Préambule</a></li> <li><a href="articles.php?lng=fr&pg=8#z2">Présentation</a></li> <li><a href="articles.php?lng=fr&pg=9#z2">Installation</a></li> <li><a href="articles.php?lng=fr&pg=407#z2">Mise à jour</a></li> <li><a href="articles.php?lng=fr&pg=10#z2">Configuration</a></li> <li><a href="articles.php?lng=fr&pg=55#z2">Habillage</a></li> <li><a href="articles.php?lng=fr&pg=13#z2">Notes</a></li> <li><a href="articles.php?lng=fr&pg=14#z2">Licence</a></li> <li><a href="articles.php?lng=fr&pg=15#z2">Nous rejoindre</a></li> <li><a href="articles.php?lng=fr&pg=418#z2">Scripts</a></li> <li><a href="articles.php?lng=fr&pg=412#z2">Merci</a></li> </ul> </div> <div style="clear:both"></div> /* Fin ajout article */
Vous devez remplacer le pg=509 par pg=ID de votre article, et bien sûr le texte à afficher sur l'onglet.
Ceci fonctionne avec tous les types de document à la condition de mettre le bon lien.
à suivre
Date de création : 06/11/2018 @ 23:11
Catégorie : Astuces GuppY - GuppY 5
Page lue 5433 fois