平滑过渡效果大型下拉菜单js特效

<!DOCTYPE html>
<html>
<head>
      <meta charset=utf-8>
      <title>平滑过渡效果大型下拉菜单js特效</title>
      <meta name="keywords" content="平滑过渡,过渡效果,下拉菜单,js特效" />
      <meta name="description" content="一款简单的jQuery大型下拉菜单插件，带有平滑过渡效果，以及鼠标滑过菜单项时的动画效果。" />
      <link rel="stylesheet" href="CSS/booNavigation.css">
</head>

<body>
<div class="wrapper">
         <nav id="booNavigation" class="booNavigation">
            <ul>
                  <li class="navItem">
                     <a href="#">菜单一</a>
                     <ul class="navContent">
                        <li>
                              <ul>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                                 <li><a href="#" title="The best cat">The best cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="The best cat">The best cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="The best cat">The best cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                              </ul>
                        </li>
                     </ul>
                  </li>

                  <li class="navItem">
                     <a href="#">菜单二</a>
                     <ul class="navContent">
                        <li>
                              <ul>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                              </ul>
                        </li>
                     </ul>
                  </li>

                  <li class="navItem">
                     <a href="#">菜单三</a>
                     <ul class="navContent">
                        <li>
                              <ul>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                              </ul>
                        </li>
                        <li>
                              <ul>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Boo the cat">Boo the cat</a><li/>
                                 <li><a href="#" title="The invisible cat">The invisible cat</a><li/>
                                 <li><a href="#" title="The amazing cat">The amazing cat</a><li/>
                                 <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/>
                                 <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/>
                              </ul>
                        </li>
                     </ul>
                  </li>
            </ul>
         </nav>


      </div>

      
      <script src="js/jquery.min.js"></script>
      <script src="js/booNavigation.js"></script>
      <script>
      (function() {

         /**
         * This is the call we have to do to execute
         * the plugin giving a custom params
         */
         $('#booNavigation').booNavigation({
            slideSpeed: 400
         });

         $('#booNavigationTwo').booNavigation({
            slideSpeed: 200
         });

      })();

      </script>
</body>
</html>

		自动登录	找回密码
密码			立即注册

平滑过渡效果大型下拉菜单js特效-Discuz教程下载

平滑过渡效果大型下拉菜单js特效

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程18人阅读

【原创】根据论坛发帖时间或门户文章发布时间，判断时间是否为当38人阅读

非手动网站版权年份自动更新代码35人阅读

【收集整理】兔源码简单收集整理关于网页上各meta标签说明36人阅读

【原创】JS检测网址是否可访问，如可访问则显示链接直达并可点击47人阅读

【原创】分享一款html5+css3的横排导航列表DIY模块（百分百有效39人阅读

【原创】分享一款html5+css3的四排图文资讯列表DIY模块（百分百187人阅读

【转载】垂直时光轴HTML单页+CSS+js模块880人阅读

【转载】文字由左向右循环滚动DIY+CSS+js模块930人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS3690人阅读

所属版块