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

Introduction



Toujours ce même menu revu encore sous un autre angle ..
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 {
    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: #158517; /* Couleur de fonds des icons */
    border-radius: 30px;
    display: inline-block;
    font-size: 50px;
    margin: 0 8px 0 0; /* Espacement entre les icons */
    min-height: 100px;
    min-width: 100px;
    padding: 15px 0 0 5px;
    text-align: center;
    border:5px solid #c6aa57;/* Couleur de la bordure du fonds des icons */
}
.fa-menu > a {
    color:#ffffff;  /* Couleur des icons flats */
    transition: all 0.2s ease 0s;
}
.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 barre
- [PBTV5.X] Ajout d'un menu en Flat icons sur boutons ronds

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

Cette page a été consultée 2249 fois