Updated March 27, 2023
Introduction to Responsive Menu jQuery
Responsive menu will automatically change the regular horizontal navigation menu into a responsive navigation menu. Developing responsive menu websites is mandatory for present user requirements. People accessed websites from anywhere and accessed from different kinds of devices like mobile, PC, Notepad, etc. Designing or developing responsive websites from scratch becomes very difficult for beginners. So, Web developers come up with different technologies HTML5, CSS 3, bootstrap, and jQuery, etc. Among this, jQuery is more responsive because of capable of dealing with the app with less code and has predefined libraries.
What does “Responsive Menu Website” Means?
The first and foremost thing coming to mind that what exactly the word “Responsive Design” is? Is responsive web design compatible with all different kinds of devices and different screen resolutions? The answer is Yes. For this, we can use jQuery technology as well.
Nowadays much more constant demand for responsive websites is because of different devices and different screen sizes. It is very difficult to develop the same web page for multiples times for multiple screen sizes. There we come across an idea of “Responsive Web Design”.
Advantages of jQuery
- Multiple devices and multiple screen types can be able to access the content.
- Better readability and beautiful User Interface by adding pre-defined libraries.
How does it work in jQuery?
- In jQuery responsive menu works based on predefined jQuery libraries along with bootstrap classes.
Syntax:
<!—HTML Code-->
<div id="menuId" class="sm sm-brown">
<!—jQuery Code-->
jQuery(document).ready(function() {
jQuery('.class').click(function(temp) { //make it work click function
jQuery(this).toggleClass('class');/*toggle the menu*/
jQuery('.class').toggleClass('class');
});
});Required libraries for jQuery
This are the required library files for jQuery:
1. <! –include jQuery library–>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>2. <! –include ace responsive library jQuery library–>
<script src="js/ace-responsive-menu.js" type="text/javascript"></script>Examples of Responsive Menu jQuery
Given below are the examples of the responsive menu jquery:
Example #1
Responsive Menu with Links.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Responsive Menu</title>
<link rel="stylesheet" href=" ResponsiveMenu.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(temp) { //make it work click function
jQuery(this).toggleClass('active');/*toggle the menu*/
jQuery('.menu ul').toggleClass('active');
temp.preventDefault();
});
});
</script>
<style>
.toggle-nav {
display: none;
}
@media screen and (min-width: 870px) {
.menu {
padding: 10px 18px;
width: 100%;
border-radius: 2px;
background: brown;
}
}
.menu ul {
display: inline-block;
}
.menu li {
margin: 0px 45px 0px 0px;
float: left;
list-style: none;
font-size: 17px;
}
.menu li:last-child {
margin-right: 0px;
}
.menu a {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
color: white;
transition: color linear 0.2s;
}
.menu a:hover, .menu .current-item a {
text-decoration: none;
color: blue;
}
@media screen and (max-width: 1200px) {
.wrap {
width: 91%;
}
}
@media screen and (max-width: 860px) {
.menu {
position: relative;
display: inline-block;
}
.menu ul.active {
display: none;
}
.menu ul {
top: 100%;
left: 0px;
width: 100%;
padding: 11px 17px;
position: absolute;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
border-radius: 4px;
background: black;
}
.toggle-nav {
float: left;
display: inline-block;
padding: 18px;
font-size: 21px;
background: green;
color: blue;
transition: color linear 0.15s;
}
}
</style>
</head>
<body>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">EDCBA Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Fee Structure</a></li>
<li><a href="#">About EDCBA</a></li>
<li><a href="#">Register</a></li>
</ul>
<a class="toggle-nav" href="#">☯</a><!-- ☯ based on value get a different logo -->
</nav>
</body>
</html>Output:
Example #2
Responsive Menu with Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Responsive mainClass</title>
<link rel="stylesheet" href="ResponsiveMenuButtons.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(temp) { //make it work click function
jQuery(this).toggleClass('innerClass');/*toggle the menu*/
jQuery('.mainClass ul').toggleClass('innerClass');
temp.preventDefault();
});
});
</script>
<style>
.toggle-nav {
display: none;
}
@media screen and (min-width: 870px) {
.mainClass {
padding: 10px 18px;
width: 100%;
border-radius: 2px;
background: blue;
}
}
.a
{
color:brown;
}
.mainClass ul {
display: inline-block;
}
.mainClass a {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
color: white;
transition: color linear 0.2s;
}
.mainClass a:hover, .mainClass .current-item a {
text-decoration: none;
color: blue;
}
@media screen and (max-width: 1200px) {
.wrap {
width: 91%;
}
}
@media screen and (max-width: 860px) {
.mainClass {
position: relative;
display: inline-block;
}
.mainClass ul.innerClass {
display: none;
}
.mainClass ul {
top: 100%;
left: 0px;
width: 100%;
padding: 11px 17px;
position: absolute;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
border-radius: 4px;
background: orange;
}
.toggle-nav {
float: left;
display: inline-block;
padding: 18px;
font-size: 21px;
background: brown;
color: blue;
transition: color linear 0.15s;
}
}
</style>
</head>
<body>
<nav class="mainClass">
<ul class="innerClass">
<button class="a">Login</button>
<button class="a"> Register</button>
<button class="a">eAadhar</button>
<button class="a">Click Here</button>
<button class="a">???</button>
</ul>
<a class="toggle-nav" href="#">☯</a><!-- ☯ based on value get a different logo -->
</nav>
</body>
</html>Output:
Example #3
Responsive Menu with links and Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Responsive mainClass</title>
<link rel="stylesheet" href="ResponsiveMenuLinksButtons.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(temp) { //make it work click function
jQuery(this).toggleClass('innerClass');/*toggle the menu*/
jQuery('.mainClass ul').toggleClass('innerClass');
temp.preventDefault();
});
});
</script>
<style>
.toggle-nav {
display: none;
}
@media screen and (min-width: 870px) {
.mainClass {
padding: 10px 18px;
width: 100%;
border-radius: 2px;
background: red;
}
}
.a
{
color:blue;
}
.mainClass ul {
display: inline-block;
}
.mainClass li {
margin: 0px 45px 0px 0px;
float: left;
list-style: none;
font-size: 17px;
}
.mainClass li:last-child {
margin-right: 0px;
}
.mainClass a {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
color: white;
transition: color linear 0.2s;
}
.mainClass a:hover, .mainClass .current-item a {
text-decoration: none;
color: red;
}
@media screen and (max-width: 1200px) {
.wrap {
width: 91%;
}
}
@media screen and (max-width: 860px) {
.mainClass {
position: relative;
display: inline-block;
}
.mainClass ul.innerClass {
display: none;
}
.mainClass ul {
top: 100%;
left: 0px;
width: 100%;
padding: 11px 17px;
position: absolute;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
border-radius: 4px;
background: pink;
}
.toggle-nav {
float: left;
display: inline-block;
padding: 18px;
font-size: 21px;
background: blue;
color: red;
transition: color linear 0.15s;
}
}
</style>
</head>
<body>
<nav class="mainClass">
<ul class="innerClass">
<li><a href="#">Courses</a></li>
<li><a href="#">Fee Structure</a></li>
<li><a href="#">About EDCBA</a></li>
<button class="a">Login</button>
<button class="a"> Register</button>
<button class="a">eAadhar</button>
<button class="a">Click Here</button>
<button class="a">???</button>
</ul>
<a class="toggle-nav" href="#">☫</a><!-- ☯ based on value get a different logo -->
</nav>
</body>
</html>Output:
Conclusion
Responsive Menu in jQuery changes screen size based on the device screen size. We can add buttons, links, search icon, etc. in the menu item.
Recommended Articles
This is a guide to Responsive Menu jQuery. Here we discuss the introduction, examples and how does it work in jQuery? You may also have a look at the following articles to learn more –
