在平板电脑/移动设备上重用导航作为下拉菜单答案

【问题标题】：Reusing Nav as dropdown menu on tablet/mobile在平板电脑/移动设备上重用导航作为下拉菜单
【发布时间】：2015-01-17 03:25:58
【问题描述】：

我创建了一个导航，它隐藏和显示菜单项，并在平板电脑/移动设备视图上显示菜单图标。

如何调整当点击时，菜单项下拉？

HTML：

<nav class="site-nav">
  <ul>
    <li><a href="index.html"><span class="icon-home"></span></a></li>
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
  </ul>
</nav>
<a class="navicon-button x">
  <div class="navicon"></div>
</a>

这是我的密码笔：http://codepen.io/anon/pen/WbbRvK?editors=110

【问题讨论】：

欢迎来到 StackOverflow！请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”。
@AndreasNiedermair - 感谢您的澄清，所做的更改。
我不明白这个问题：您是否在寻求一种方法来隐藏菜单并在用户单击您的图标时显示它？
我建议，如果你正在做一个 Angular JS 应用程序，你可以使用它内置的 jqLite 库。如果您不使用 jQuery。你更喜欢哪个解决方案，jQuery 还是 Angular？
@No1_Melman - Angular 将是首选。

标签： javascript jquery angularjs css

【解决方案1】：

我会推荐看here

如果您滚动到底部，它还会显示如何使用事件处理进行 DOM 操作。

我的猜测是，当用户点击链接时，您会更改子菜单的 CSS：

var location = {
     left: element[0].left,
     top: element[0].top
    };

var subMenu = angular.element('.subMenu');
subMenu.css({
     position: 'absolute',
     top: location.top + 50 + "px",
     left: location.left + "px",
     cursor: 'pointer'
    });

显然这不是一个完整的解决方案，但那是你想办法;），希望我已经为你指出了正确的方向！

【讨论】：

【解决方案2】：

Bootstrap 让这变得非常简单，前提是您能够/乐意将其添加到您的项目中。

请参阅示例导航栏演示 here。

【讨论】：

感谢建议，是的，Bootstrap 很简单，我更喜欢自己写。

【解决方案3】：

你可以通过一个复选框来实现它。

参考这个 tut：http://css-tricks.com/the-checkbox-hack/

【讨论】：