Better Than SlickNav Free Mobile Menu Script

Posted Monday, March 18th, 2019 - 2,844 views

When it comes to SEO, usability, and page speed you want a mobile menu that’s going to be easy to implement, clean, uses as less code as possible, and works as expected. Well if that’s what you’re looking for you’ve come to the right place.

Update I’ve renamed the page to “Better Than SlickNav” because although SlickNav is pretty great especially since you don’t have to create 2 menus, I found it errs a lot, and I have found that over time is degrades in function. It could be me…

For the longest time I’ve spent hours searching the web for the best mobile menu scripts, only to later be disappointed and having spent hours implementing them – and quite frequently to no avail. Scripts would conflict with one another, the CSS would too; some scripts just flat out wouldn’t work properly or would stop working after a while all together.

So a little while back I got tired of always having to update my customer’s mobile menus or having to find a script for a new client. I decided to create and optimize one of my own – one that’s fast, reliable, easy to edit the styles and works on all browsers. It and its instructions for installing it are below.

Keep in mind that this script works for me and hasn’t given me any issues thus far. If you decide to use it, you can do so freely, and if  you find problems, don’t  hesitate to leave a comment and I’ll do my best to help you. You can see the mobile menu in action on this website if you’re viewing it on one of your mobile devices.

The Easiest Fastest Mobile Menu Script

The CSS

Note the styles are already set but you can change them easily to your requirements. (note there are horizontal scroll bars in the block of CSS below). Also note you need to add .mobile_start{display:none;} and .mobile_menu{display:none;} to your CSS to your desktop CSS, and the following CSS should be applied to your various device media queries.

.mobile_start{display:block;padding:6px 0;width:100%;margin:0;background-color:#113f60;margin-bottom:10px;font-family: 'Lato', sans-serif;}
.mobile_start #show{display:block;padding:1px;width:26px;padding-top:6px;float:left;margin-right:5px;}
.mobile_start a .white_line{display:block;width:90%;height:2px;background:#fff;margin:0 auto;margin-bottom:3px;box-sizing: inherit;margin-left:5px;}
.mobile_start .menu_label{display:block;float:left;font-weight:600;margin-top:5px;font-size:18px;color:#fff;}
.mobile_start .menu_label_call{display:block;float:right;font-weight:500;margin-top:7px;font-size:18px;color:#fff;margin-right:13px;}
.mobile_start .menu_label_call a{color:#ffffff;}
.mobile_menu{display:none;padding:0;width:80%;margin:0;position:absolute;z-index:999999999;background:#27619f;height:auto;top:43px;left:0;border:none;padding-bottom:10px;padding-top:9px;border:solid 1px #eeeeee;border-width:0 1px 1px 0;}
.mobile_menu ul{list-style: none;width:90%;font-family: 'Lato', sans-serif;margin-left:13px;}
.mobile_menu li{font-size:16px;margin-bottom:0;padding:6px 3px 6px 6px;font-weight: 600;}
.mobile_menu li a{color:#fff;text-decoration:none;}
.mobile_menu ul li ul{margin-left:-32px;}
.mobile_menu ul li ul li{width:223px;}
.mobile_menu ul li ul li a{font-size:14px;}

The HTML

This is the HTML of the mobile menu. Edit it to your requirements

<div class="mobile_start">
<a href="#" id="show">
<span class="white_line"></span>
<span class="white_line"></span>
<span class="white_line"></span>
<span class="white_line"></span>
</a>
<span class="menu_label">MENU</span>
<div class="clear"></div>
</div>
<div class="mobile_menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

The Scripts

This is the script. Note you only need to add it to your footer

<script type="text/javascript">

$(document).ready(function(){

    $("#show").click(function(){
        $(".mobile_menu").toggle("fast");
    });
});
	
</script>

And lastly add a call to jQuery to your header. Here’s what our call looks like:

<script src="/wp-content/themes/fp/js/jquery.min.js"></script>

That’s it folks! If you’ve found an even easier mobile menu, share the link to the script in the comments, and if you need some assistance let me know!