手机上的隐藏导航栏

时间:2017-07-25 23:01:40

标签: javascript html css

我希望教育网站的导航菜单在结构上与找到here的教育网站类似。

记下左侧导航菜单标题和列表项。在桌面视图中,所有导航项都会显示,但在移动视图中,只有标题可见(您必须单击+图标才能显示导航菜单项)

看看它出现的元素,在后台工作的一些javascript在网站进入移动视图时切换CSS类名。

我一直试图重新创造类似无济于事的东西......

有人可以使用JSFiddle使用这样的简单结构来刺破它吗?

导航标题(点击,导航菜单项1-3出现/消失在下面)

  • 菜单链接1
  • 菜单链接2
  • 菜单链接3

我真的很感激!谢谢!

1 个答案:

答案 0 :(得分:0)

已经存在满足您要求的引导程序模板和插件。您也可以利用android材料设计指南&样本模板。

  1. https://getmdl.io/ (编辑:从OP的评论复制:) ...是谷歌制作网络应用程序的设计指南。我们的想法是让一致的看起来像本地人一样。该网站包括图标,小部件,导航栏等组件。还包含可以从git克隆或下载的示例模板。

  2. http://getbootstrap.com/ 另一方面,Bootstrap具有相同的功能,但其更具针对性的移动优先设计方法。

  3. 如果你想要两个,你可以看看materializecss.com