Responsive Jquery Navigation

Developer
Kanha Sahu
Size
2,547 Kb
Views
32,384
  1. Responsive Jquery Navigation Previews
  2. Responsive Jquery Navigation HTML Codes
  3. Responsive Jquery Navigation CSS Codes
  4. Responsive Jquery Navigation JS Codes

How do I make an responsive jquery navigation?

Responsive Jquery Navigation. What is a responsive jquery navigation? How do you make a responsive jquery navigation? This script and codes were developed by Kanha Sahu on 27 August 2022, Saturday.

Responsive Jquery Navigation Previews
IQ Test

Responsive Jquery Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Jquery Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id='cssmenu'>
<ul> <li><a href='#'>Home</a></li> <li class='active has-sub'><a href='#'>Products</a> <ul> <li class='has-sub'><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li class='has-sub'><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li>
</ul>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Responsive Jquery Navigation - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#cssmenu { width: 220px; font-family: Raleway, sans-serif; color: #ffffff;
}
#cssmenu ul ul { display: none;
}
#cssmenu > ul > li.active > ul { display: block;
}
.align-right { float: right;
}
#cssmenu > ul > li > a { padding: 16px 22px; cursor: pointer; z-index: 2; font-size: 16px; text-decoration: none; color: #ffffff; background: #3ab4a6; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;
}
#cssmenu > ul > li > a:hover { color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after { position: absolute; right: 26px; top: 19px; z-index: 5; display: block; height: 10px; width: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before { position: absolute; right: 22px; top: 23px; display: block; width: 10px; height: 2px; background: #ffffff; content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
#cssmenu ul ul li a { padding: 14px 22px; cursor: pointer; z-index: 2; font-size: 14px; text-decoration: none; color: #dddddd; background: #49505a; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;
}
#cssmenu ul ul ul li a { padding-left: 32px;
}
#cssmenu ul ul li a:hover { color: #ffffff;
}
#cssmenu ul ul > li.has-sub > a:after { top: 16px; right: 26px; background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before { top: 20px; background: #dddddd;
}

Responsive Jquery Navigation - Script Codes JS Codes

(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();	$('#cssmenu li.has-sub>a').on('click', function(){	$(this).removeAttr('href');	var element = $(this).parent('li');	if (element.hasClass('open')) {	element.removeClass('open');	element.find('li').removeClass('open');	element.find('ul').slideUp(200);	}	else {	element.addClass('open');	element.children('ul').slideDown(200);	element.siblings('li').children('ul').slideUp(200);	element.siblings('li').removeClass('open');	element.siblings('li').find('li').removeClass('open');	element.siblings('li').find('ul').slideUp(200);	}	});
});
})(jQuery);
Responsive Jquery Navigation - Script Codes
Responsive Jquery Navigation - Script Codes
Home Page Home
Developer Kanha Sahu
Username kaslab
Uploaded August 27, 2022
Rating 3
Size 2,547 Kb
Views 32,384
Do you need developer help for Responsive Jquery Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kanha Sahu (kaslab) Script Codes
Name
Select all using Jquery Function
Dynamicdrive marquee II
JavaScript Validation Example
Bootstrap tree
Jquery Models for login, signin, forgot password
Awesome responsive navigation menu bar
Button jquery onclick change text and effect
Rainbow hr
Bootstrap Navigation
Stylish Login Panel using SCSS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!