超小屏幕下的导航栏-汉堡菜单按钮效果

最新推荐文章于 2024-05-30 15:07:12 发布

阿常11

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量987

点赞数 30

分类专栏： web 文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/weixin_72939806/article/details/139020696

版权

web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

倘若代码中有任何问题或疑问，欢迎留言交流~

响应式设计

响应式布局里，我们将情况分为五种：

在屏幕宽度最大为575px（通常是手机设备）
当屏幕宽度在576px到767px（通常是平板设备）
当屏幕宽度在768px到991px（通常是小型电脑设备）
当屏幕宽度在992px到1199px（通常是中型电脑设备）
当屏幕宽度在1200px以上（通常是大屏电脑设备）
并且在css文件夹中建立media.css文件，用来存放编写网页的响应式效果。

导航栏的响应式布局思路

导航栏的响应式布局思路为，小屏幕时为了观感，用汉堡菜单按钮来代替导航栏的选项。即实现下图中的效果，而其余屏幕则改变导航栏的大小即可。
下面先给出导航栏的基础样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉堡菜单</title>
    <style>
        /* 将所有元素的内外边距和边框初始化为0 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        /* 使网页占满整个窗口 */
        html, body {
            width: 100%;
            height: 100%;
        }
        /* 导航栏的宽，以及横向排列 */
        .nav {
            width: 100%;
            margin-top: 10px;
        }
        /* 一般情况下汉堡菜单不会显示 */
        #toggle , #ham_icon{
            display: none;
        }
        /* 列表的样式 */
        .nav ul {
            width: 100%;
            list-style: none;
            float: left;
        }
        .nav ul li {
            display: inline;
            margin-left: 3%;
        }
        .nav ul li a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="checkbox" id="toggle" />
        <label for="toggle" id="ham_icon">☰</label>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
    </div>
</body>
</html>

这样我们就得到了一个简易的导航栏，当然我们在实际开发中可以让导航栏更加美观，简易效果如下：在这里插入图片描述

使用CSS实现汉堡菜单

隐藏复选框：我们首先会在HTML中创建一个复选框，但通常我们会在CSS中将其隐藏起来。虽然用户看不到这个复选框，但我们可以使用CSS选择器探求其是否被选中。
使用label标签：标签的 “for” 属性与复选框的 “id” 属性匹配，这样当我们点击标签时，就会选中复选框。
创建汉堡图标：我们通常会将汉堡图标放在标签内，这样当用户点击图标时，就会选中复选框。
CSS选择器: 我们可以使用 “:checked” 的 CSS 伪类选择器来检测复选框是否被选中。当复选框处于选中状态时，“:checked” 伪类就会生效。
更改导航菜单的显示状态：我们使用复选框的选中状态（:checked）和CSS的相邻兄弟组合器（+）来更改导航菜单的显示状态。一般来说，我们会在默认状态下隐藏导航菜单，在复选框被选中时显示导航菜单。

基于上面的响应式设计，我们可以得到响应式布局css代码结构如下：

/* 超小屏幕（小于等于575px） */
@media (max-width: 575px) {
    
}
/* 小屏幕 */
@media (min-width: 576px) {

}
/* 中等屏幕 */
@media (min-width: 768px) {
    
}
/* 大屏幕 */
@media (min-width: 992px) {
    
}
/* 超大屏幕 */
@media (min-width: 1200px) {
    
}

汉堡菜单只在超小屏幕下有效果，所以我们就只编写超小屏幕下的css代码咯。
编写出的代码如下：

/* 超小屏幕情况下 */
        @media (max-width: 575px) {
            /* 注意只显示汉堡图标，而不显示复选框的选中框 */
            #ham_icon {
                display: block;
                /* 让汉堡图标居中显示 */
                text-align: center;
            }
            /* 复选框没选中时（一般情况）隐藏列表 */
            .nav ul {
                display: none;
            }
            /* li标签设为块级元素，方便后面的显示，但因为ul为none所以列表一般是不显示的 */
            /* 所以这里的css代码都为了li标签的显示效果 */
            .nav ul li {
                width: 100%;
                display: block;
                text-align: center;
                margin: 0;
                padding: 0;
            }
            /* 当复选框被选中时，ul标签显示 */
            #toggle:checked~ul {
                display: block;
            }
        }

效果图：
非超小屏幕下：
在这里插入图片描述
超小屏幕没点击汉堡菜单：

超小屏幕点击汉堡菜单下：

总代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉堡菜单</title>
    <link rel="stylesheet" href="../css/media.css">
    <style>
        /* 将所有元素的内外边距和边框初始化为0 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        /* 使网页占满整个窗口 */
        html, body {
            width: 100%;
            height: 100%;
        }
        /* 导航栏的宽，以及横向排列 */
        .nav {
            width: 100%;
            margin-top: 10px;
        }
        /* 一般情况下汉堡菜单不会显示 */
        #toggle , #ham_icon{
            display: none;
        }
        /* 列表的样式 */
        .nav ul {
            width: 100%;
            list-style: none;
            float: left;
        }
        .nav ul li {
            display: inline;
            margin-left: 3%;
        }
        .nav ul li a {
            text-decoration: none;
            color: black;
        }
        /* 超小屏幕情况下 */
        @media (max-width: 575px) {
            /* 注意只显示汉堡图标，而不显示复选框的选中框 */
            #ham_icon {
                display: block;
                /* 让汉堡图标居中显示 */
                text-align: center;
            }
            /* 复选框没选中时（一般情况）隐藏列表 */
            .nav ul {
                display: none;
            }
            /* li标签设为块级元素，方便后面的显示，但因为ul为none所以列表一般是不显示的 */
            /* 所以这里的css代码都为了li标签的显示效果 */
            .nav ul li {
                width: 100%;
                display: block;
                text-align: center;
                margin: 0;
                padding: 0;
            }
            /* 当复选框被选中时，ul标签显示 */
            #toggle:checked~ul {
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="checkbox" id="toggle" />
        <label for="toggle" id="ham_icon">☰</label>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
    </div>
</body>
</html>