我在哪裏可以獲得我的網頁的「3水平線」符號？

我試圖找出如何讓我的網頁上這個符號：我在哪裏可以獲得我的網頁的「3水平線」符號？

什麼叫做符號？有沒有辦法把它在我的網頁像有使用

&#9662;

謝謝你提前拿到▾。

來源

2016-01-09 INeedHelp

這個符號即通常所說的「漢堡包按鈕」。有很多方法可以實現，如下所述：https://css-tricks.com/three-line-menu-navicon/ – Akatosh

動畫片http://tympanus.net/Tutorials/AnimatedMenuIcon/，https ：//codepen.io/kyleHenwood/pen/Alayb，http://codepen.io/designcouch/pen/Atyop，http://callmenick.com/_development/css-hamburger-menu-icons/ –

我已更新我用HTML實體版本回答。請檢查一下。 – user

link in comment提供的所有方法都很棒。但也有一種不在那裏描述的方式，就像引導程序也在使用一樣。這種方法的偏好是因爲它是純粹的CSS動畫。

<div class="menu-icon"> 
    <span class="line"></span> 
    <span class="line"></span> 
    <span class="line"></span> 
</div> 

.menu-icon > .line { 
    background-color: #292929; 
    height: 2px; 
    display: block; 
} 
.menu-icon > .line + .line { 
    margin-top: 8px; 
}

來源

2016-01-09 13:22:30

https://jsfiddle.net/znec584x/來自Farzad的小編輯適用於未來的用戶。謝謝大家！ – INeedHelp

這是一個所謂的「漢堡菜單」。

最接近的HTML實體，你可以得到的是≡，大膽≡≡或&equiv;，supported almost everywhere。

還有☰☰，但它是less supported，特別是它是not available on Android。

它可以夠一個小圖標，如果你需要一個更大的，這裏是一個純CSS實現：

.ham-menu { display: inline-block; position: relative; margin: 35px 0; } /* margin = (width-height)/2 */ 
 
.ham-menu, .ham-menu::before, .ham-menu::after { width: 100px; height: 20px; border-radius: 7px; background-color: black; } 
 
.ham-menu::before, .ham-menu::after { content: ""; display: block; position: absolute; } 
 
.ham-menu::before { bottom: 130%; } .ham-menu::after { top: 130%; }

<span class="ham-menu"></span>

來源

2016-01-09 13:46:20 user

我在哪裏可以獲得我的網頁的「3水平線」符號？

回答

相關問題