0 Replies Latest reply on Nov 4, 2013 12:12 PM by Cons1875

    mobile nav issues

    Cons1875

      Hello,

       

      I'm having an issue with the navigation for my mobile layout.

      Here is what I have:

      media queries with my default being mobile.

      A div with a menu button

      A div called "mobilNav" that contains:

      *a background div (black with some transparency)  behind the following 3 buttons

      *3 separate buttons

       

      Here is the html structure:

       

      <div id="menuButton"></div>

      <div id="mobilNav>

       

      <div id="blackCover"></div>

      <div id="call" class="button"></div>

      <div id="map" class="button"></div>

      <div id="email" class="button"></div>

       

      </div> <!---mobilNav close--->

       

      What I'd like to have happen is have my main page (with content and links) un-obscured by my "mobilNav". When one clicks on "menuButton"

      the "blackCover" slides from offscreen left to fill the screen, then each button animates on.

       

      I have mobileNav display set to off, on frame 1, and on at frame 2 once the menuButton is clicked. I do this because without it, I can't click on any links on my page, presumably because it's being obscured by "mobilNav." However once I add a display or opacity keyframe to "mobilNav", it changes the position to "relative" and it goes to the bottom of the page.  Hope I've articulated my issue will enough to be understood.

       

      Thanks in advance for any suggestions.

      Tom