Menu CSS Modifier à souhait les onglets

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by Orewan on

Bonjour,

Je cherche à modifier les onglets d'un menu créer sur Drupal 7.
Mon thème est le starterkit de Zen et j'ai installé nice menu.

Mon but est de créer le premier et dernier onglet du menu avec des bords arrondis. Cependant je souhaite qu'au survol seulement le premier et dernier onglet changent de couleur en gardant les bords arrondis. Tous les menus intermédiaires doivent rester de simple rectangle.

L'exemple se trouve sur le site : http://www.subhublite.com/ (qui a été développé avec drupal)
L'onglet "home" est au survol de la souris remplacé par la même image en vert. Celle-ci conserve les angles arrondis. Les autres onglets sont de simples rectangles.

Je n'ai pas d'idées sur la manière de le faire en css. Faut il écrire un script qui reconnait le premier onglet ?

Forum : 
Développement
Version de Drupal : 
7.x
Tags : 
Menu CSS Onglets

Soumis par benfarhat le 26 Avril, 2011 - 00:13

non pas de script mais tu surcharge les classes css de nice menu

juste pour info: css te permet de modifier (on va dire) l'apparence des éléments de ton site, via des attributs et une valeur

par exemple
color: black;
va dire que l'attribut color (couleur de la police d'écriture) est noir

background-color:#232323;
va dire que la couleur de fond à en codification hexadécimal la valeur #232323;

bref les attributs sont très nombreux et varie d'une version de css à une autre!
aujourd'hui on est à la version 3 de css!
parmi les gros plus attendus par les infographe c'est la possibilité de faire de tres jolie effet comme les bordures arrondis, les ombres, la gestion des dégradés, les transitions et animations et surtout le must du must la possibilité d'utilisé des police d'écriture non standard

bien le problème avec css c'est que chaque navigateur se comporte différemment! par exemple le mauvais élève par excellence est internet explorer 5.5 et 6
bref tout ca pour dire que lorsque tu touche a css n'oublie jamais de toujours tester ton site sur ,firefox2.x, firefox 3.x, google chrome, safari, opera, internet explorer 5.5 ,6,7,8 et 9 et si tu veut aller plus loin sur un device mobile (ipad/iphone/smartphone etc...)

Bien revenons a nos attribut
par exemple
color:black;
c'est bien jolie comme attribut mais ce qu'il faut précisé c'est quel texte dans mon site aura la couleur noir
et la rentre en jeux ce qu'on appel les selecteurs
il y a les selecteur de balise d'attribut, les classes et pseudo classes bref c'est tout un monde!

donc la balise qui permet d'avoir un lien hypertexte
si je veut que mes liens soit en couleur rouge je met dans mon fichier css

a{
color:red;
}

si je veut que les paragraphes (balise p) ont une couleur verte et un fond bleu je doit mettre ceci

p{
color:green;
background-color:blue;
}

à présent le problème c'est que la par exemple tous les paragraphe seront ecrit en vert sur bleu!!
si je ne veut le faire que pour un type de paragraphe, alors j'utilise les classes

dans mon fichier j'ai ceci

<p class=maclasse">
bonjour à tous
</p>
<p class="monautreclasse">
comment allez vous?
</p>

alors dans mon css je rajoute la classe avec le "." (point)
comme suit:

p.maclasse{
color:blue;
background-color:white;
}
p.monautreclasse{
color:red;
background-color:black;
}

alors à présent:
"bonjour à tous" sera en bleu sur blanc
et "comment allez vous?" sera en rouge sur noir

Pour revenir à nice menu donc

si tu veut toucher a un élément de nice-menu tu doit utilise les classe

je précise qu'un menu est en faite une liste de puce qui est modifie via css par des attributs tels que float (left/right) ou display (inline,block)

bref le format d'un menu est le suivant

<ul id="nice-menu-1" class="nice-menu nice-menu-left sf-js-enabled">
   <li class="menu-001 menu-path-node-1 first  odd"><a class="active" href="node/1">menu 1</a></li>
<li class="menu-002 menuparent menu-path-node-2 even"><a class="active" href="node/2">menu 2 </a>
      <ul style="visibility: hidden; display: none;">
            <li class="menu-003 menu-path-node-3 first  odd "><a href="node/3">sous menu 1</a></li>
            <li class="menu-004 menu-path-node-4 even "><a href="node/4">sous menu 2</a></li>
          <li class="menu-005 menu-path-node-5 odd  last "><a href="node/5">sous menu 3</a></li>
     </ul>
    </li>
    <li class="menu-006 menu-path-node-6 even  last"><a class="active" href="node/6">menu 3</a></li>
