i created dropdown menu , below snippet. problem whenever tried go dropdown part (the 1 has class of dropdown_menu) menu after click link triggered it, slideup supposedly not inside .has_dp element, ideas? im wondering if best solution bind .dropdown_menu element mouseleave event of .has_dp .dropdown_menu slideup if cursor not on over .has_dp , .dropdown_menu, 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 span{ float: left; display: block; } #topnav li span:first-child{ margin-right: 3px; } #topnav li 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><a href="index.html" title="home" class="active_menu">home</a></li> <li class="has_dp"> <a href="#" title="company" class="extend clear"><span>company</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">company dropdown menu 1</a></li> <li><a href="#">company dropdown menu 2</a></li> <li><a href="#">company dropdown menu 3</a></li> <li><a href="#">company dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="hr"><span>hr</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">hr dropdown menu 1</a></li> <li><a href="#">hr dropdown menu 2</a></li> <li><a href="#">hr dropdown menu 3</a></li> <li><a href="#">hr dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">assets</a></li> <li><a href="index.html" title="#">employees</a></li> <li class="has_dp"> <a href="#" title="expenses"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">expenses dropdown menu 1</a></li> <li><a href="#">expenses dropdown menu 2</a></li> <li><a href="#">expenses dropdown menu 3</a></li> <li><a href="#">expenses dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="hr"><span>performance</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">performance dropdown menu 1</a></li> <li><a href="#">perfomance dropdown menu 2</a></li> <li><a href="#">performance dropdown menu 3</a></li> <li><a href="#">performance dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="recruitment"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">recruitment dropdown menu 1</a></li> <li><a href="#">recruitment dropdown menu 2</a></li> <li><a href="#">recruitment dropdown menu 3</a></li> <li><a href="#">recruitment dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">reporting</a></li> <li class="has_dp"> <a href="#" title="self service"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">self service dropdown menu 1</a></li> <li><a href="#">self service dropdown menu 2</a></li> <li><a href="#">self service dropdown menu 3</a></li> <li><a href="#">self service dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">timesheets</a></li> <li><a href="index.html" title="#">timeoff</a></li> <li class="has_dp"> <a href="#" title="training"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">training dropdown menu 1</a></li> <li><a href="#">training dropdown menu 2</a></li> <li><a href="#">training dropdown menu 3</a></li> <li><a href="#">training dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="more"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">more dropdown menu 1</a></li> <li><a href="#">more dropdown menu 2</a></li> <li><a href="#">more dropdown menu 3</a></li> <li><a href="#">more dropdown menu 4</a></li> </ul> </li> </ul>
the problem nature of mouseout event bubbled.
you need 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 { display: block; padding: 5px 8px; color: red; text-transform: uppercase; } #topnav li span { float: left; display: block; } #topnav li span:first-child { margin-right: 3px; } #topnav li 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 { 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><a href="index.html" title="home" class="active_menu">home</a></li> <li class="has_dp"> <a href="#" title="company" class="extend clear"><span>company</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">company dropdown menu 1</a></li> <li><a href="#">company dropdown menu 2</a></li> <li><a href="#">company dropdown menu 3</a></li> <li><a href="#">company dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="hr"><span>hr</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">hr dropdown menu 1</a></li> <li><a href="#">hr dropdown menu 2</a></li> <li><a href="#">hr dropdown menu 3</a></li> <li><a href="#">hr dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">assets</a></li> <li><a href="index.html" title="#">employees</a></li> <li class="has_dp"> <a href="#" title="expenses"><span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">expenses dropdown menu 1</a></li> <li><a href="#">expenses dropdown menu 2</a></li> <li><a href="#">expenses dropdown menu 3</a></li> <li><a href="#">expenses dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="hr"><span>performance</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">performance dropdown menu 1</a></li> <li><a href="#">perfomance dropdown menu 2</a></li> <li><a href="#">performance dropdown menu 3</a></li> <li><a href="#">performance dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="recruitment"><span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">recruitment dropdown menu 1</a></li> <li><a href="#">recruitment dropdown menu 2</a></li> <li><a href="#">recruitment dropdown menu 3</a></li> <li><a href="#">recruitment dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">reporting</a></li> <li class="has_dp"> <a href="#" title="self service"><span>self service</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">self service dropdown menu 1</a></li> <li><a href="#">self service dropdown menu 2</a></li> <li><a href="#">self service dropdown menu 3</a></li> <li><a href="#">self service dropdown menu 4</a></li> </ul> </li> <li><a href="index.html" title="#">timesheets</a></li> <li><a href="index.html" title="#">timeoff</a></li> <li class="has_dp"> <a href="#" title="training"><span>training</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">training dropdown menu 1</a></li> <li><a href="#">training dropdown menu 2</a></li> <li><a href="#">training dropdown menu 3</a></li> <li><a href="#">training dropdown menu 4</a></li> </ul> </li> <li class="has_dp"> <a href="#" title="more"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a> <ul class="dropdown_menu extend clear thehide"> <li><a href="#">more dropdown menu 1</a></li> <li><a href="#">more dropdown menu 2</a></li> <li><a href="#">more dropdown menu 3</a></li> <li><a href="#">more dropdown menu 4</a></li> </ul> </li> </ul>
Comments
Post a Comment