Responsive Mobile Toggle Menu With Jquery

simple-clean-responsive-mobile-toggle-menu-plugin-for-jquery

How to use it:

1. Include the required menu.css file in the page and change the break point in the CSS3 media queries as per your needs.

<link rel="stylesheet" href="css/menu.css" type="text/css"/>

2. Create a mobile toggle menu using normal <ul> <li> elements.

<nav class="main<a href="http://www.jqueryscript.net/menu/">Menu</a>">
<label for="toggleMenu" class="menuTitle">MENU</label>
<input type="checkbox" id="toggleMenu" />
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

3. Include the jQuery javascript library at the end of the page.

http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

4. The jQuery script.

function responsiveMenu() {	
	$('.menuTitle').click(function () {
		$('.menu').slideToggle("slow");
		$('.menu').css({"max-height":"800px"});
	});
};

$(function() {
	$(".menu").css({"display":"none","transition":"none","max-height":"inherit"});
	$("#toggleMenu").remove();
	responsiveMenu();
});

5. The Stylesheet of menu.css

/*
Responsive Mobile Toggle Menu v2.2
Description: Mobile first responsive toggle menu
Author: Danielle Vautier
*/

/*Menu mobile first CSS*/
body{ -webkit-animation: bugfix infinite 1s; }

/*This fixes a chrome/webkit bug for older Android Browsers */
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

/*Required functional CSS don’t change this bit
CSS styles are at the end! */

.mainMenu {
display:block;
position:relative;
width:100%;
margin:0;
padding:0;
float:left;
}

#toggleMenu {
display: none;
}

#toggleMenu:checked ~ ul {
max-height:100%; /*Make page height*/
opacity:1;
}

.mainMenu > ul {
width:100%;
margin:0;
padding:0;
list-style:none;
float:left;
overflow-y: hidden;
max-height:0;
}

.mainMenu li {
margin:0;
padding:0;
white-space:nowrap;
display:block;
width:100%;
float:left;
}

.mainMenu a, .mainMenu a:visited {
display:block;
width:100%; /*required to make whole element clickable*/
}

label.menuTitle {
margin:0;
display:block;
cursor:pointer;
background: url(‘../images/menu.png’);
background-image: url(‘../images/menu.svg’), none;
background-repeat: no-repeat;
background-position: 97% 10px;
background-size: 24px 19px; /*Make same size as your menu.png*/
}

@media screen and (min-width:768px) {
label.menuTitle {
display:none;
}

.mainMenu ul {
display:block!important;
border:0;
overflow:visible;
max-height:100%!important;
}

.mainMenu ul li {
width:auto;
display:inline;
border:0;
}
}
/*Menu Styling CSS – change the below to suit your site!*/
.mainMenu {
border-bottom:1px solid #ccc;
text-align: center;
}

.mainMenu li {
border-top:1px solid #ccc;
}

.mainMenu a, .mainMenu a:visited {
color:#333;
text-decoration:none;
width:94%; /*Use 100% and box-sizing if not supporting ie7*/
padding:5px 3%;
background: none;
}

label.menuTitle {
font-size:20px;
width:94%; /*Use 100% and box-sizing if not supporting ie7*/
padding:6px 3%;
font-weight:bold;
}

@media screen and (min-width:768px) {

.mainMenu li {
border:0;
}

.mainMenu a:hover {
color:#767676;
}

.mainMenu a, .mainMenu a:visited {
padding:10px 3px 10px 8px;
}
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s