多级css3响应式下拉导航

收藏

css3动画下拉的多级菜单，有淡入淡出的效果。在pc端和手机上完全不一样的效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们看下菜单HTML结构：

<ul class="venus-menu">
    <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
    <li><a href="#"><i class="icon-magic"></i>About</a></li>
    <li>
        <a href="#"><i class="icon-thumbs-up"></i>Services</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Hosting</a></li>
            <li>
                <a href="#">Design</a>
                <ul>
                    <li><a href="#">Graphics</a></li>
                    <li><a href="#">Vectors</a></li>
                    <li>
                        <a href="#">Photoshop</a>
                        <ul>
                            <li><a href="#">Photo editing</a></li>
                            <li><a href="#">Business cards</a></li>
                            <li><a href="#">Websites</a></li>
                            <li><a href="#">Flyers</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Fonts</a></li>
                </ul>
            </li>
            <li><a href="#">Consulting</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="icon-quote-right"></i>Blog</a></li>
    <li><a href="#"><i class="icon-envelope-alt"></i>Contact</a></li>
    <li class="search">
        <form method="get">
            <input type="text" name="search" class="search" placeholder="www.erdangjiade.com" />
        </form>
    </li>
</ul>

接着引入jQuery库和venus插件即可。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="venus.js"></script>