[PBTV5.X] Ajout d'un menu en Flat icons sur barre

Introduction



Un petit menu sympa et rapide à mettre en place, qui améliore la navigation sans pour autant être gênant pour un format adaptatifs.
Il fonctionne avec la collection d'icônes FontAwesome, intégré directement dans la V5 de PHPBoost.

Le visuel





Avertissement



Avant toutes modifications de votre site, pensez à faire une sauvegarde de votre thème.

Le fichier body.tpl



Commençons ..
Dans la racine de votre thème se trouve le body.tpl, Ouvrez le ...
Sous la fermeture de la balise header "</header>" ajouter ceci :

Code TPL :
 
    <section id=EDN-menu-body> 
        <article id="EDN-menu-icons" class="menu-blocks">
            <div class="fa-menu"><a href="#"><i class="fa fa-tachometer" aria-hidden="true"></i></a></div>
            <div class="fa-menu"><a href="#"><i class="fa fa-address-card" aria-hidden="true"></i></a></div>
            <div class="fa-menu"><a href="#"><a href="#"><i class="fa fa-calendar" aria-hidden="true"></a></i></div>
            <div class="fa-menu"><a href="#"><i class="fa fa-book" aria-hidden="true"></i></a></div>
            <div class="fa-menu"><a href="#"><i class="fa fa-desktop" aria-hidden="true"></i></a></div>
            <div class="fa-menu"><a href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
            <div class="fa-menu"><a href="#"><i class="fa fa-camera-retro" aria-hidden="true"></i></a></div>            
             <div class="fa-menu"><a href="#"><i class="fa fa-flask" aria-hidden="true"></i></a></div>
             <div class="fa-menu"><a href="#"><i class="fa fa-gift" aria-hidden="true"></i></a></div>            
        </article>
    </section>
 


Enregistrer et fermer.

Bien sur dans les Href, vous pouvez placer vos liens ^^

Le fichier design.css



Dans le dossier "/templates/MON-THEME/theme/", Ouvrez le "design.css" allez à la fin.
Ensuite copier/coller ceci :

Code CSS :
 
/* -- section EDN-menu -- */
/* ------------------------------ */
section#EDN-menu-body {
    background: #efefef none repeat scroll 0 0; /* Couleur de fonds de la barre */
    min-height: 120px;
    min-width: 100%;
    padding: 10px 0 0 10px;
}
article#EDN-menu-icons {
/*  display: inline;
   padding: 25px 0 0 5px;*/
    margin: auto;
    width: 100%;
}
.menu-blocks{
    clear: none !important;
}
.fa-menu {
    background-color: #ffffff; /* Couleur de fonds des icons */
    border-radius: 5px;
    display: inline-block;
    font-size: 80px;
    margin: 0 9px 0 0; /* Espacement entre les icons */
    min-height: 100px;
    min-width: 100px;
    padding: 0 0 0 5px;
    text-align: center;
}
.fa-menu > a {color:#222222; transition: all 0.2s ease 0s;}  /* Couleur des icons flats */
.fa-menu > a:hover {color:#c6aa57;} /* Couleur des icons flats au survole */
@media (max-width:768px) {
/* Le menu disparaît en site web adaptatif (gsm) */
section#EDN-menu-body {
position: absolute;
left: -9999em;
}
}
 


Enregistrer et fermer.

Et pour finir ...



Important: N'oubliez pas de rafraîchir vos cache dans l'administration/Outils/Cache ==> TPL et CSS !

Si vous avez des questions, n'hésitez pas à les poser sur le forum :)




Liens connexes

- [PBTV5.X] Ajout d'un menu en Flat icons sur boutons ronds
- [PBTV5.X] Ajout d'un menu en flat icons sur boutons carrés

Créé le 01/02/2017, par Swan

Cette page a été consultée 266 fois