如何在手机上显示汉堡图标“☰”?
问题描述:
我有一个自定义导航菜单使用纯HTML/CSS(不引导),这里是应该出现在手机上,一个汉堡图标:如何在手机上显示汉堡图标“☰”?
<label for="toggle">☰</label>
看来计算机上时,我尽量减少浏览器的宽度,但不在手机上,我认为问题是"☰"
,是否有一个unicode或它的任何替代品,可以在手机上工作?
答
尝试使用:
<label for="toggle">≡</label>
这应该希望解决在移动您的问题!希望能帮助到你。
答
尝试使用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>
答
这是我使用的菜单,它是纯粹的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/
记住,''&9776;是用于与[特定含义] Unicode字符(http://www.codetable.net/decimal/9776)的实体;那意思不是“汉堡菜单”。 :)还有一些其他类似的字符,比如['≡'](https://en.wikipedia.org/wiki/Triple_bar),它更常用于此目的,并且更可能工作,因为它是更多普遍支持的角色。汉堡菜单的用途仍然没有语义上的正确,但是如果你必须使用一个字符,请使用这个字符)。 – Spudley
[可能是“hamburger icon”或HTML实体☰?的回退的原因是什么?](https://*.com/questions/19282760/what-is-a-fallback-for-the-hamburger-icon-或-HTML实体-9776) –