How to create custom mobile menu
How to create Custom mobile menu with jquery?
<!doctype html>
Preview
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.hamBurgerIcon,
.mobileNav {
display: none;
}
.hamIcon {
float: right;
cursor: pointer;
}
@media(max-width:767px) {
.hamBurgerIcon {
display: block;
border: 1px solid #ddd;
padding: 5px;
font: 700 13px arial;
}
.mobileNav
ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobileNav
ul li {
border-bottom: 1px solid #dcdadb;
}
.mobileNav
ul li a {
background: #f2efef;
color: #333;
display: block;
padding: 3px 10px;
font: 13px/30px 'PT Sans', Arial, Helvetica, sans-serif;
text-decoration: none;
}
.mobileNav
ul li a:hover {
background: #f8f8f8;
}
.mobileNav
li.dropdown {
position: relative;
}
.mobileNav
li.dropdown::after {
content: '';
position: absolute;
right: 10px;
top: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #333;
border-bottom: 0px solid transparent;
}
.mobileNav
li.dropdown:hover .dropDownContainer {
display: block;
border: 1px solid #0bf;
}
.mobileNav
li.dropdown:hover::after {
content: '';
position: absolute;
right: 10px;
top: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
border-bottom: 0px solid transparent;
}
.mobileNav
li.dropdown:hover>a {
background: #0bf;
color: #fff;
}
.mobileNav
li .dropDownContainer {
display: none;
}
.mobileNav
li .dropDownContainer li {
position: relative;
}
.mobileNav
li .dropDownContainer li a {
padding-left: 30px;
}
.mobileNav
li .dropDownContainer li::before {
content: '-';
position: absolute;
top: 5px;
left: 15px;
color: #0bf;
}
.showNavSS {
display: block;
}
}
</style>
</head>
<body>
<h1>How to create Custom mobile menu with jquery</h1>
<div class="hamBurgerIcon">Menu <img src="images/hamburgerIcon.png" alt="Hamburger
Icon" class="hamIcon"></div>
<div class="mobileNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li class="dropdown"><a href="#">Courses</a>
<div class="dropDownContainer">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(function () {
jQuery('.hamIcon').click(function () {
jQuery('.mobileNav').toggleClass('showNavSS');
});
});
</script>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.