</ul>

et la c'est j'espère claire:
si tu veut toucher le "menu 1" tu doit utiliser une des classe suivante:
menu-001 menu-path-node-1 first

attention par exemple si tu utilise la classe last en voulant toucher menu 3 tu te rend compte que sous menu 3 est touché aussi (car c'est le dernier/last élément du sous menu)
il faut donc trouver une classe qui ne laisse pas d'ambiguïté ou alors utiliser une combinaison de classe, le but étant de point vers le ou les éléments souhaités uniquement

Voila j'espère que c'est assez claire :)

mais un conseil si tu ne t'y connais pas en css il vaut mieux d'abord aller lire des cours sur le net et PRATIQUER (et je conseil tout le monde de le faire) sinon à la longue on se retrouvera à utiliser des choses (thèmes, diaporama,menu,script) toute faites sans jamais pouvoir y mettre notre petite signature! nos gouts :)

Soumis par Orewan le 30 Avril, 2011 - 15:11

Bonjour

Je te remecie de ta réponse Benfahart, cela m'a été très utile. Le sur chargement des classes fonctionnent.

Cependant, j'ai une superposition des classes dans nice menu:
L'image de la classe "menuparent" se superpose à la mienne:

ul.nice-menu-down li.menuparent {
/background: white url(arrow-down.png) right center no-repeat; / LTR */
}

/*Voici le code pour changer l'image seulement pour le premier Menu */

ul.nice-menu-down li.menu-path-node-1{
display: block;
background: #FF962E url(Image/Accueil-Fond_03.jpg) left top no-repeat;
color: #fff;
text-align: center ;
width: 106px;
padding: 0px;
list-style: none outside none;
z-index:10;
}

ul.nice-menu-down li.menu-path-node-1 a:hover{
display: block;
background: #FF962E url(Image/Accueil-Fond_03.jpg) right top no-repeat;
color: #fff;
text-align: center ;
width: 106px;
padding: 0px;
list-style: none outside none;
z-index:10;
}

Or j'aimerai changer uniquement le menu-path-node-1, sans tenir compte de la classe menuparent.

J'aimerai que cette classe (menuparent) soit seulement un rectangle sur fond orange et en bleu en roll over.

Comment ne pas tenir compte d'un classe en CSS ?

Merci à vous

Soumis par benfarhat le 30 Avril, 2011 - 20:39

J'espère avoir compris :)

tu veut que le premier lien celui du retour vers l'accueil soit stylisé sans touché aux autres éléments de ton nice-menu
il faut rajouter à la fin .first pour qu'il le fasse que pour le premier élément (et .last pour le dernier).

Y'a juste une remarque sur un truc qui me parait louche?

pourquoi ta page d'accueil pointe vers le node/1 ???
les classes nice-menu sont dynamique, si tu avait pointé vers le qui est la page d'accueil par defaut de drupal ca t'aurais mis ceci:

ul.nice-menu-down li.menu-path-front.first a
plutot que ca:
ul.nice-menu-down li.menu-path-node-1 a

si tu veux redirigé ta page d'accueil, laisse le dans tes config, et redirige ta page d'accueil dans la configuration de ton site (la ou tu peux aussi définir une page pour les erreurs 403 et 404)

cordialement :)
donc pour résumé utilise le fameux .first
et vérifie si c'est pas la classe nice-menu plutot que nice-menu-down
:) voila
bonne continuation
BenFarhat Elyes

Soumis par vincent59 le 2 Mai, 2011 - 18:33

pour les menu, Drupal ajoute une classe first au premier élément (Home dans l'exemple) et last au dernier élément (About Us dans l'exemple). Le mieux est de styler ces classes d'éléments.

Je te recommande fortement l'utilisation de Firefox + Firebug pour voir quels sont les sélecteurs CSS appliqués aux éléments du code ; ça fait gagner un temps fou...

On peut aussi avec les border-radius faire des bords arrondis sans trop de soucis, sauf pour IE6, mais qui utilise encore ça ?

Dans l'exemple, on trouve d'ailleurs la ligne

#masthead .app-menu ul .first a { border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px; }

qui fait des bords arrondis en haut à gauche et en bas à gauche, selon les types de navigateurs.