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

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -