Mouse Hover Drop Down Menu By Askwithloud.com

Developer
Prince
Size
4,626 Kb
Views
16,192
  1. Mouse Hover Drop Down Menu By Askwithloud.com Previews
  2. Mouse Hover Drop Down Menu By Askwithloud.com HTML Codes
  3. Mouse Hover Drop Down Menu By Askwithloud.com CSS Codes
  4. Mouse Hover Drop Down Menu By Askwithloud.com JS Codes

How do I make an mouse hover drop down menu by askwithloud.com?

The drop down menu is very cool and stylish. So follow the below steps and add this responsive drop down menu into your blog.. What is a mouse hover drop down menu by askwithloud.com? How do you make a mouse hover drop down menu by askwithloud.com? This script and codes were developed by Prince on 15 December 2022, Thursday.

Mouse Hover Drop Down Menu By Askwithloud.com Previews
IQ Test

Mouse Hover Drop Down Menu By Askwithloud.com - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouse Hover Drop Down Menu By Askwithloud.com</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td { margin: 0; padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section { display: block;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { -webkit-font-smoothing: antialiased;
}
a { color: #BA0707; text-decoration: none;
}
a:hover { color: #BA0707;
}
body { background: #e5e5e5; color: #374147; font: 14px "Open Sans",Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; line-height: 1; width: 100%;
}
nav { display: block; background: #374147;
}
.menu { display: block;
}
.menu li { display: inline-block; position: relative; z-index: 100;
}
.menu li:first-child { margin-left: 0;
}
.menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a { color: #fff; background: #35D359;
}
.menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 170px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out;
}
.menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px;
}
.menu ul li { display: block; float: none; background: none; margin: 0; padding: 0;
}
.menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff;
}
.menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0);
}
.menu ul ul { left: 169px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out;
}
.menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px;
}
.menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0);
}
.responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600;
}
.responsive-menu:hover { background: #374147; color: #fff; text-decoration: none;
}
a.homer { background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; }
}
@media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <center><nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> <ul class="menu"> <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> <li><a href="#">Sub-Menu 4</a></li> <li><a href="#">Sub-Menu 5</a></li> </ul> </li> <li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li> <li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li>	<li><a href="#">Sub Sub-Menu 2</a></li>	<li><a href="#">Sub Sub-Menu 3</a></li>	<li><a href="#">Sub Sub-Menu 4</a></li>	<li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li>	<li><a href="#">Sub Sub-Menu 2</a></li>	<li><a href="#">Sub Sub-Menu 3</a></li>	<li><a href="#">Sub Sub-Menu 4</a></li>	<li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li> <li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li>	<li><a href="#">Sub Sub-Menu 2</a></li>	<li><a href="#">Sub Sub-Menu 3</a></li>	<li><a href="#">Sub Sub-Menu 4</a></li>	<li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li>	<li><a href="#">Sub Sub-Menu 2</a></li>	<li><a href="#">Sub Sub-Menu 3</a></li>	<li><a href="#">Sub Sub-Menu 4</a></li>	<li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li> <li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li> <li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li> </ul> </nav></center> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mouse Hover Drop Down Menu By Askwithloud.com - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td { margin: 0; padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section { display: block;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { -webkit-font-smoothing: antialiased;
}
a { color: #BA0707; text-decoration: none;
}
a:hover { color: #BA0707;
}
body { background: #e5e5e5; color: #374147; font: 14px "Open Sans",Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; line-height: 1; width: 100%;
}
nav { display: block; background: #374147;
}
.menu { display: block;
}
.menu li { display: inline-block; position: relative; z-index: 100;
}
.menu li:first-child { margin-left: 0;
}
.menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a { color: #fff; background: #35D359;
}
.menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 170px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out;
}
.menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px;
}
.menu ul li { display: block; float: none; background: none; margin: 0; padding: 0;
}
.menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff;
}
.menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0);
}
.menu ul ul { left: 169px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out;
}
.menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px;
}
.menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0);
}
.responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600;
}
.responsive-menu:hover { background: #374147; color: #fff; text-decoration: none;
}
a.homer { background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; }
}
@media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

Mouse Hover Drop Down Menu By Askwithloud.com - Script Codes JS Codes

$(document).ready(function(){	var touch	= $('#resp-menu');	var menu	= $('.menu');	$(touch).on('click', function(e) {	e.preventDefault();	menu.slideToggle();	});	$(window).resize(function(){	var w = $(window).width();	if(w > 767 && menu.is(':hidden')) {	menu.removeAttr('style');	}	});
});
Mouse Hover Drop Down Menu By Askwithloud.com - Script Codes
Mouse Hover Drop Down Menu By Askwithloud.com - Script Codes
Home Page Home
Developer Prince
Username Askwithloud
Uploaded December 15, 2022
Rating 3
Size 4,626 Kb
Views 16,192
Do you need developer help for Mouse Hover Drop Down Menu By Askwithloud.com?

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!

Prince (Askwithloud) Script Codes
Name
Rocket Back to top button
Make Your Blog Widgets And Navbar Sticky By Askwithloud
Progress ScrollBar By Askwithloud
Touch Screen Scroll Effect In Blogger By Askwithloud.com
Dynamic Mega Drop Down Menu By Askwithloud
Add Mega Drop Down Menu In Blogger By Askwithloud
Fixed And Stylish Navigation Menu For Blogger By Askwithloud
Add Bouncing Ball Progress Bar In Blog By Askwithloud
Hover Social Widget By Askwithloud
Popup Effect About Us Info Widget For Blogger By Askwithloud.com
Create amazing web content 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!