如何在手機上顯示漢堡圖標「☰」？

我有一個自定義導航菜單使用純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

如何在手機上顯示漢堡圖標「☰」？

回答

相關問題