响应式菜单

今天来看一个响应式布局菜单效果，重点应用媒体查询、css3绘图、jquery简单应用。效果图如下。

在线研究点这里，下载收藏点这里。

Are you ready? Go--->

html文件

<div id="cont">
  <div id="btn"></div>
  <div id="c"></div>
  <ul id="menu" class="clearfix">
 	<li><a href="#">首页</a></li>
 	<li><a href="#">公司简介</a></li>
 	<li><a href="#">公司业务</a></li>
 	<li><a href="#">组织架构</a></li>
 	<li><a href="#">领导致辞</a></li>
 	<li><a href="#">联系我们</a></li>
 </ul>
</div>

嗯，css文件里使用了css reset，首先是清除浮动的css

.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

然后，我们实现768+时的表现

#cont {
    width: 100%;
    background:#455868;
    position: relative;
}
#menu {
    list-style: none;
    width: 610px;
}
#menu li {
    display: inline;
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #aaa;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
#menu li:last-child {
    border-right:none;
}
#menu li a {
    color:#fff;
    text-decoration: none;
}

其中，box-sizing的设置非常重要，边框的宽度计入盒子宽度，便于下文的计算。

然后，就是期盼已久的媒体查询啦，480px~768px时显示成表格状

@media all and (max-width:768px) {
    #cont {
        width: 100%;
    }
    #menu {
        width: 100%;
        padding: 0;
    }
    #menu li {
        width: 50%;
        float: left;
        border:1px solid #aaa;
        border-width: 0 1px 1px 0;
    }
    #menu li:last-child {
        border-right:1px solid #aaa;
    }
    #btn {
        display: none;
    }
    #c {
        display: none;
    }
}

480px一下，我们需要先将菜单隐藏，单击按钮时再显示。

@media all and (max-width:480px) {
    #cont {
        height: auto;
    }
    #menu {
        display: none;
    }
    #btn {
        display: block;
        width:24px;
        height:24px;
        position: absolute;
        right: 10px;
        top: 8px;
        cursor: pointer;
    }
    #btn:after {
        content:"";
        position:absolute;
        left:0;
        top:0;
        width: 24px;
        height:3px;
        border-radius:2px;
        background-color: #fff;
        box-shadow: 0 6px 0 #fff, 0 12px 0 #fff, 0 18px 0 #fff;
    }
    #c {
        display: block;
        width: 100%;
        height: 40px;
        background-color:#333435;
    }
}

这里，我们使用了btn:after伪对象来实现绘图，使用box-shadow绘制横线，在btn里实现鼠标响应。

我们需要js来实现单击事件，引入jquery库之后，

$(function() {
	var pull 		= $('#btn');
		menu 		= $('#menu');
		menuHeight	= menu.height();

	$(pull).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});

	$(window).resize(function(){
		var w = $(window).width();
		if(w > 320 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
});

好吧，就到这里。

在线研究点这里，下载收藏点这里。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------