李涛自留地
回到顶部
首页 > 前端 > 使用Css制作一个手机端三条杠的导航菜单栏字体图标

使用Css制作一个手机端三条杠的导航菜单栏字体图标

文章目录

在我们日常建站的过程中，网站导航菜单栏文字链接太多，在手机端的时候，我们通常都会使用三条杠字体图标来隐藏网站菜单栏，当我们点击三条杠的字体图标导航栏的时候，导航菜单栏就会显示出来。通常我们都会使用三条杠的字体图标来实现，那么如果使用纯Css样式能不能实现呢？下面是李涛自留地使用Css制作一个手机端三条杠的菜单栏字体图标。

一、Css制作一个手机端三条杠的菜单栏图标思路

1、分析三条杠的菜单栏图标结构

三条杠的导航菜单栏图标，三条杠的宽和高都是一样的，所以在写Css样式的时候，需要注意。

2、三条杠的菜单栏图标制作思路

（1）、我们可以设置出一条线，设置这条线的宽高，我们就把这条线看做是三条线中间的那条线，并设置背景颜色；

（2）、再使用padding外边距设置上下两个方向的距离，padding上下的值要和这条线的宽度一致；

（3）、使用border-top和border-bottom的border边框的上下两个边框属性给中间那条杠（线）添加上下两个边框，这两个边框的高度要和中间那条线的高度一致；

（4）、添加background-clip属性为content-box，这是最为关键的一步，就是设置背景被裁剪到内容框的区域，如果不添加此样式，背景颜色将填充整个选择器，就不会出现中间有空白的三条杠的效果。

二、Css制作一个手机端三条杠的菜单栏图标代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css制作一个手机端三条杠的菜单栏图标</title>
    <style>
        .menu-icon {
            position: absolute;
            top: 3rem;
            left: 3rem;
            width: 2rem;
            height: .3rem;
            padding: .3rem 0;
            background-color: #069;
            border-top: .3rem solid #069;
            border-bottom: .3rem solid #069;
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <div class="menu-icon"></div>
</body>

</html>

Css制作一个手机端三条杠的菜单栏图标代码显示截图：

使用Css制作一个手机端三条杠的导航菜单栏字体图标

如上图所示，使用相对定位，将三条杠的导航菜单栏图标定位在了离顶部和左边3rem的距离。在实际前端模板制作中，我们会在网页header部分使用绝对定位，导航菜单栏图标使用相对定位把图标定位在屏幕的右上角。

以上就是使用Css制作一个手机端三条杠的导航菜单栏字体图标样式的全文，其实我们使用Css样式还可以制作其他样式的图标，Css样式其实还是很强大的，当然更多美观好看的样式还是需要自己实际操作中摸索的。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。