Avoir la même barre de navigation que forumactif

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avoir la même barre de navigation que forumactif

Message par Archimus le Jeu 14 Jan 2016 - 20:28

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


Dernière édition par Archimus le Sam 16 Jan 2016 - 4:16, édité 1 fois

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir la même barre de navigation que forumactif

Message par Invité le Ven 15 Jan 2016 - 18:31

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 ! Wink

+++

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir la même barre de navigation que forumactif

Message par Archimus le Sam 16 Jan 2016 - 4:15

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.

Archimus
***

Messages : 152
Inscrit(e) le : 15/05/2015

http://www.crystal-fox.net/
Archimus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avoir la même barre de navigation que forumactif

Message par Invité le Sam 16 Jan 2016 - 5:27

Pas de quoi Wink

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum