响应式布局之网站头部导航

 爱编程爱分享，原创文章，转载请注明出处，谢谢！http://www.cnblogs.com/fozero/p/6187798.html 

网页支持响应式布局的好处我就不说了，这里我通过写一个简单的网站导航来学习响应布局的开发

 

Meta标签定义

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
        
        <meta name="apple-mobile-web-app-capable" content="yes" />
        
        <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
        
        <meta name="format-detection" content="telephone=no" />

定义body中的结构

<div class="nav">
                <ul>
                    <li>
                        <a href="#" class="actived">网站首页a>
                    li>
                    <li>
                        <a href="#">公司案例a>
                    li>
                    <li>
                        <a href="#">公司相册a>
                    li>
                    <li>
                        <a href="#">团队博客a>
                    li>
                    <li>
                        <a href="#">关于我们a>
                    li>
                ul>
                <img src="img/more_black.png" />
            div>

定义样式

 

查看效果图

 

可以看到导航已经显示出来了，我们给导航加上点击事件以改变导航选中样式

 

那如果说我们想要支持响应式布局该怎么做呢？

上面最开始我们已经添加支持手机的Meta相关标签元素了，接着我们通过媒体查询来使我们手机支持响应式导航显示

主要用到@media only screen and (max-width: 878px) {}   设置当屏幕宽度小于878px的时候执行里面的样式

这里我们先在右上角显示一个图标，然后点击图标的时候显示右侧的导航，再点击图标隐藏右侧的导航

我们继续在Style标签内添加以下样式

/*媒体查询*/
            /*屏幕宽度小于878px的时候执行里面的css*/
            
            @media only screen and (max-width: 878px) {
     
                .nav img {
                    display: inline;
                }
                .nav ul {
     
                    position: absolute;
                    right: 0;
                    text-align: right;
                    top: 78px;
                    display: none;
                }
                .nav ul li {
     
                    display: block;
                    border: 1px solid #dadada;
                    height: 58px;
                    line-height: 58px;
                    width: 98px;
                }
                .nav ul li a {
     
                    display: block;
                    padding-bottom: 0;
                }
                .nav ul li .actived {
     
                    border-bottom: none;
                }
                .nav ul li a:hover {
     
                    background-color: #6E6E6E;
                    color: #fff;
                }
            }

 

最后将js添加上去，用于操作显示或隐藏下方导航列表

$(".nav img").click(function() {
     //显示或隐藏下方导航列表
                    $(".nav ul").slideToggle(100);
                });

 

OK，完成。

我们来看下效果，在手机上面打开网页显示导航如下图

点击右侧图标显示导航效果

 

转载于:https://www.cnblogs.com/fozero/p/6187798.html