How to prevent page from jumping on menu open?


Tags: html,css

Problem :

I have a css menu and would like to open it without moving the rest of the page.

Here is the current fiddle: http://jsfiddle.net/50c1Lhe7/

HTML

<div class="logo-container large-6 columns">
    <div class="large-3 columns">IMAGE</div>
    <div class="large-9 columns">
        <a href="/" rel="home">
            <h1 class="site-title">WORDS</h1>
            <div class="site-slogan">MORE WORDS</div>
        </a>
    </div>
</div>

<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">☰ MAIN MENU</a>
    <a href="#" title="Hide navigation">☰ MAIN MENU</a>
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title=""><a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">About</a></li>
                <li class="first leaf"><a href="/">About</a></li>
                <li class="leaf" title=""><a href="/" title="">Our Team</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>

SCSS

#nav{
    display: none;
    width: 45%;
    height: 55px;
    float: left;
    padding: 20px;
    #main-menu {
        ul { float: none; }
        li.expanded.show-for-small { display: none !important; }
    }
    #main-menu{
        margin-top: 21px;
        padding: 0;
        width: 100vw;
    }
}
#nav > a{
    display: none;
}
#nav li  {
    position: relative;
    list-style-type: none;
    padding-top: 15px;
}
#nav > ul{
    height: 3.75em;
}
#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}
#nav li ul{
    display: none;
    position: absolute;
    top: 100%;
}
#nav li:hover ul,
#nav li:focus ul { display: block; }
    #nav {
        position: relative;
        z-index: 999;
        display: block;
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type { display: block; }
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
    }
    #nav > ul { left: 0; }
    #nav:target > ul { display: block; }
    #nav > ul > li {
        width: 100%;
        float: none;
        padding: 10px 0 10px 20px;
        text-transform: uppercase;
        list-style-type: none;
    }
    #nav > ul > li.first.leaf.active { padding-top: 5px; }
    #nav li ul { position: static; }

Since the menu works by targetting the nav id, whenever the menu is clicked to open it drops down to the nav section. How would I change this so that it can be clicked and open without moving to the section? If this can be done easier with javascript please let me know.



Solution :

The jump is a common problem for using :target for menu, suggest to use checkbox instead, it also works on more browsers. Simplified demo follows.

JSFIDDLE DEMO

/*main menu*/
nav {
    margin-top: 100px;
}
.menu-label {
    display: block;
    background: yellow;
}
.main-nav {
    display: none;
}
.menu-checkbox {
    display: none;
}
.menu-checkbox:checked + .main-nav {
    display: block;
}
/*sub menu*/
.dropdown {
    display: none;
}
.main-nav li:hover .dropdown{
    display: block;
}
<nav>
    <label for="menu-1" class="menu-label">☰ MAIN MENU</label>
    <input id="menu-1" class="menu-checkbox" type="checkbox" />
    
    <ul id="main-menu" class="main-nav left">
        <li class="first leaf" title=""><a href="/" title="">Home</a></li>
        <li class="expanded has-dropdown" title="">
            <a href="/" title="">About</a> 
            <ul class="dropdown">
                <li class="expanded show-for-small"><a href="/" title="">Sub menu 1</a></li>
                <li class="first leaf"><a href="/">Sub menu 2</a></li>
                <li class="leaf" title=""><a href="/" title="">Sub menu 3</a></li>
            </ul>
        </li>
        <li class="leaf" title=""><a href="/" title="">Publications</a></li>
        <li class="leaf" title=""><a href="/" title="">Events</a></li>
        <li class="leaf active" title=""><a href="/" title="" class="active">Blog</a></li>
        <li class="last leaf"><a href="/">Contact</a></li>
    </ul>
</nav>


    CSS Howto..

    css code how to change active navigation button color

    How to get similar style as JQuery UI website itself

    CSS: How to accomplish a div which is blurred at the edges?

    How to adjust width of right-aligned navbar

    How do I show just one image and center it in a slider?

    How do I make a (mock) bank system? [closed]

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to use fadeTo, etc. animation tags along with a css change statement in jquery?

    How to change the css of a text input using jquery?

    How to add top-right arrow in bootstrap navbar dropdown menu

    Pure CSS3 show/hide full height div with transition

    How to layer box-shadows using z-index?

    CSS: How to target all elements within a given ID

    How to stop breaking tables border when page is spliting?

    How do you make an input element fill parent?

    How do you style/select inline-block elements in the first row when in a flexible container?

    How to set focus/active on the clicked li(tab) in angular.js

    How to copy a CSS style from a website for re-use

    How do I modify IE Gradient CSS to use height and a third color?

    How to control the layout in JSF?

    How to restore CSS style to its super class

    How to fixed the form fields alignment issues using css and bootstrap

    Give a box an ID, once clicked shows alert of that ID?

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to show a region on a image with CSS

    How to place a div below another div?

    How to use 100% height with css

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?

    Phonegap : how Control the font size of the Mobile?

    How to find the screen width and apply it to a particular css