CODEWITHSUNDEEP
jqueryhtmlcss
avater
avater

Reputation: 100

Overlay Menu (jQuery/CSS)

I'm currently working on a site which is optimized for mobile and stationary devices. currently I'm thinking of the main navigation which should work like an overlay which slides down, just like http://www.teehanlax.com/.

but i have no idea how to make that overlay effect. only thing I'm getting done, is that the part of the page slides down when the menu button is clicked. but this is no real overlay effect.

syntax of the menu:

<div id="navContainer">  
    <div id="topNav">
    <div class="top">
    <div class="heading">
        <div id="logo">LOGO</div>
    </div>
    <a href="#" class="menu">MENU</a> 
</div>

        </div>


    </div>

<div class="drawer">
<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
</div>

the menu works much like that http://jsfiddle.net/RFpDJ/1/ but it should overlay the content and not push it down.
Any ideas?

Upvotes: 1

Views: 3536

Answers (3)

maverickosama92
maverickosama92

Reputation: 2725

check this: 

.drawer {
  position: absolute;
  width:100%;
  top:-100px;
}

.content{
 top:90px;
 position:absolute;
 width:100%;
 height:400px;
}

working here: http://jsfiddle.net/RFpDJ/14/

Upvotes: 0

glautrou
glautrou

Reputation: 3198

Look at my solution.

I changed the menu to absolute positioning (position:absolute;) and moved the content div outside of the banner.

Upvotes: 0

xec
xec

Reputation: 18024

If you want to remove the menu from normal layout flow, you can simply give it position: absolute;

.drawer {
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/RFpDJ/12/

I also moved the content outside of .drawer because you don't want that pushed down as well as the menu. (Also tweaked some other values, but they are largely irrelevant.)

Upvotes: 2

Related Questions