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

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

推荐阅读