jQuery implémente un magnifique menu d'effets d'animation à plusieurs niveaux code

Maison

interface Web

js tutoriel

jQuery implémente un magnifique menu d'effets d'animation à plusieurs niveaux code_jquery

May 16, 2016 pm 03:40 PM

jquery 动画菜单

L'exemple de cet article décrit l'implémentation jQuery du code de menu d'effets d'animation à plusieurs niveaux. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code source de menu animé à plusieurs niveaux basé sur jQuery. L'effet d'animation est fluide. C'est un très bon menu animé. Tout le monde est invité à l'essayer. Ce genre de menu est généralement utilisé dans les grands sites, mais si votre site a beaucoup de contenu, il peut également être envisagé.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-nlevel-animate-menu-style-codes/

Le code spécifique est le suivant :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;多级的动画菜单代码&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
 &lt;style&gt;
 *{
 padding:0;
 margin:0;
 }
  body{
 background:#f0f0f0;
 font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
  overflow-x:hidden;
 }
 h1{
 font-size:180px;
 line-height:180px;
 text-transform: uppercase;
 color:#f9f9f9;
 position:absolute;
 text-shadow:0 1px 1px #ddd;
 top:-25px;
 left:-20px;
 white-space: nowrap;
 }
 span.reference{
 position:fixed;
 left:10px;
 bottom:10px;
 font-size:11px;
 }
 span.reference a{
 color:#DF7B61;
 text-decoration:none;
 text-transform: uppercase;
 text-shadow:0 1px 0 #fff;
 }
 span.reference a:hover{
 color:#000;
 }
 .box{
 margin-top:129px;
 height:460px;
  width:100%;
 position:relative;
 background:#fff url(images/click.png) no-repeat 380px 180px;
  -moz-box-shadow:0px 0px 10px #aaa;
  -webkit-box-shadow:0px 0px 10px #aaa;
  -box-shadow:0px 0px 10px #aaa;
 }
 .box h2{
  color:#f0f0f0;
  padding:40px 10px;
  text-shadow:1px 1px 1px #ccc;
 }
ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu &gt; li{
 float:left;
 position:relative;
}
ul.ldd_menu &gt; li &gt; span{
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;UI Elements&lt;/h1&gt;
 &lt;div class="box"&gt;
  &lt;h2&gt;Large Drop Down Menu Demo&lt;/h2&gt;
  &lt;ul id="ldd_menu" class="ldd_menu"&gt;
  &lt;li&gt;
   &lt;span&gt;Vacations&lt;/span&gt;&lt;!-- Increases to 510px in width--&gt;
   &lt;div class="ldd_submenu"&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Location&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;South America&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Antartica&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Africa&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Asia and Australia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Europe&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Category&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sun &amp; Beach&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Adventure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Science &amp; Education&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Extreme Sports&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Relaxing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Spa and Wellness&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Theme&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Paradise Islands&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cruises &amp; Boat Trips&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Wild Animals &amp; Safaris&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Nature Pure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Helping others &amp; For Hope&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Diving&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;a class="ldd_subfoot" href="#"&gt; + New Deals&lt;/a&gt;
   &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;span&gt;Equipment&lt;/span&gt;
   &lt;div class="ldd_submenu"&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Location&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;South America&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Antartica&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Africa&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Asia and Australia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Europe&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Category&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sun &amp; Beach&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Adventure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Science &amp; Education&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Extreme Sports&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Relaxing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Spa and Wellness&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Theme&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Paradise Islands&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cruises &amp; Boat Trips&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Wild Animals &amp; Safaris&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Nature Pure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Helping others &amp; For Hope&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Diving&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;a class="ldd_subfoot" href="#"&gt; + New Deals&lt;/a&gt;
   &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;span&gt;Locations&lt;/span&gt;
   &lt;div class="ldd_submenu"&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Location&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;South America&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Antartica&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Africa&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Asia and Australia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Europe&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Category&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Sun &amp; Beach&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Adventure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Science &amp; Education&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Extreme Sports&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Relaxing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Spa and Wellness&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;ul&gt;
    &lt;li class="ldd_heading"&gt;By Theme&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Paradise Islands&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cruises &amp; Boat Trips&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Wild Animals &amp; Safaris&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Nature Pure&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Helping others &amp; For Hope&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Diving&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;a class="ldd_subfoot" href="#"&gt; + New Deals&lt;/a&gt;
   &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
 &lt;!-- The JavaScript --&gt;
 &lt;script type="text/javascript" src="jquery-1.6.2.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 $(function() {
  /**
   * the menu
   */
  var $menu = $('#ldd_menu');
  /**
   * for each list element,
   * we show the submenu when hovering and
   * expand the span element (title) to 510px
   */
  $menu.children('li').each(function(){
   var $this = $(this);
   var $span = $this.children('span');
   $span.data('width',$span.width());
   $this.bind('mouseenter',function(){
   $menu.find('.ldd_submenu').stop(true,true).hide();
   $span.stop().animate({'width':'510px'},300,function(){
    $this.find('.ldd_submenu').slideDown(300);
   });
   }).bind('mouseleave',function(){
   $this.find('.ldd_submenu').stop(true,true).hide();
   $span.stop().animate({'width':$span.data('width')+'px'},300);
   });
  });
 });
 &lt;/script&gt; 
 &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn