Responsive Menu with sub menu- CSS3 animation, simple jquery
How do I make an responsive menu with sub menu- css3 animation, simple jquery?
What is a responsive menu with sub menu- css3 animation, simple jquery? How do you make a responsive menu with sub menu- css3 animation, simple jquery? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.
Responsive Menu with sub menu- CSS3 animation, simple jquery Previews
Responsive Menu with sub menu- CSS3 animation, simple jquery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Menu with sub menu- CSS3 animation, simple jquery</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body
{ padding: 0px; margin: 0px; font-family: Tahoma; background-color: #f0f0f0; cursor: default;
}
::-webkit-scrollbar-track
{ background: #fff;
}
::-webkit-scrollbar-thumb
{ background: #35678F; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; max-width: 8px;
}
::-webkit-scrollbar
{ width: 8px; max-width: 8px; height: auto; max-height: 8px;
}
a
{ text-decoration: none;
}
.L
{ float:left;
}
.menu
{ background-image: url('http://dc345.4shared.com/img/g7RtSxFb/s3/140f9a58cd8/MenuBG.png'); background-position: center center; background-repeat: repeat-x; background-color: transparent; height: 59px;
}
.menu, .menu nav, .menu ul
{ display: inline-block; width: 100%;
}
.first, .first a
{ line-height: 59px; font-size: 16px; font-weight: lighter; font-family: Tahoma; color: #fff; margin-left: 11px; margin-right: 11px; padding-bottom: 5px; text-decoration: none;
}
.first:hover
{ cursor: pointer; padding-bottom: 0px; padding-top: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
}
.first:hover ul,.skin
{ display: block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; margin-top: -5px; z-index: 90; width: 250px; max-width: 250px;
}
.first ul
{ position: absolute; width: auto; background-color: #fff; display: none;
}
.first ul li
{ padding-right: 5px; padding-left: 0px; border-left: 4px solid #35678F; margin-bottom: 1px;
}
.first ul li:hover
{ padding-right: 0px; padding-left: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #35678F; border-left: 4px solid #fff;
}
.first ul li:hover a
{ color: #fff;
}
.first ul a, .first ul li
{ color: #35678F; font-size: 15px; line-height: 30px;
}
.first:nth-child(1) ul
{ margin-left: -11px;
}
.first:last-child ul
{ margin-left: -52px;
}
@media screen and (max-width:655px)
{ .menu { background-color:#1D4B70; height:auto; background-image:none; display:none; } .L { float:none; clear:both; width:100%; text-align:center; } .first ul { position:static; width:100%; } .first:hover ul { display:none; width:100%; max-width:100%; }
.clickable { background-image:url("http://dc369.4shared.com/img/RAxWhDgy/s3/140f9ba8408/reorder.png"); background-color:#1D4B70; width:40px; height:40px; position:fixed; top:0px; left:0px; cursor:pointer; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="menu"> <nav> <ul> <li class="first L"><a>Services</a> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> <li><a href="#">f</a></li> </ul> </li> <li class="first L"><a>Products</a></li> <li class="first L"><a>Solutions</a></li> <li class="first L"><a>Applications</a></li> <li class="first L"><a>News</a></li> <li class="first L"><a>Help Center</a></li> </ul> </nav> </div>
<div class="clickable"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive Menu with sub menu- CSS3 animation, simple jquery - Script Codes CSS Codes
html, body
{ padding: 0px; margin: 0px; font-family: Tahoma; background-color: #f0f0f0; cursor: default;
}
::-webkit-scrollbar-track
{ background: #fff;
}
::-webkit-scrollbar-thumb
{ background: #35678F; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; max-width: 8px;
}
::-webkit-scrollbar
{ width: 8px; max-width: 8px; height: auto; max-height: 8px;
}
a
{ text-decoration: none;
}
.L
{ float:left;
}
.menu
{ background-image: url('http://dc345.4shared.com/img/g7RtSxFb/s3/140f9a58cd8/MenuBG.png'); background-position: center center; background-repeat: repeat-x; background-color: transparent; height: 59px;
}
.menu, .menu nav, .menu ul
{ display: inline-block; width: 100%;
}
.first, .first a
{ line-height: 59px; font-size: 16px; font-weight: lighter; font-family: Tahoma; color: #fff; margin-left: 11px; margin-right: 11px; padding-bottom: 5px; text-decoration: none;
}
.first:hover
{ cursor: pointer; padding-bottom: 0px; padding-top: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;
}
.first:hover ul,.skin
{ display: block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; margin-top: -5px; z-index: 90; width: 250px; max-width: 250px;
}
.first ul
{ position: absolute; width: auto; background-color: #fff; display: none;
}
.first ul li
{ padding-right: 5px; padding-left: 0px; border-left: 4px solid #35678F; margin-bottom: 1px;
}
.first ul li:hover
{ padding-right: 0px; padding-left: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; background-color: #35678F; border-left: 4px solid #fff;
}
.first ul li:hover a
{ color: #fff;
}
.first ul a, .first ul li
{ color: #35678F; font-size: 15px; line-height: 30px;
}
.first:nth-child(1) ul
{ margin-left: -11px;
}
.first:last-child ul
{ margin-left: -52px;
}
@media screen and (max-width:655px)
{ .menu { background-color:#1D4B70; height:auto; background-image:none; display:none; } .L { float:none; clear:both; width:100%; text-align:center; } .first ul { position:static; width:100%; } .first:hover ul { display:none; width:100%; max-width:100%; }
.clickable { background-image:url("http://dc369.4shared.com/img/RAxWhDgy/s3/140f9ba8408/reorder.png"); background-color:#1D4B70; width:40px; height:40px; position:fixed; top:0px; left:0px; cursor:pointer; }
}Responsive Menu with sub menu- CSS3 animation, simple jquery - Script Codes JS Codes
$(".clickable").click(function(){ $(".menu").slideToggle(400);
});
$(".first").click(function(){ $(this).find("ul").slideToggle(400);
});
| Developer | Mariam Massadeh |
| Username | MariamMassadeh |
| Uploaded | September 22, 2022 |
| Rating | 3 |
| Size | 3,663 Kb |
| Views | 30,360 |
Do you need developer help for Responsive Menu with sub menu- CSS3 animation, simple jquery?
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!
Mariam Massadeh (MariamMassadeh) Script Codes
| Name | Size |
| Qoute | 2,776 Kb |
| Tooltip | 2,678 Kb |
| Css3-image-slider-with-stylized-thumbnails | 2,576 Kb |
| Time Line | 5,697 Kb |
| Responsive Text Area with timer, counter and history | 4,527 Kb |
| Simple blog container, tool tip, simple animation on hover | 2,834 Kb |
| Notepad pen | 2,300 Kb |
| Emploee Tree | 3,670 Kb |
| Animated Progress Bar | 2,271 Kb |
| A Pen by Mariam Massadeh | 3,981 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
| Shopping cart | Andiio | 6,581 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| Fun form with currentColor | Bnthor | 2,713 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| CSS Social Media Icon | TychoBlender | 3,871 Kb |
| SlideupBoxes | Gavra | 23,772 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!