Question

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

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

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

Answer 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'
    });

显然这不是一个完整的解决方案，但这可以让你想象;），希望我指出你正确的方向！

Answer 2

如果你能够/很乐意将它添加到你的项目中，那么Bootstrap可以非常简单。

请参阅示例navbar demo here。

Answer 3

你可以通过复选框黑客实现它。

请参考此问题：http://css-tricks.com/the-checkbox-hack/

在平板电脑/手机上重复使用Nav作为下拉菜单

3 个答案: