用CSS代替汉堡符号

UNICODE符号&#9776【9776】常常被国外的主题开发者们用作menu图标,它的官方名称是hamburger icon。
但是,在某些系统(比如安卓)下,字库中并没有包括这个图标,所以就会显示成一个小方块,非常难看。
在国外某设计论坛的一个回帖中找到了解决方案。

1.用button代替超链

<div id="menu">
  <a id="metaMenu" href="#">&#9776;</a>
</div>

这里替换成

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

2.为button添加CSS

.navbar-toggle {
   position: relative;
   padding: 9px 10px;
   margin-top: 8px;
   margin-right: 15px;
   margin-bottom: 8px;
   border: 1px solid transparent;
   border-radius: 4px;
}

.navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color:#000000;
   border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
}

当然颜色可以自己调整。

据说twitter上的menu图标就是这么实现的哦!!

已有5条评论

  1. 抓个图做实例嘛!
    代码都是一行,看起来很累。

    1. 那个codehighlight不知道怎么搞的,就是不出现高度
      用手机访问我这里就是实例.

        1. 是的,就这么简单

      1. 代码修改了下一目了然,button加span

        1. 我没改代码.正好你赶上我用排除法找问题了.
          问题找到了,但还没想好怎么解决.code highlight的JS跟NGG gallery有冲突

          1. 你说的两个插件我都没用,我连代码插件都没用,直接用pre,有遇到会被编译的我在<左右手动价格span就搞定。

  2. 博主眼力不错,发现了这么好的解决办法。

你好,新朋友。留言前请先填写昵称邮箱