Avoir la même barre de navigation que forumactif

[Archimus]

Détails techniques

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

Description du problème

Bonjour,

Comment modifier le CSS pour avoir la même barre de navigation le forum support de Forumactif ?

Merci d'avance,
Bonne journée

[Invité]

Bonjour,

En faisant des recherches sur le net on peut trouver plusieurs résultats,voici des exemples qui se rapprochent le plus:

- http://www.w3schools.com/css/css_navbar.asp

Vers le bas vous avez un exemple et c'est celui-ci que l'on prend:

- http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

Donne pour vous en gros:

Code:

#navbar {
...
}
#navbar a {
...
}
#navbar a:hover {
...
}

Pour ce qui est des liens colorés je vais poursuivre sur le même site:

- http://www.w3schools.com/cssref/sel_attribute_value.asp

Donc ceci pour le lien d'enregistrement (même principe pour le lien connexion mais avec un background-color sur un hover et le href différent):

Code:

#navbar a.mainmenu[href="/register"] {
color: green !important;
}

J'ai l'impression qu'il y a des effets de transitions ou je fabule enfin bref voici encore de bons exemples en cherchant sur le net:

- http://www.css3create.com/Hover-avec-transitions
- http://www.w3schools.com/css/css3_transitions.asp
- http://www.w3schools.com/cssref/sel_hover.asp
... etc

Pour ce qui est de la class " .active " qui change sur chaque liens mettre ce js (pourquoi pas):

Code:

$(document).ready(function () {
        var url = window.location;
        $('#navbar a.mainmenu[href="'+ url +'"]').addClass('active');
        $('#navbar a.mainmenu').filter(function() {
            return this.href == url;
        }).addClass('active');
    });

Et on lui donne du style:

Code:

.active {
background-color: red !important;
}

Surtout bien penser à utiliser la règle css !important dans les codes ci-dessus.

La panoplie est complète !

+++

Cordialement.

[Archimus]

Bonjour,

J'ai du pain sur la planche ! Un grand merci pour toutes ces explications, je vais les utiliser pour créer une belle navigation. Merci beaucoup.

Bonne journée.

[Invité]

Pas de quoi

Oui effectivement mais en gros si ça peut aider ça doit donner cela(à affiner quand même on sait jamais) j'ai mis des commentaires pour s'y retrouver à la limite mais voilà ce que ça donne tout rassemblé juste pour la partie feuille de style css:

Code:

/* Barre de navigation */
#navbar {
background-color: #333 !important;
}
#navbar a {
display: inline-block !important;
padding: 14px 16px !important;
}
#navbar a:hover {
background-color: #111 !important;
}

/* Couleur sur le lien S'enregistrer */
#navbar a.mainmenu[href="/register"] {
color: green !important;
}

/* Couleur de fond sur le lien Connexion au survol */
#navbar a.mainmenu[href="/login"]:hover {
background-color: red !important;
}

/* Couleur de fond sur le lien actif via javascript */
.active {
background-color: #111 !important;
}

Un bon courage
Cordialement.