jquery实现侧边弹出的垂直导航

前端技术 2023/09/03 JavaScript

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。

HTML源码：

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
\"></script>
<script language=\"javascript\">
    $(document).ready(function() {
        $(\"ul.side_nav li\").hover(function() {
            $(this).find(\"div\").stop()
        .animate({ left: \"210\", opacity: 1 }, \"fast\")
        .css(\"display\", \"block\")
        }, function() {
            $(this).find(\"div\").stop()
        .animate({ left: \"0\", opacity: 0 }, \"fast\")
        });
    });
</script>
</head>
<body>
<ul class=\"side_nav\">
    <li>
        <a href=\"www.corange.cn\">Corange.cn</a>
        <div><p>Go home!<Br />ASP</p></div>
    </li>
    <li>
        <a href=\"#\">About Me</a>
        <div><p>Get to know me.</p></div>
    </li>
    <li>
        <a href=\"#\">Portfolio</a>
        <div><p>Get to check out my featured work!</p></div>
    </li>
    <li>
        <a href=\"#\">Blog</a>
        <div><p>Tutorials, articles and resources.</p></div>
    </li>
    <li>
        <a href=\"#\">Contact</a>
        <div><p>Don\'t hesitate to drop me a line!</p></div>
    </li>
    <li>
        <a href=\"#\">Rss</a>
        <div><p>News, Video and so on.</p></div>
    </li>
</ul>
</body>
</html>

演示代码很简单，小伙伴们根据自己的项目需求，自由美化更改下即可

本文地址：https://www.stayed.cn/item/6332

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案