Page 1 of 1

Simple Responsive Menu Rate Topic: -----

#1 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6343
  • View blog
  • Posts: 25,601
  • Joined: 12-December 12

Posted 05 June 2015 - 11:14 AM

This tutorial is for a simple, single level, responsive horizontal menu. At larger resolutions the menu displays as a horizontal menubar, at lower resolutions it becomes a collapsible (burger) menu.

The menu consists of a single level of links. My other tutorial here allows for multi-level links.

Attached Image

Attached Image

Once you've completed the tutorial you'll want to change the formatting to make it look prettier!

The meta tag for viewport settings is necessary for a responsive design, otherwise "mobile devices will render the page at a typical desktop screen width, scaled to fit the screen". Configure the Viewport
<!DOCTYPE html>
<html>
<head>
    <title>Responsive Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


Here is the body content:
<header>
    <button id="menu"><a href="#navbar">Menu</a></button>
    <nav id="navbar">
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="newsletter.html">News/Hints &amp; Tips</a></li>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="materials.html">Materials &amp; More</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="ourteam.html">Our Team</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
    </nav>
</header>
<main>
<h1>The Main Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</main>


(The full code is given at the end of the tutorial.)

I am dealing with the mobile version first, so this CSS (within the head tag) is for the menu button, that will disappear at larger resolution:
<style>
#menu {
    margin: 2px;
}
#menu a {
    text-decoration: none;
}


The menu button contains an a-tag and I am using a little CSS trickery here:
#navbar:target {
    display: block;
}
#menu a:active:after {
    content: "reload page to hide menu";
    padding-left: 10px;
    color: blue;
}


This uses the :target pseudo selector so that clicking the menu button will display the menu. However, clicking the button a second time won't hide the menu. My thinking is that, if the menu doesn't have too many items, once the user has clicked to display it they probably aren't too concerned that it will remain visible while they are on the page.

If the user presses and holds the menu button then a message displays next to the button, indicating that they can hide the menu by reloading the page. This isn't very user friendly, or obvious, though, just something I was playing with.

The only reason I was exploring this option was to see if we could avoid any Javascript. It isn't worth the effort though and I recommend that you remove the a-link from the button, and the CSS just shown, and just use this simple, small, piece of Javascript to show and hide the menu:
<script>
    document.getElementById('menu').addEventListener('click', function () {
        var nav = document.getElementsByTagName('nav')[0];
        if (nav.style.display == 'block') {
            nav.style.display = 'none';
        } else {
            nav.style.display = 'block';
        }
    }, false);
</script>


Add this script to the end of the page, before the closing body tag.

I decided to keep the code for :target and :active (and content) just to demonstrate these CSS features.

The remaining CSS for the collapsible menu is fairly straightforward:
nav {
    display: none;
    font-family: 'Source Code Pro', Consolas, monospace;
}
nav ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 0;
    background-color: blue;
}
nav li {
    display: block;
    font-size: 14px;
    color: white;
    border-bottom: 1px solid cornflowerblue;
}
nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
nav a:hover {
    background-color: cornflowerblue;
}


The menu (nav) isn't visible initially (display: none).

The font-size switching to 0 and back to 14px isn't required for the collapsible menu. This is a hack to prevent a small gap appearing between inline-block elements, which will be used for the full navbar. However, these settings don't impact the collapsible menu so I prefer to place them here rather than in the media query.

The border-bottom is used as a visual separator between the li at low resolution, I remove this and use border-right instead for the full navbar, as you can see here in the media query:
@media screen and (min-width: 800px) {
    #menu {
        display: none;
    }
    nav {
        display: block !important;
    }
    nav li {
        display: inline-block;
        border-right: 1px solid cornflowerblue;
        border-bottom: none;
    }
}
</style>


min-width: 800px You can change this value to suit your site. Hint: Don't attempt to target your media queries to specific devices, the number, and type, of devices and their resolutions will change frequently. Set breakpoints in media queries appropriate for your site.

I hardly ever use !important. It is included here to fix a small quirk that, if you reduce the browser width to display the burger menu, leave it hidden and maximize the browser, the full navbar doesn't reappear automatically, requiring a page refresh. !important fixes this.

The full code:

Spoiler

For your convenience, here is the full page that uses Javascript to hide/show the menu, rather than toying with :target.

Spoiler

This post has been edited by andrewsw: 05 June 2015 - 11:28 AM


Is This A Good Question/Topic? 3
  • +

Replies To: Simple Responsive Menu

#2 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6343
  • View blog
  • Posts: 25,601
  • Joined: 12-December 12

Posted 07 June 2015 - 02:02 PM

If you want the three-line, burger, button then various ways to create this are outlined here at css-tricks.
Was This Post Helpful? 0
  • +
  • -

#3 gussy81  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 164
  • Joined: 24-February 15

Posted 25 September 2015 - 12:49 AM

hey,

i love this mobile menu. i have tried to test on my mobile phone (android) and my tablet on portrait (android) but the navigation does not adjust. but when i test on www.mobiletest.me it looks fine.

have you come across this issue?

thanks
G
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6343
  • View blog
  • Posts: 25,601
  • Joined: 12-December 12

Posted 25 September 2015 - 02:00 AM

Hello and thank you.

I tested on emulators but was unable to test on a (real) Android phone.

It is so simple though, with just a single media query (@ 800px), that I can't see what the problem might be, other than JS being disabled (for the JS version) or the screen actually being > 800px.

Sorry. I hope that some kind member here might test on an Android and be able to shed some light :)

(A problem with posting tutorials is that, unfortunately, feedback is few and far between; yours is the first!)
Was This Post Helpful? 0
  • +
  • -

#5 gussy81  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 164
  • Joined: 24-February 15

Posted 25 September 2015 - 02:03 AM

ah thats ok. its such a clean piece of code its a shame....thanks for your reply

update: i got it working. i had some other media query in my code that was obvioulsy messing up ur good code!!!

cheers
G

This post has been edited by gussy81: 25 September 2015 - 02:20 AM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6343
  • View blog
  • Posts: 25,601
  • Joined: 12-December 12

Posted 25 September 2015 - 02:33 AM

That's good! (I'd just gone to the trouble of uploading it.. ah well ;) )
Was This Post Helpful? 0
  • +
  • -

#7 sauera  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 01-October 15

Posted 01 October 2015 - 05:58 AM

Removed giant quote.

This post has been edited by xclite: 01 October 2015 - 06:20 AM

Was This Post Helpful? 0
  • +
  • -

#8 Felix123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-March 17

Posted 18 April 2017 - 11:42 PM

Great information! thanks for sharing.

This post has been edited by andrewsw: 19 April 2017 - 12:52 AM
Reason for edit:: removed huge quote

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6343
  • View blog
  • Posts: 25,601
  • Joined: 12-December 12

Posted 19 April 2017 - 12:52 AM

Thank you.

There is no need to quote the entire tutorial though, use the Reply button further down the page, or the Fast Reply box.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1