Créer un thème WordPress intégralement N°8 : le menu css

Les premières parties de ce dossier se trouve ici :

Pour voir les premières parties de notre dossier, c’est par ici :

Plusieurs notions sont à maîtriser pour que vous puissiez personnaliser votre menu de A à Z…

Le menu dans la feuille de style css

Devant la complexité de cette réalisation qui comporte des codes intriqués, nous allons déployer un exemple basique.  Observez le code ci-dessous pour mieux comprendre le rôle de chaque attribut.

 

float : indique tout simplement que l’élément doit flotter au-dessus d’un contenant. Puisque nous avons placé la div dans le fichier header.php, le menu flottera au-dessus du header.

li.menu-item : comme vu précédemment, li concerne les listes. Ici vous personnalisez le contenant de chaque titre inséré dans le menu (largeur, hauteur, couleur de fond…).

list-style : none; On peut personnaliser l’apparence des items (point, carré…) comme ceci :

  • exemple

En indiquant none on enlève tout marquage et exemple apparaît seul.

display:list-item; Ceci affiche la liste verticale. Display peut aussi être suivi de « inline » pour que les éléments s’affichent horizontalement et de bien d’autres formules.

li.menu-item a:hover; Hover désigne une action au moment où la souris passe sur l’élément en question. Généralement lorsqu’on passe la souris sur un menu, les titres prennent une autre couleur ou apparence au même moment. On peut aussi choisir de souligner le titre sur lequel on surf (text-decoration:underline).

li.menu-current-item a{ Cet attribut est relatif au menu actif, c’est à dire celui que l’on consulte. Ainsi, en y introduisant font-weight:bold; vous demandez que le titre de la catégorie en cours de lecture soir en gras : par exemple, si vous lisez un article de la catégorie « hébergeur », alors « hébergeur » devient gras.

li.current-menu-item > ul.sub-menu li.menu-item a {  Pour customiser l’apparition du sous menu, introduisez vos codes ici..

border-radius : 8px; Créez une bordure, un cadre dont vous réglez l’épaisseur en changeant le nombre de px. Adaptez la couleur selon vos goûts en rajoutant color:#dddddd entre : et;

Les autres attributs ont déjà été expliqué dans d’autres billets et nous ne les aborderons donc pas ici afin de ne pas noyer les informations que vous cherchez dans celles que vous connaissez déjà!

Apprendre à customiser un menu css

Le plus difficile à retenir lorsqu’on s’attaque au codage css d’un menu est de retenir le rôle de chaque balise :l’une commande le menu en général, l’autre seulement le sous-menu etc.

Et pour maîtriser cela il n’y a pas d’autre choix que de se lancer : reprenez donc ce code dans un premier temps et amusez-vous ensuite à modifier les couleurs pour identifier les éléments qui sont influencés par ce changement.

Il nous reste encore quelques éléments à voir pour finaliser le menu css : content, page, footer… Nous verrons cela brièvement très bientôt!

Catégorie: Création de sites web, Spécial débutants
9 février 2012
O2switch Hébergement web