Responsive Flat Horizontal Menu Using CSS3 & jQuery

A Responsive menu boost user experience also help user to easily navigate your website so here I am going to share a simple code snippet written by Arlina Design to create Responsive Flat Horizontal Menu Using CSS3 & jQuery without any third party plugin. The script uses jQuery window resize method to detect the current screen size and automatically converts the horizontal menu into a mobile-friendly dropdown flat menu with a toggle button.

Create Responsive Flat Horizontal Menu Using CSS3 & jQuery

Just follow the below steps to create Create Responsive Flat Horizontal Menu Using CSS3 & jQuery

Libraries

Below script only dependent on jQuery core library so include latest jQuery library on page and add fontawesome css to display icon along with menu tab.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-latest.min.js">script>

HTML

Create a responsive menu using nested unordered list item and automatically toggle display button as per screen size.

CSS

Add stylesheet on page for styling menu and write media query for all the devices to make menu responsive.

JS

Now write the javascript to activate the toggle behaviour and set menu breakpoint to make it mobile responsive.

<script>
$(document).ready(function(){ 
	var touch 	= $('#resp-menu');
	var menu 	= $('.menu');
 
	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
 
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
 
});
script>

See live demos and download source code.

Related