javascript - Reusing Nav as dropdown menu on tablet/mobile -
i have created nav hides , displays menu items , displays menu icon when on tablet/mobile view.
how can adapted when clicked on, 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 codepen: http://codepen.io/anon/pen/wbbrvk?editors=110
i recommend looking here
if scroll bottom shows how dom manipulation event handling well.
my guess when user clicked on link change css of 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 isn't complete solution, thats figure ;), have pointed in right direction!
Comments
Post a Comment