Correction menu jQuery horizontal

Correction menu jQuery horizontal

  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

    • body
      {
              font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
              text-align:center;
      }
      div {
          margin-left: auto;
          margin-right: auto;
          display: table;
          }
          
      .menu,.menu ul
      {
          margin: 0px;
          padding: 0px;
          position: relative;
          line-height: 2em;
      }
      .menu a
      {
          color: #fff;
          background-color: #333;
          border: 1px solid #444;
          text-decoration: none;
          display: block;
          text-align: center;
          width: 250px;
      }
      .menu a:hover
      {
          color: #000;
          background-color: #fff;
      }
      .menu li
      {
      float: left;
      list-style: none;
      position: relative;
      }
      .menu ul
      {
       display: none;
      position: absolute;
      }
  3. Le code jQuery

    • $(document).ready(function(){
         
      $(".menu li").hover(function(){
          $('ul:first',this).stop().slideDown();
      },function(){
          $('ul:first',this).stop().slideUp();  
      });
      });



Abonnez vous à notre chaîne YouTube gratuitement