Full CSS Responsive Navigation Toggle, No Javascript

A short tutorial to do responsive/mobile navigation toggle with only CSS (no javascript/jquery needed).

I do understand, to disable javascript in browser is not common anymore, and more website rely on javascript to work properly. But it’s interesting subject isn’t it? We can use this as a fallback if javascript is disabled.

HTML

the navigation html is very simple and basic navigation in WordPress.

<nav id="menu-primary">

    <div class="menu-container">

        <div id="menu-toggle-primary">
            <a class="open-menu-primary" href="#menu-primary"><span>Open this menu</span></a>
            <a class="close-menu-primary" href="#"><span>Close this menu</span></a>
        </div><!-- .menu-toggle -->

        <div class="wrap">
            <ul class="menu-items" id="menu-primary-items">
                <li class="menu-item"><a href="#">Menu 1</a></li>
                <li class="menu-item"><a href="#">Menu 2</a></li>
                <li class="menu-item"><a href="#">Menu 3</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="#">Menu 3.1</a></li>
                        <li class="menu-item"><a href="#">Menu 3.2</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="#">Menu 4</a></li>
            </ul>
        </div><!-- .wrap -->

    </div><!-- .menu-container -->

</nav>

as you can see, before menu items, we create a div for navigation toggle, and inside the div we have 2 link, one for opening the menu, and one for closing the menu.

        <div id="menu-toggle-primary">
            <a class="open-menu-primary" href="#menu-primary"><span>Open this menu</span></a>
            <a class="close-menu-primary" href="#"><span>Close this menu</span></a>
        </div><!-- .menu-toggle -->

CSS (before toggle, closed state)

Default css is simple, we just need to hide our menu ul#menu-primary-items and hide the link to close the navigation because it’s already closed (hidden).

/* Hide Menu */
#menu-primary-items{
    display: none;
}
#menu-toggle-primary a.close-menu-primary{
    display: none;
}

CSS (toggle open)

As you can see in the demo/html source, in the link to open the toggle linked to #menu-primary element. So when we click the link, the browser will go to http://yourpageurl/#menu-primary.

Now the interesting part, we can actually style the targeted element using CSS :target selector.

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

So, if we add this CSS it will only do stuff for selected element when it’s active (targeted using #element in url).

#element:target{
    /* do stuff */
}

we are going to use :target CSS selector and we can do something like this:

/* Display Menu Items */
#menu-primary:target #menu-primary-items{
    display: block;
}
/* Hide Open Toggle Link */
#menu-primary:target #menu-toggle-primary a.open-menu-primary{
    display: none;
}
/* Show Close Toggle Link */
#menu-primary:target #menu-toggle-primary a.close-menu-primary{
    display: block;
}

At this state, the menu items will be displayed, and the link to open the menu will be hidden.

FAQ

Using only CSS will make the page “jump”

It’s unavoidable, using javascript/jquery we can prevent this using event.preventDefault(). in the demo I add the navigation at the top of the page to prevent the “jumping” experience. If you create the navigation toggle in other position (for example, after the header), you can prevent/make it less jumpy by linking the to the right/nearest div/element id.

Browser Support

:target CSS is supported by all major browser, but not supported in Internet Explorer 8, and earlier versions.

I hope this simple explanation is enough 🙂
If you have any question feel free to ask in the comment.