Menu Burger: Modifier Liens (noms et directions) et en ajouter !?

[Nounouk 85/04]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://anaaga.forumactif.com/

Description du problème

Bonjour,
j'aimerai adapter un peu mieux le Menu Burger à notre Site Web et Forum, et "quelque part" le simplifier un peu, car nos adhérents ont entre 25 et 90 ans, et ce n'est pas toujours simple pour certains d'entre eux, de naviguer sur le net !
Alors j'aimerai par exemple que:
- "Accueil" soit modifié par "Site Web ANAAGA" et renvoi à l’accueil du site (http://anaaga.forumactif.com)
- Supprimer le lien "Portail"

J'ai réussi à ajouter un lien "Accès au Forum" grâce aux informations données ici:
https://forum.forumactif.com/t398844-awesomebb-comment-ajouter-un-lien-dans-le-menu-burger

Voilà ! Tout est dit, en espérant qu'une solution existe !
Merci à tous par avance !

[Invité]

Hello Nounouk 85/04,

alors ce script devrait répondre à tes attentes:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur toutes les pages.


Déposes ceci:

Code:


$(function(){$(function(){
$('#main-menu ul li  a[href]:first').each(function(){
$(this).attr('href','http://anaaga.forumactif.com');
$(this).find('span').text('Site Web ANAAGA');
$(this).closest('li').next().remove();});})});




Penses a cliquer sur le bouton VALIDER


a++

[Nounouk 85/04]

Merci infiniment Milouze14, ça fonctionne parfaitement ! Nickel !

Mais j'aimerai aussi (si ce n'est pas trop demandé) éclaircir quelque peu les icônes ci dessous !
Je veux dire par là, espacer mon icone képi "Menu" du bord de page, et savoir si c'est possible comment modifier les deux autres icônes, et les espacer également ?

Merci d'avance !
 

[Invité]

Hello Nounouk 85/04,

Dans le template overall_header:
Affichage/Templates/Général/ overall_header


Recherches ceci ligne 122 environ:

Code:


 <ul id="header-navigation">
        <li><a id="navigation-home" href="/forum"><i class="material-icons">apps</i>{L_FORUM}</a></li>
        <li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
    </ul>


Ce bouton :




Correspond à:

Code:

<i class="material-icons">apps</i>

Et celui-ci:



à:

Code:

<i class="material-icons">comment</i>

Il suffit d'aller sur ce site:
https://material.io/tools/icons/?style=baseline

Trouves les icônes souhaitées, repères le texte en dessous de chacune et de modifier les textes:
apps et comment par ceux choisis.

Exemple avec:

Code:


<ul id="header-navigation">
        <li><a id="navigation-home" href="/forum"><i class="material-icons">home</i>{L_FORUM}</a></li>
        <li><a id="navigation-recent" href="/latest"><i class="material-icons">add_comment</i>{L_TOPICS}</a></li>
    </ul>


Tu auras cette apparence:



Et voilou    .

a++

[Adam_sfp]

Bonjour

Je profite de la réponse de @Milouze14 (que je salue au passage ) pour faire un petit complément
Si des  fois vous voulez également changer la taille et mettre de la couleur pour plus de visibilité
En prenant les infos du guide de Material Icons


Vous pouvez définir des tailles en ajoutant ceci dans votre css

Code:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Vous pouvez également définir la couleur dans votre css
par exemple

Code:

.material-icons.orange600 { color: #FB8C00; }

Ensuite pour l'appliquer en prenant l'exemple de cette ligne

Code:

<li><a id="navigation-home" href="/forum"><i class="material-icons">home</i>{L_FORUM}</a></li>

Pour changer la taille et la couleur on ajoute

Code:

md-48

et

Code:

orange600

A la class Material icons pour avoir

Code:

 <li><a id="navigation-home" href="/forum"><i class="material-icons md-48 orange600">apps</i>{L_FORUM}</a></li>

*

comment modifier les deux autres icônes, et les espacer également ?

Pour les espacer peut être en ajoutant ceci dans cotre CSS et en changeant la valeur 52 par votre choix...

Code:


#navigation-recent {
         padding: 0 52px!important;
                             }

#navigation-home {
         padding: 0 52px!important;
                            }


Cdt.

*Si vous voulez "pousser" plus loin la personnalisation Materialize est un bon complément à Material Icons  ;-) * Si il n'y a pas de conflit avec la version Awesomebb j'ai pas tout testé ;-)

[Invité]

Hello Adam_sfp,
merci pour ce complément, on ne peut pas faire plus clair .

a++

[Nounouk 85/04]

Merci beaucoup à tous pour ces informations !
J'ai encore d'autres questions sur le menu Burger, mais j'ouvrirai un nouveau sujet en tant utile !
Encore Merci