响应式菜单

叁歲伎倆 2022-08-26 00:45 178阅读 0赞

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

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

Are you ready? Go--->

html文件

嗯，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');
    		}
    	});
    });

好吧，就到这里。

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

\---------------------------------------------------------------[  
][Link 3]

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

[SouthEast]: /images/20220824/d7fd9d7d678e457a9627f3e293457cf4.png
[Link 1]: http://codepen.io/whqet/pen/pLfCm/
[Link 2]: http://codepen.io/whqet/share/zip/pLfCm/
[Link 3]: http://blog.csdn.net/whqet