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

Question

I have created a nav which hides and displays the menu items and displays a menu icon when on tablet/mobile view.

How can this be adapted that when clicked on, the menu items drop down?

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>

Here's my codepen: http://codepen.io/anon/pen/WbbRvK?editors=110

Answer 1

I would recommend looking here

If you scroll to the bottom it shows how to do DOM manipulation with event handling as well.

My guess is that when the user clicked on the link you would change the CSS of the sub menu:

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

Obviously this isn't a complete solution, but thats for you to figure ;), hopefully I have pointed you in the right direction!

Answer 2

Bootstrap makes this quite easy, provided that you are able/happy to add it to your project.

See the example navbar demo here .

Answer 3

You can achieve it by a checkbox hack.

refer this tut: http://css-tricks.com/the-checkbox-hack/