Mobile ready navigation menu - light weight, yet elegant; with code example

Like you are looking for it right now, I had been looking around for a mobile ready navigation solution, for quite some time. During my search I found many solutions, and have since tried out a few. While most solutions work, some beautifully, and some not so much, I could not find a solution that was simple enough to work across a range of devices and give my site a worry free component. I was really looking to make a navigation menu that I could create, deploy and forget: low complexity and even lower maintenance.

Here is my simple, very light weight and yet fairly elegant solution.

The core of the HTML is only about 35 lines long, and contains five lines of JQuery and about 30 lines of CSS styling, that is it. To see a quick demo click here.

The components of the solution are:

1. A stylized Menu button that sticks to the left side wall of your site at a fixed position, so when you scroll you still see the Menu button at all times.
2. Clicking / touching the button invokes a JQuery toggle switch.
3. The toggle switch renders the navigation menu (any unordered list) across the top of the screen, and wipes it out on the second click / touch. A little additional styling can also make the navigation menu a drop down list.

That is pretty much it.

Now let us take a slightly deeper dive (these waters are pretty shallow, the back of your head may still show above water level :-).

Let's look at the JQuery:

$(document).ready(function(){
$("#myTopnav").hide();
$("#menu_button").click(function(){
$("#myTopnav").toggle(300);
});
});

"myTopnav" is the id (handle) for my unordered list.
"menu_button" is the id (handle) for my menu button.

The JQuery is the heart of the solution, yet it is fairly simple, comprising only three steps:

1. $("#myTopnav").hide();
When the program starts this line hides the unordered list from view.

2. $("#menu_button").click(function(){
$("#myTopnav").toggle(300);
});
When the menu button is clicked / touched these two lines toggle the unordered list between un-hide and hide.
3. $("#myTopnav").toggle(300);
This line is a directive for the unordered list to wipe in or out in 300 milliseconds, making the appearance or disappearance of the menu a little dramatic.

The following is a working page. Feel free to copy it into a note pad, save it as a .html file and then open it using your Internet browser. The only thing you will be missing is the stylized menu button, but the code should work as is. Click here to tell us what you think. Enjoy!

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myTopnav").hide();
$("#menu_button").click(function(){
$("#myTopnav").toggle(300);
});
});
</script>


<style>
ul.topnav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: absolute;
left: 0;
top: 0;
font-family: 'ubuntu';
font-size: 15px;
width:100%;
}

ul.topnav li {float: left;}

ul.topnav li a
{
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 0 16px 3px;
text-decoration: none;
border-top: 3px solid #333;
border-right: 1px solid #c0816a;
}

ul.topnav li a:hover
{
background-color: #555;
border-bottom: none;
border-top: 3px solid #ff6600;
color: #c0816a;
text-decoration: none;
}

button.menu_button
{
position: absolute;
left: 0;
top: 55px;
background: url(menu_button.png);
width: 23px;
height: 56px;
border: none;
background-repeat: no-repeat;
}


</style>
</head>
<body>

<button class="menu_button" id="menu_button"></button>

<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<div style="padding-left:45px; padding-top:55px;">
<h2>Mobile Ready Nav Example</h2>
<p>click on the MENU button to toggle the Menu</p>
<p>The rest of your site gets situated within this DIV</p>
</div>
</body>
</html>

Author:  Rajiv Banerjee   careersngigs.com           
Page: End

Search