I'm new to the community, also pretty new in this world of web programming, this is the issue that is driving me nuts,
I tried this code to add a class when I hover the ul list element, so I can display the nav element, but instead of open only the hovered dropdown menu, it displays all the ul element with the class I selected.
Here is the Jquery code:
$(document).ready(function() {
$("ul").hover(function() {
$(this)
.find(".dropdown-list")
.toggleClass("dropdown-menu");
});
});
and these are the element targered in my html file:
<ul class="header-nav-responsive">
<li>HOME</li>
<li>
LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>
FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>
SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
Here is the CSS snippet:
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu, .nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0,0,0,.1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu, .nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li, .nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a, .nav-icons-big-screen .dropdown-menu li a{
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover, .nav-icons-big-screen .dropdown-menu li a:hover {
color:#2250fc;
}
At last, you can see how the page display in this link: https://patricio1984.github.io/Polo-template-emulation/
Thanks so much to all in advance! cheers!
The problem is because you are adding the event listener to the ul tag(This includes the parent ul too). Instead, you should have an event listener to the li, say with the class 'menu-item' and toggle the class based on that.
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
Here is the fiddle link https://jsfiddle.net/eskcrd3n/
Actually your issue here is lies under your main selector. You did go for listening to ul whilst you should listen to li elements. So whenever you listening to ul, the $(this) will refer to <ul class="header-nav-responsive"> so all your elements with class dropdown-list will be called for the trigger event.
$(document).ready(function() {
$("li").hover(function() {
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
.header-nav-responsive .dropdown-list {
display: none;
}
.header-nav-responsive .dropdown-menu,
.nav-icons-big-screen .dropdown-menu {
flex-direction: column;
position: absolute;
align-items: flex-start;
background-color: #fff;
margin-top: 11rem;
padding: 14px 20px;
border-radius: 5px;
display: none;
visibility: hidden;
border: 1px solid #e6e8eb;
box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}
.header-nav-responsive .dropdown-menu {
margin-top: -1.1rem;
}
.nav-icons-big-screen i {
line-height: 80px;
}
.header-nav-responsive:hover .dropdown-menu,
.nav-icons-big-screen:hover .dropdown-menu {
display: flex;
visibility: visible;
}
.header-nav-responsive .dropdown-menu li,
.nav-icons-big-screen .dropdown-menu li {
font-size: 0.8125rem;
font-weight: 400;
line-height: 25px;
}
.header-nav-responsive .dropdown-menu li a,
.nav-icons-big-screen .dropdown-menu li a {
color: #484848;
padding: 3px 2px;
}
.header-nav-responsive .dropdown-menu li a:hover,
.nav-icons-big-screen .dropdown-menu li a:hover {
color: #2250fc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header-nav-responsive">
<li>HOME</li>
<li>LAYOUT
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
<li>Options</li>
<li>Layout Demos</li>
</ul>
</li>
<li>FEATURES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>ELEMENTS
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PAGES
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>PORTFOLIO
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>BLOG
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
<li>SHOP
<ul class="dropdown-list">
<li>Topbar</li>
<li>Header</li>
<li>Main Menu</li>
<li>Page Title</li>
<li>Page Menu</li>
<li>Sidebars</li>
<li>Footers</li>
</ul>
</li>
</ul>
NOTE: The best way to do this is to use a unique class for your menu titles to avoid any inconsistency.
THANKS SO MUCH to both you guys!! the Jsfiddle gave me the right idea, here is the corrected function:
$(document).ready(function(){
$(".menu-item").hover(function(){
$(this).find(".dropdown-list").toggleClass("dropdown-menu");
});
});
And I added the menu-item class to all my li items!
Thanks!!! problem SOLVED! That was pretty quick =)
Related
I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("ul.droptrue").sortable({
connectWith: "ul"
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<br style="clear:both">
</body>
</html>
As I mentioned above at the end of each Column the number of rows must be displayed and aside of each row numbering should be displayed.
1 worker1 1 worker8 1 worker14
2 worker2 2 worker10 2 worker13
3 worker3 3 worker11 3 worker15
4 worker4 4 worker12 total 3
5 worker5 total 4
6 worker7
7 worker6
8 worker9
Total 8
To do what you require you could wrap the ul elements in a div with another div under them to hold the total count of li elements within that container. You can then updated that total when an item is dropped using the stop property of the sortable plugin, like this:
$("ul.droptrue").sortable({
connectWith: "ul",
stop: function() {
$('.total').text(function() {
return 'Total: ' + $(this).closest('.container').find('li').length;
});
}
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
.container {
display: inline-block;
}
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 0.8em; /* changed so the example fits in the snippet better*/
width: 120px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<div class="total">Total: 5</div>
</div>
I created a dropdown menu and below is my snippet. The problem is whenever I tried to go to the dropdown part (the one that has a class of dropdown_menu) menu after I click the link that triggered it, it will slideUp which supposedly it will not as it is also inside with the .has_dp element, any ideas? Im wondering if the best solution is to bind the .dropdown_menu element with the mouseleave event of the .has_dp so that the .dropdown_menu will only slideUp if the cursor is not over on the .has_dp and .dropdown_menu, is that possible?
$(document).ready(function(){
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function(){
$(".dropdown_menu", this).slideDown();
}).mouseout(function(){
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
list-style: none;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: blue;
}
/* dropdown */
.dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li{
clear: both;
float: none;
}
.dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
The problem is the nature of mouseout event which is bubbled.
You need to use mouseleave instead of mouseout
$(document).ready(function() {
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function() {
$(".dropdown_menu", this).slideDown();
}).mouseleave(function() {
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li {
float: left;
list-style: none;
}
#topnav li a {
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span {
float: left;
display: block;
}
#topnav li a span:first-child {
margin-right: 3px;
}
#topnav li a span:last-child {
padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
color: blue;
}
/* dropdown */
.dropdown_menu {
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li {
clear: both;
float: none;
}
.dropdown_menu a {
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File
Using the following code I could get the ABOUT and FAQ submenus to show up but nothing would appear on mouse hover and I have no idea why. Please help! If there is more code I should show just let me know! Thanks in advance for any help :)
The HTML:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations</li>
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities</li>
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
<li>Reservations</li>
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</ul>
The CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
The Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);
jsFiddle
The li elements for Accommodations, Activities and Reservations didn't correctly nest the submenu's ul elements. Check out the code in this JS Fiddle for a corrected version:
http://jsfiddle.net/9NdZC/
Here is just the HTML part:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
</li>
<li>Reservations
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
</li>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</li>
</ul>