如何在手机上显示汉堡图标“☰”？

我有一个自定义导航菜单使用纯HTML/CSS（不引导），这里是应该出现在手机上，一个汉堡图标：如何在手机上显示汉堡图标“☰”？

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

看来计算机上时，我尽量减少浏览器的宽度，但不在手机上，我认为问题是"☰"，是否有一个unicode或它的任何替代品，可以在手机上工作？

来源

2017-10-21 Jim

记住，''&9776;是用于与[特定含义] Unicode字符（http://www.codetable.net/decimal/9776）的实体;那意思不是“汉堡菜单”。 :)还有一些其他类似的字符，比如['≡']（https://en.wikipedia.org/wiki/Triple_bar），它更常用于此目的，并且更可能工作，因为它是更多普遍支持的角色。汉堡菜单的用途仍然没有语义上的正确，但是如果你必须使用一个字符，请使用这个字符）。 – Spudley

[可能是“hamburger icon”或HTML实体☰？的回退的原因是什么？]（https://stackoverflow.com/questions/19282760/what-is-a-fallback-for-the-hamburger-icon-或-HTML实体-9776） –

尝试使用：

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

这应该希望解决在移动您的问题！希望能帮助到你。

来源

2017-10-21 15:59:30 jstoobz

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

.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; 
 
}

<body> 
 
    <header id="header" class="header sidbar"> 
 

 
     <nav> 
 
      <button class="btn"><span></span></button> 
 

 
     </nav> 
 
    </header> 
 
    <!-- /header --> 
 

 

 
</body>

来源

2017-10-21 16:02:51

这是我使用的菜单，它是纯粹的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/

来源

2017-10-21 16:54:20 Daniell

如何在手机上显示汉堡图标“☰”？

回答

相关问题