欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 >建站经验 >HTML > 响应式布局之网站头部导航

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

2018-10-11 338 收藏 0 赞一个 0 真差劲 0 去评论

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

Meta标签定义

<!--使用 viewport 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" />
<!--iPhone会将看起来像电话号码的数字添加电话连接,应当关闭-->
<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>

定义样式

<style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            
            .nav {
                position: relative;
                background-color: #fff;
                height: 78px;
                width: 100%;
                border-bottom: 1px solid #DADADA;
            }
            
            .nav img {
                position: absolute;
                right: 20px;
                top: 30px;
                width: 28px;
                display: none;
            }
            
            .nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
            }
            
            .nav ul li {
                height: 78px;
                width: 168px;
                line-height: 78px;
                text-align: center;
                display: inline-block;
            }
            
            .nav ul li:hover {
                cursor: pointer;
            }
            
            .nav ul li a {
                text-decoration: none;
                color: #666;
                padding-bottom: 8px;
            }
            
            .nav ul li .actived {
                border-bottom: 3px solid #EE5C42;
            }
           
        </style>

查看效果图

871647-20161216165943589-300291518.png

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

<script>
            $(function() {
                $(".nav ul li").click(function() {//导航点击
                    $(".nav ul li a").removeClass("actived");
                    $(this).children("a").addClass("actived");
                });
            });
        </script>

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

上面最开始我们已经添加支持手机的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,完成。

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

1.png

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

1.png

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论
分享是个好习惯