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

爱编程爱分享，原创文章，转载请注明出处，谢谢！

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

Meta 标签在手机浏览器上控制布局 Meta 显示 Meta Meta 添加电话连接，应当关闭 Meta

定义body中的结构

网站首页公司案例公司相册团队博客关于我们

定义样式

{:;:; }

        .nav </span>{<span style="color: #ff0000"&gt;
            position</span>:<span style="color: #0000ff"&gt; relative</span>;<span style="color: #ff0000"&gt;
            background-color</span>:<span style="color: #0000ff"&gt; #fff</span>;<span style="color: #ff0000"&gt;
            height</span>:<span style="color: #0000ff"&gt; 78px</span>;<span style="color: #ff0000"&gt;
            width</span>:<span style="color: #0000ff"&gt; 100%</span>;<span style="color: #ff0000"&gt;
            border-bottom</span>:<span style="color: #0000ff"&gt; 1px solid #DADADA</span>;
        }<span style="color: #800000"&gt;

        .nav img </span>{<span style="color: #ff0000"&gt;
            position</span>:<span style="color: #0000ff"&gt; absolute</span>;<span style="color: #ff0000"&gt;
            right</span>:<span style="color: #0000ff"&gt; 20px</span>;<span style="color: #ff0000"&gt;
            top</span>:<span style="color: #0000ff"&gt; 30px</span>;<span style="color: #ff0000"&gt;
            width</span>:<span style="color: #0000ff"&gt; 28px</span>;<span style="color: #ff0000"&gt;
            display</span>:<span style="color: #0000ff"&gt; none</span>;
        }<span style="color: #800000"&gt;

        .nav ul </span>{<span style="color: #ff0000"&gt;
            list-style</span>:<span style="color: #0000ff"&gt; none</span>;<span style="color: #ff0000"&gt;
            margin</span>:<span style="color: #0000ff"&gt; 0</span>;<span style="color: #ff0000"&gt;
            padding</span>:<span style="color: #0000ff"&gt; 0</span>;<span style="color: #ff0000"&gt;
            text-align</span>:<span style="color: #0000ff"&gt; center</span>;
        }<span style="color: #800000"&gt;

        .nav ul li </span>{<span style="color: #ff0000"&gt;
            height</span>:<span style="color: #0000ff"&gt; 78px</span>;<span style="color: #ff0000"&gt;
            width</span>:<span style="color: #0000ff"&gt; 168px</span>;<span style="color: #ff0000"&gt;
            line-height</span>:<span style="color: #0000ff"&gt; 78px</span>;<span style="color: #ff0000"&gt;
            text-align</span>:<span style="color: #0000ff"&gt; center</span>;<span style="color: #ff0000"&gt;
            display</span>:<span style="color: #0000ff"&gt; inline-block</span>;
        }<span style="color: #800000"&gt;

        .nav ul li:hover </span>{<span style="color: #ff0000"&gt;
            cursor</span>:<span style="color: #0000ff"&gt; pointer</span>;
        }<span style="color: #800000"&gt;

        .nav ul li a </span>{<span style="color: #ff0000"&gt;
            text-decoration</span>:<span style="color: #0000ff"&gt; none</span>;<span style="color: #ff0000"&gt;
            color</span>:<span style="color: #0000ff"&gt; #666</span>;<span style="color: #ff0000"&gt;
            padding-bottom</span>:<span style="color: #0000ff"&gt; 8px</span>;
        }<span style="color: #800000"&gt;

        .nav ul li .actived </span>{<span style="color: #ff0000"&gt;
            border-bottom</span>:<span style="color: #0000ff"&gt; 3px solid #EE5C42</span>;
        }
       <span style="color: #800000"&gt;
    </style></span></pre>

查看效果图

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

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

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

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

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

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

查询

        @media only screen and (max-width: 878px) </span>{<span style="color: #ff0000"&gt;
            .nav img {
                display</span>:<span style="color: #0000ff"&gt; inline</span>;
            }<span style="color: #800000"&gt;
            .nav ul </span>{<span style="color: #ff0000"&gt;
                position</span>:<span style="color: #0000ff"&gt; absolute</span>;<span style="color: #ff0000"&gt;
                right</span>:<span style="color: #0000ff"&gt; 0</span>;<span style="color: #ff0000"&gt;
                text-align</span>:<span style="color: #0000ff"&gt; right</span>;<span style="color: #ff0000"&gt;
                top</span>:<span style="color: #0000ff"&gt; 78px</span>;<span style="color: #ff0000"&gt;
                display</span>:<span style="color: #0000ff"&gt; none</span>;
            }<span style="color: #800000"&gt;
            .nav ul li </span>{<span style="color: #ff0000"&gt;
                display</span>:<span style="color: #0000ff"&gt; block</span>;<span style="color: #ff0000"&gt;
                border</span>:<span style="color: #0000ff"&gt; 1px solid #dadada</span>;<span style="color: #ff0000"&gt;
                height</span>:<span style="color: #0000ff"&gt; 58px</span>;<span style="color: #ff0000"&gt;
                line-height</span>:<span style="color: #0000ff"&gt; 58px</span>;<span style="color: #ff0000"&gt;
                width</span>:<span style="color: #0000ff"&gt; 98px</span>;
            }<span style="color: #800000"&gt;
            .nav ul li a </span>{<span style="color: #ff0000"&gt;
                display</span>:<span style="color: #0000ff"&gt; block</span>;<span style="color: #ff0000"&gt;
                padding-bottom</span>:<span style="color: #0000ff"&gt; 0</span>;
            }<span style="color: #800000"&gt;
            .nav ul li .actived </span>{<span style="color: #ff0000"&gt;
                border-bottom</span>:<span style="color: #0000ff"&gt; none</span>;
            }<span style="color: #800000"&gt;
            .nav ul li a:hover </span>{<span style="color: #ff0000"&gt;
                background-color</span>:<span style="color: #0000ff"&gt; #6E6E6E</span>;<span style="color: #ff0000"&gt;
                color</span>:<span style="color: #0000ff"&gt; #fff</span>;
            }<span style="color: #800000"&gt;
        }</span></pre>

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

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

OK，完成。

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

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

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

猜你在找的HTML5相关文章