仿bootstrap 纯css移动端菜单栏三横杠小图标

来源：互联网发布：python pdf转html代码编辑：程序博客网时间：2024/06/05 10:28

网页适配移动端的时候，menu菜单栏要隐藏到顶部右侧，这个时候就会有三根横岗的小图标。这里就是不用图片，直接用标签+css写的。

这是效果图：

这是完整的代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    .nav-mobile-button {        position: relative;        float: right;        padding: 9px 10px;        margin-top: 8px;        margin-right: 15px;        margin-bottom: 8px;        background-color: transparent;        background-image: none;        border: 1px solid transparent;        border-radius: 4px;        background: #eee;     }    .nav-mobile-button .sr-only {        position: absolute;        width: 1px;        height: 1px;        padding: 0;        margin: -1px;        overflow: hidden;        clip: rect(0, 0, 0, 0);        border: 0;     }    .nav-mobile-button .icon-bar {        display: block;        margin-top: 4px;        width: 22px;        height: 2px;        background: #f65d3f;        border-radius: 1px;     }    </style></head><body>    <button class="nav-mobile-button">        <span class="sr-only"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>    </button></body></html>

这是仿自bootstrap的样式。

阅读全文

0 0