三线菜单? Navicon?抽屉?菜单图标?侧滑?三条纹?汉堡包?

时间:2013-12-05 14:16:32

标签: mobile user-interface web user-controls responsive-design

在设计会议期间,问题出现了“具有三条水平线的组件的名称是什么?”这在移动应用和移动网络中很常见,可视化某些内容以进行滑动。谷歌搜索主题似乎经常使用Navicon或抽屉,虽然我也看到Side Swipe甚至Hamburger。试图达成共识......

enter image description here

enter image description here

8 个答案:

答案 0 :(得分:4)

我认为最好的候选人是“三条水平线”。

看一下这篇文章,他们简要介绍了它的用法:http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/

答案 1 :(得分:1)

我认为它应该是#34;导航#34;作为三条水平线的缩写,更易于口语。但它已被称为汉堡包或抽屉菜单。

答案 2 :(得分:1)

显示andriod应用程序主菜单的三行图标名称是Navigation Drawer。我们可以使用任何图标。

答案 3 :(得分:0)

最早的参考文献名称为菜单按钮,由Norm Cox和Xerox在1990年左右创建......

http://vimeo.com/61556918

http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787

答案 4 :(得分:0)

我认为最好的是三条带有效果动画的水平线来显示菜单

如果我们用css和javascript讨论Web应用程序,那么很容易实现。

您可以使用以下jquery插件: https://www.articlage.com/adrianillo/article/HamburgerMenu

enter image description here enter image description here

只需将以下元素添加到HTML代码中:

<div id="hamburgerMenu"></div>

运行以下javascript:

$( “#hamburgerMenu”)。hamburgerMenu({                  mainContent:'mainContent',

         }, [
             {"id":"Brain","href":"index.html","text":"Pinky"},
             {"id":"Spongebob","href":"Spongebob.html","text":"Sponge Bob"},
             {"id":"Ghostbusters","href":"Ghostbusters.html","text":"Ghostbusters"},
             {"id":"fraggle","href":"other.html","text":"Fraggle rock"}
         ]
 );

在此处试用演示:https://db.tt/FQP2dv7Y

答案 5 :(得分:0)

我自己也在想这件事...我不知道所以我最近在工作中将它称为“三栏”,而且它似乎与我的同事一起(没有开玩笑)。发音就像“三角形”或“三轮车”,不可否认的是,我的灵感来自凯尔特人的triskele(发音更像是“miss”而不是“my”)。

答案 6 :(得分:0)

<div id="lines"></div>

CSS

#lines { 
    border-bottom: 17px double black; 
    border-top: 6px solid black; 
    content:"";
    height: 5px; 
    width:30px;
}

结果:

three lines css menu

答案 7 :(得分:0)

将其命名为...折叠菜单。

简单点;易于管理员或用户理解。

就是这样!

;-)