Question

我有一个使用纯html / css（不是bootstrap）的自定义导航菜单，手机上应该有一个汉堡图标：

<label for="toggle">&#9776;</label>

当我最小化浏览器宽度时，它出现在计算机上，但不会出现在手机上，我认为问题是"☰"，是否有一个unicode或其他适用于手机的替代品？

Answer 1

尝试使用：

<label for="toggle">&#8801;</label>

这应该有希望在移动设备上解决您的问题！希望它有所帮助。

Answer 2

尝试使用:after和:before等css伪类。它适用于所有浏览器和设备。

＆＃13;

.header {
  background-color: #333;
  width: 100%;
}
.header nav {
  width: 100%;
  margin: 0 auto;
  position: sticky;
  height: 100vh;
  top: 0px;
}
.header nav .btn {
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  background-color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  margin: 16px;
}
.header nav .btn span {
  background-color: #FD5B4E;
  width: 95%;
  height: 0.1875rem;
  position: relative;
  display: block;
  margin: auto;
  top: 50%;
}
.header nav .btn span:before {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  top: -0.625rem;
  position: absolute;
}
.header nav .btn span:after {
  content: '';
  background-color: #FD5B4E;
  width: 100%;
  height: 0.1875rem;
  display: block;
  position: absolute;
  top: 0.625rem;
}

＆＃13;

<body>
    <header id="header" class="header sidbar">

        <nav>
            <button class="btn"><span></span></button>

        </nav>
    </header>
    <!-- /header -->


</body>

＆＃13;

Answer 3

这是我正在使用的菜单，它是纯CSS / HTML并为手机制作汉堡包图标：

HTML：

<header class="navigation">
            <a href="" class="logo"><img border="0" alt="Logo" src="images/logo.png" width="33" height="36.4">Logo</a>
            <input class="button" type="checkbox" id="button" />
            <label class="icon" for="button"><span class="navicon"></span></label>
            <ul class="menu">
                <li><a href="#work">Tutorials</a></li>
                <li><a href="#about">Creations</a></li>
                <li><a href="#careers">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </header>

CSS：

.menu {
  position:relative;
}

.navigation {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
}

.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.navigation li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  color:#000000;
}

.navigation li a:hover,
.navigation .button:hover {
  background-color: #f4f4f4;
}

.navigation .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
  color:#000000;
}

.navigation .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
}

.navigation .icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.navigation .icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.navigation .icon .navicon:before,
.navigation .icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.navigation .icon .navicon:before {
  top: 5px;
}

.navigation .icon .navicon:after {
  top: -5px;
}

.navigation .button {
  display: none;
}

.navigation .button:checked ~ .menu {
  max-height: 240px;
}

.navigation .button:checked ~ .icon .navicon {
  background: transparent;
}

.navigation .button:checked ~ .icon .navicon:before {
  transform: rotate(-45deg);
}

.navigation .button:checked ~ .icon .navicon:after {
  transform: rotate(45deg);
}

.navigation .button:checked ~ .icon:not(.steps) .navicon:before,
.navigation .button:checked ~ .icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 48em) {
  .navigation li {
    float: left;
  }
  .navigation li a {
    padding: 20px 30px;
  }
  .navigation .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .navigation .icon {
    display: none;
  }
}

jsfiddle：https://jsfiddle.net/96a2pudt/2/

如何显示汉堡图标＆＃34;☰＆＃34;在手机上？

3 个答案: