having an issue with my jquery responsive webpage -
i building responsive webpage , far have of functioning. there 1 aspect cannot seem use jquery move vertical menu on left of page -280px left (off page) therefore entire content of page shown. should happen when submenu link clicked , return when link @ top of page clicked. hope have described clearly. how go writing such script?
html <nav class="pushmenu-left"> <div id="caption"><h1>mobile</h1></div> <ul> <li><a href="#tab-1">home</a></li> <li><a href="#tab-2">support</a></li> <li class="active"><a href="#tab-3">web design</a> <ul> <li><a href="#tab-4">html</a></li> <li><a href="#tab-5">css</a></li> <li><a href="#tab-6">javascript</a></li> </ul> </li> <li><a href="#tab-7">content management</a> <ul> <li><a href="#tab-8">joomla</a></li> <li><a href="#tab-9">drupal</a></li> <li><a href="#tab-10">wordpress</a></li> <li><a href="#tab-11">concrete 5</a></li> </ul> </li> <li><a href="#tab-12">contact</a> <ul> <li><a href="#tab-13">general inquiries</a></li> <li><a href="#tab-14">ask question</a></li> </ul> </li> <li><a href="#tab-15">about</a></li> </ul>
try library: http://www.berriart.com/sidr/
or if don't need animations , want build hand, try this:
$("#id-of-submenu-link-that-hides-menu").on('click',function() { var menu = $('#id-of-menu-to-hide'); menu.css('position','absolute');//if have positioned other way menu.css('margin-left','-280px'); }); $("#id-of-link-to-show-menu").on('click',function() { var menu = $('#id-of-menu-to-hide'); menu.css('position','inherit');//or whatever menu.css('margin-left','0'); });
you may or may not need mess position of menu - depends on how have positioned. try , without positioning change if you're not sure.
hope helps. let me know if of doesn't make sense , luck!
Comments
Post a Comment