欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

平滑过渡效果大型下拉菜单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>

 

        <!-- Scripts for jQuery and the plugin -->

        <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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h15019.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-05 11:03 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。