[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

Preview

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