EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial Responsive Menu jQuery

Responsive Menu jQuery

Priya Pedamkar
Article byPriya Pedamkar

Updated March 27, 2023

Responsive Menu jQuery

 

 

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

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><!-- &#9775 based on value get a different logo -->
</nav>
</body>
</html>

Output:

responsive menu jquery 1

responsive menu jquery 2

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><!-- &#9775 based on value get a different logo -->
</nav>
</body>
</html>

Output:

with Buttons

Responsive menu jquery

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><!-- &#9775 based on value get a different logo -->
</nav>
</body>
</html>

Output:

with links and Buttons

responsive menu jquery 6

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 –

  1. jQuery mousedown
  2. jQuery innerWidth()
  3. jQuery mouseenter()
  4. jQuery empty()
quiz