Header

Partagez | 

[forumactif]Barre de navigation personnalisée rien qu'en CSS

Message Sujet: [forumactif]Barre de navigation personnalisée rien qu'en CSS   Lun 9 Mai - 15:17

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Le personnel

Bons Points (BP) : 106
Voir le profil de l'utilisateur
Tutoriel rédigé par Tite-May

Une barre de navigation personnalisée en CSS


Bonjour tout le monde !

Ici on va voir comment personnaliser notre barre de navigation en CSS sans modifier les templates. Eh oui, c'est possible ! On va réaliser une barre de navigation dont les boutons changent au survol de la souris : et rien qu'en CSS !

On réalise notre barre graphiquement


Pour faire un test, j'ai créé une partie d'une barre de navigation et de deux couleurs différentes pour qu'on voit bien la différence Wink
On va donc mettre nos 2 barres bien l'une en dessous de l'autre avec notre logiciel et sur la même image. On a donc ceci :

Et maintenant on va découper chaque double-bouton (ici j'en ai fait qu'un pour vous montrer) :
La partie graphique est terminée. Bien sûr, pour votre résultat final il faut bien tout travailler comme vous le souhaitez.

On installe nos boutons


Il ne nous reste plus qu'à l'installer et là, ça va se passer en CSS.
Chaque image de la barre de navigation a une id qui lui appartient, on va donc s'en servir. Pour mon exemple je prends le bouton "messagerie" : l'id qui lui correspond est :
Code:
i_icon_mini_message
Du coup on va lui dire quoi faire :
Code:
a.mainmenu img#i_icon_mini_message{width:Xpx;height:Ypx;background:transparent url('http://i62.tinypic.com/244895v.jpg') no-repeat left 0;}

On traduit : tu prends les liens de la barre de navigation ( a.mainmenu ) et à l'image qui a l'id i_icon_mini_message ( img#i_icon_mini_message tu appliques une largeur de Xpx ( width:146px; ) une hauteur de Ypx ( height:50px; ) et un fond qui n'a pas de couleur, qui est une image, qui ne se répète pas, qui est centrée et à 0px du haut ( background:transparent url('http://i62.tinypic.com/244895v.jpg') no-repeat left 0 )

Et ensuite on fait la même chose pour le survol : on prend le a.mainmenu:hover .
Code:
a.mainmenu:hover img#i_icon_mini_message{width:Xpx;height:Ypx;background:transparent url('http://i62.tinypic.com/244895v.jpg') no-repeat left -Ypx;} 

ici on le place à -Ypx du haut pour que ce soit la partie basse de notre bouton qui se voit.

Exclamation Ici, pensez bien à bien modifier les X, Y et liens par les bonnes valeurs Wink
Pour moi ça donne donc :
Code:
a.mainmenu img#i_icon_mini_message{width:146px;height:50px;background:transparent url('http://i62.tinypic.com/244895v.jpg') no-repeat left 0;}
a.mainmenu:hover img#i_icon_mini_message{width:146px;height:50px;background:transparent url('http://i62.tinypic.com/244895v.jpg') no-repeat left -50px;}

Et vous pouvez tester : ça fonctionne ! Vous passez parfaitement du noir au rouge sans délai Wink

Comment connaître l'ID de chaque bouton


Pour les trouver, il faut regarder les codes sources. Mais comme on est gentil, je les ai cherchés pour vous Smile
  • Accueil : i_icon_mini_index
  • Portail : i_icon_mini_portal
  • Calendrier : i_icon_mini_calendar
  • FAQ : i_icon_mini_faq
  • Rechercher : i_icon_mini_search
  • Membres : i_icon_mini_members
  • Groupes : i_icon_mini_groups
  • Profil : i_icon_mini_profile
  • Messagerie : i_icon_mini_message
  • Nouveaux messages : i_icon_mini_new_message
  • Inscription : i_icon_mini_register
  • Connexion : i_icon_mini_login
  • Déconnexion : i_icon_mini_logout


Et voilà, vous pouvez personnaliser votre barre de navigation sans vous embêter avec les templates Smile Facile n'est-ce pas ?

Bien entendu, grâce à ces id, vous pouvez personnaliser votre barre à gogo !


Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussigné(e), Tite-May, accepte qu'un directeur reposte le tutoriel "Une barre de navigation personnalisée en CSS" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[forumactif]Barre de navigation personnalisée rien qu'en CSS
Page 1 sur 1
 Sujets similaires
-
» Barre de Navigation personnalisé.
» Barre de navigation personnalisée
» Barre de navigation au dessus de la bannière
» Barre de navigation personnalisé
» Barre de navigation personnalisé
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens