Hover menu
How do I make an hover menu?
What is a hover menu? How do you make a hover menu? This script and codes were developed by Mori on 26 October 2022, Wednesday.
Hover menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hover menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="oe_menu" class="oe_menu"> <li class=""><a href="news">news</a> <div> <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> </li> <li class=""><a href="news">news</a> <div> <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> </li> <li class=""><a href="news">news</a> <div> <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hover menu - Script Codes CSS Codes
ul.oe_menu { text-align: center;
}
ul.oe_menu:after { content: ''; display: block; clear: both;
}
ul.oe_menu > li { display: inline-block; list-style: none;
}
ul.oe_menu > li > a { display: block; color: #222222; text-decoration: none; font-weight: bold; font-size: 16px; width: auto; height: 35px; padding: 10px 0; text-align: center; margin: 0px 35px; background: none; cursor: pointer; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;
}
ul.oe_menu > li:nth-child(4) > a { margin: 0px 0px 0px 15px;
}
ul.oe_menu > li > a.select,
ul.oe_menu > li > a:hover { color: #ff7e03; /*background:url(../images/menu-arrow.png) no-repeat center bottom;*/
}
ul.oe_menu div { /**/ position: absolute; background: #222; width: 100%; display: none; z-index: 999999999999999; right: 0; top: 60px; padding: 15px 0px;
}
ul.oe_menu > li > div > ul { margin: 0 auto; position: relative; text-align: center;
}
ul.oe_menu > li > div > ul > li { width: auto; display: inline-block; margin: 0px 30px 0px 0px;
}
ul.oe_menu ul li h4 { border-bottom: 1px solid #655d77; line-height: 18px; padding: 0; color: #fff; margin-bottom: 10px;
}
ul.oe_menu ul li a { padding: 0px 0px; display: block; text-align: left; color: #d6d6d6; font-size: 13px; width: auto;
}
ul.oe_menu ul li a:hover { color: #ff6600;
}
Hover menu - Script Codes JS Codes
// menu
$(function() { var $oe_menu = $('#oe_menu'); var $oe_menu_items = $oe_menu.children('li'); $oe_menu_items.bind('mouseenter',function(){ var $this = $(this); $this.addClass('slided selected'); $this.children('div').css('z-index','9999').slideDown(200,function(){ $oe_menu_items.not('.slided').children('div').hide(); $this.removeClass('slided'); }); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('selected').children('div').css('z-index','1'); }); $oe_menu.bind('mouseenter',function(){ var $this = $(this); $this.addClass('hovered'); }).bind('mouseleave',function(){ var $this = $(this); $this.removeClass('hovered'); $oe_menu_items.children('div').slideUp(); })
});
Developer | Mori |
Username | moriko232 |
Uploaded | October 26, 2022 |
Rating | 3 |
Size | 3,040 Kb |
Views | 20,240 |
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!
Name | Size |
Auto zoom in background | 1,994 Kb |
Menu item hover line effect | 2,998 Kb |
Hover line effect | 2,439 Kb |
Tab menu style | 3,615 Kb |
PACE loadding effect | 2,164 Kb |
Sticky menu | 3,297 Kb |
Scroll and change numbers | 2,249 Kb |
Animate hover effect for products | 3,137 Kb |
FadeToggle | 1,467 Kb |
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!
Name | Username | Size |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
Project_one | MOHIM | 9,592 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
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!