Menu jQuery horizontal App2

Menu jQuery horizontal App2

  1. Objectifs

    • Etre capable d’utiliser le HTML, CSS et Jquery pour réaliser un menu horizontal dynamique.



    d-client=”ca-pub-2041146479004630″
    data-ad-slot=”1219671700″
    data-ad-format=”auto”>


    Vous trouverez l’énoncé de l’exercice à cet endroit

  2. Le code CSS

    • #menu, #menu ul
      {
          margin: 0;
          padding: 0;
          position: relative;
          line-height: 2em;
      }
      #menu a
      {
      color: #FFF;
      background-color: #333;
      border: 1px solid #444;
      display: block;
      text-decoration: none;
      text-align: center;
      width: 175px;
      }
      #menu a:hover
      {
          color: #000;
          background-color: #FFF;
      }
      #menu li
      {
      position: relative;
      float:left;
      list-style: none;
      }
      #menu ul
      {
          position: absolute;
          width: 175px;
          top: 34px;
          /*retard*/
          display: none;
      }
      #menu li ul a
      {
          width: 175px;
          float: left;
      }
      #menu ul ul
      {
          top: auto;
      }
      #menu li ul ul
      {
          left: 175px;
      }
  3. Le code jQuery

    • $(document).ready(function(){
         
      $("#menu li").hover(function(){
          $('ul:first',this).css({visibility:"visible",display:"none"}).fadeIn(600).show();
      },function(){
          $('ul:first',this).css({visibility:"hidden"});
      });
      });



Abonnez vous à notre chaîne YouTube gratuitement