Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1197 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Menu deroulant style css

 





Attention si vous cliquez sur "voir les résultats" vous ne pourrez plus voter

 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu deroulant style css

n°1142587
Sp@ds
Posté le 09-05-2012 à 18:07:51  profilanswer
 

Bonjour
 
je suis actuellement en train de créer un site wordpress.
Et j'ai une petite question concernant un problème de style css.
 
Avant tout voici à quoi ressemble mon menu actuellement:
 
http://img15.hostingpics.net/pics/527014menu.jpg
 
Et voici une illustration de mon problème.
 
http://img15.hostingpics.net/pics/949624menu2.jpg
 
Je souhaiterai que la ligne fine orange ne fonctionne au survol, que sur les titres principaux.
un autre design sera appliqué au sous et sous sous menu.
 
Je ne sais pas trop comment gérer les .class parent enfant pour réaliser l'effet désiré.
 
Est il possible d'exclure la class .children d'une autre class? par ex "#menu li.page_item :hover"
 
Comment sélectionner les <li> de premier niveau uniquement ?
Sachan qu'avec  

Code :
  1. #menu li.page_item :hover


J'agis sur tous les niveaux. ou alors comment puis je rajouter des .class intermédiaire.?
 
Merci d'avance pour les réponses.
 
voici mon code:
 
mon header.php

Code :
  1. <header id="branding" role="banner">
  2.   <ul id="menu" class="pagenav">
  3.        <li><a href="<?php echo get_option('home'); ?>/" class="on">HOME</a></li>
  4.       <?php wp_list_pages('title_li='); ?>
  5.   </ul>
  6. </header>


 
 
le résultat
 

Code :
  1. <header id="branding" role="banner">
  2.    <ul id="menu" class="pagenav">
  3.        <li><a href="http://localhost/wordpress/" class="on">HOME</a></li>
  4.        <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">PAGE EXEMPLE</a></li>
  5.        <li class="page_item page-item-17"><a href="http://localhost/wordpress/?page_id=17">PAGE EXEMPLE2</a></li>
  6.        <li class="page_item page-item-20"><a href="http://localhost/wordpress/?page_id=20">PAGE EXEMPLE3</a>
  7.            <ul class='children'>
  8.               <li class="page_item page-item-23"><a href="http://localhost/wordpress/?page_id=23">SOUS PAGE</a></li>
  9.               <li class="page_item page-item-26"><a href="http://localhost/wordpress/?page_id=26">SOUS PAGE2</a>
  10.                  <ul class='children'>
  11.                      <li class="page_item page-item-32"><a href="http://localhost/wordpress/?page_id=32">SOUS SOUS PAGE</a></li>
  12.                  </ul>
  13.               </li>
  14.            </ul>
  15.         </li>
  16.    </ul>
  17. </header>


 
style.css
 

Code :
  1. #menu li.page_item :hover /* Lorsque la souris passe sur le parent */   
  2. {
  3.  border-bottom: 3px solid #ff8738;
  4. }
  5. #menu .children a:hover /* Lorsque la souris passe sur une sous page */   
  6. {
  7. background:url("images/hover_active.png" );
  8. }
  9. #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  10. {
  11.         left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
  12. }
  13. #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
  14. {
  15.         left: auto; /* Repositionnement normal */
  16.         min-height: 0; /* Corrige un bug sous IE */
  17. }
  18. #menu a:active{
  19. background:url("images/hover_active_lum.png" ); /* design au clique souris*/
  20. }
  21. .current_page_item a, #home .on  {
  22. background:url("images/hover_active.png" ); /* design page active */
  23. text-decoration:none
  24. }


Message édité par Sp@ds le 09-05-2012 à 21:42:25
mood
Publicité
Posté le 09-05-2012 à 18:07:51  profilanswer
 

n°1142622
Skopos
Titilleur de nombrils...
Posté le 10-05-2012 à 06:39:07  profilanswer
 

Salut,
 
#menu > li :hover
 
> ne ciblera que les li qui sont directement enfants de #menu, ceux que tu veux donc.
 
 
Mais les questions de design qui portent sur le code ça va dans le forum Prog  ;)
 


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1142627
genghis77
-_-'
Posté le 10-05-2012 à 09:50:25  profilanswer
 

dans le premier menu li faut pas rajouter la classe pour limiter le border bottom a celui ci?
 
je pense que le probleme se situe dans le fait ou tu ne precise pas les classes des li dans le CSS
 
bon en meme temps c'est pas ma specialité :jap:


---------------
Genghis achat/vente
n°1142640
Sp@ds
Posté le 10-05-2012 à 11:50:43  profilanswer
 

Merci skopos cela fonctionne.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Menu deroulant style css

 

Sujets relatifs
Pb affichage sous-menu dans dreamweaver 8aide menu flash
j'aime utiliser le Top MenuAide debutant pour effet style emboss (photoshop)
Comment fair un effet style autocollant avec une image ?[Résolu] Pouvez vous m'aider à trouver ce menu? (Photoshop cs4)
[toshop] Menu arrondiindesign creation style de document
Où puis-je trouver ce style ? 
Plus de sujets relatifs à : Menu deroulant style css


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR