28172 sujets

CSS et mise en forme, CSS3

Problème sur un menu UL LI

Bonjour,

Je ne comprend pas comment faire mon menu, j’ai essayer plusieurs solution et j'en retient deux.

La première je bloque sur le css je pense et la deauxième je bloque sur le javascript.

Le problème: j'aimerais un menu en ligne avec son sous-menu, et sous chaque item de menu il y à une image qui doit rester visible. (j'ai déjà vu cela fonctionner, mais où ?).

Avec la solution ul li le sous menu passe par dessus l'image. El là je ne sais pas faire en sorte que limage soit pousser par le sous-menu.

le code exemple :
 <div id="menu">
     <ul>
       <li><a href="#">lien 01</a>
          <ul>
             <li><a href="#">lien 01</a></li>
             <li><a href="#">lien 02</a></li>
             <li><a href="#">lien 03</a></li>
          </ul>
       </li>
       
       <li><a href="#">lien 02</a></li>
       <li><a href="#">lien 03</a></li>
       <li><a href="#">lien 04</a>
         <ul>
             <li><a href="#">lien 01</a></li>
             <li><a href="#">lien 02</a></li>
             <li><a href="#">lien 03</a></li>
          </ul>
         <img src="http://dummyimage.com/170x101/268299/cc8719.png"/>
       </li>
       <li><a href="#">lien 05</a></li>
       <li><a href="#">lien 06</a></li>
    </ul>
  </div>


son css :
/*menu jquery*/
#menu{height:30px; background:#2b242b;}
#menu ul, #menu li{
  list-style:none;
  padding:0px;
  margin:0px;
  }
#menu li{ 
  float:left;
  width:170px;
  line-height:30px;
  position:relative;
  }
#menu li ul{
  position:absolute; 
  background:#2b242b;
  left:-10px;
  display:none;
}
#menu li li{
    float:none;
    padding-left:10px;
    padding-right:10px;
    line-height:20px;
  }
  
#menu li li:hover{background:#2b255b;}

#menu a{color:#e6e612; text-decoration:none;}


Et le code javascript :

$(document).ready(function(){
  $("#menu li").hover(function(){
    $(this).children(":hidden").slideDown();
          },function(){
          $(this).parent().find("ul").slideUp();
        });
});


http://codepen.io/ali13/pen/DjlnH
Modifié par ali13 (28 Mar 2013 - 15:54)
Bonjour,

Donc, si je comprends bien, il s'agit d'un menu horizontal et le sous-menu, lorsqu'il est appelé, vient se superposer à l'image de l'item du menu, mais l'image apparaît encore grâce à l'opacité moindre du sous-menu?

Si c'est ça, j'ai donné un début de solution, non?
En faite non.

L’orque le sous-menu s'ouvre l'image qui se trouve en dessous doit glisser avec le sous menu.
Mais le problème c'est que l'image ne glisse pas avec le sous menu.

voilà je vais poster un visuel du problème je pense que ce sera plus explicite.

merci toute de même.
Je pense que j'ai fais ça, mais sa ne me plaisais pas. Maintenant si c'est la solution je resterais dessus.

Merci.

J'ai cette solution qu'un benjamin ma donner sur CodePen 


<ul id='menu'>
  <li><a href=''>Accueil</a></li>
  <li><a href=''>Tutoriel</a>
    <ul>
      <li><a href=''>Design</a></li>
      <li><a href=''>Web</a></li>
    </ul>
    <img src="http://dummyimage.com/170x101/268299/cc8719.png"/>
  </li>
  <li><a href=''>Contact</a></li>
  <li><a href=''>Hey</a></li>
  <li><a href=''>MackEy</a></li>
</ul>



#menu,#menu ul {
  margin:0;
  padding:0;
  position:relative;
  line-height:1.5em;
}
#menu a {
  color:#FFF;
  background-color:#333;
  border:1px solid #444;
  display:block;
  text-decoration:none;
  text-align:center;
  width:168px;
}
#menu a:hover{
  color:#000;
  background-color:#FFF;  
}
#menu li{
  position:relative;
  float:left;
  list-style:none;
}
#menu ul{
  /*position:absolute;*/
  width:168px;
  /*top:25px;*/
  /*display:none;*/
}
#menu li ul a {
  width:168px;
  float:left;
}
#menu ul ul{
  top:auto; 
}
#menu li ul ul{
  left:150px;
}



$(document).ready(function(){
  $('ul ul',this).hide();
  $('#menu li').hover(function(){
    $('ul:first',this).slideDown(700);
  },function(){
    $('ul:first',this).slideUp(700);
  });
});


A+
Sujet clos
Aller à