javascript - Jquery slideDown menu when hover -
okay i've been trying make navigation have box sliding down when hovered, , found this: keep jquery slidedown menu open when hovering on menu?
the third answer worked me, problem is, when hover main menu, submenu slide down, , when hover submenu, nothing happen.
i'm not sure if possible, i'd make navigation slide down 1 hover on.
this code far. suck @ this, don't know jquery, if me, please do. thank much!
jquery
$(document).ready(function () { var menu = $('.menu') menu.hide(); $('#mainbutton').mouseover( function () { menu.stop(true, true).slidedown(400); } ); $(".menu").mouseleave( function () { menu.stop(true, true).slideup(400) }) });
css
#navigation { border: solid 1px black; height: 300px; } .mainbutton { margin-top: 10px; -webkit-order: 2; margin-right: 0%; background-color: #f1f1f1; } .dropdown { -webkit-order: 3; background-color: #fff; border: 2px dotted #f1f1f1; width: 195px; height: auto; text-align: justify; background: url('http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=25977922'); } .menu { display: -webkit-flex; -webkit-flex-flow: row nowrap; -webkit-justify-content: flex-start; -webkit-align-items: center; padding-left: 8%; } .menu a, a:visited { font-family: abstrec, sans-serif; color: #505050; text-decoration: none; font-size: .5em; margin-bottom: 10px; margin-top: 10px; border-bottom: 2px solid #dbdbdb; padding-bottom: 10px; } .menu a:hover { color: #bfbfbf; -webkit-transition:.3s; transition:.3s; border-bottom: 2px solid #aef4e7; } .itemone { -webkit-order: 1; height: auto; padding: 5px; z-index: 3; text-align: justify; }
html
<div class="navigation"> <div class="nav"> <div id="mainbutton"> <center> <a href="#">about</a> </center> </div> </div> </div> <div class="dropdown"> <div class="menu"> <div id="itemone"></div> sample text sample text sample text sample text sample text <br></div></div> <div class="navigation"> <div class="nav"> <div id="mainbutton"> <center> <a href="#">tagboard</a> </center> </div> </div> </div> <div class="dropdown"> <div class="menu"> <div id="itemone"></div> sample text sample text sample text sample text sample text <br></div></div>
ps: jsfiddle wont let me generate. don't know why sorry if it's mess up.
anyway if you'd see here: http://sdmkn.blogspot.com/
thank much!!
here's example fiddle
<nav> <ul> <li>item 1 <ul> <li> lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi ut tortor vel mi elementum consequat eu quis velit. vestibulum nec bibendum lacus, sit amet tristique nulla. </li> </ul> </li> <li>item 2 <ul> <li> lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi ut tortor vel mi elementum consequat eu quis velit. vestibulum nec bibendum lacus, sit amet tristique nulla. </li> </ul> </li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </nav>
nav { width: 250px; } ul { list-style: none; } li { background: #ddd; width: 100%; line-height: 25px; margin: 0 0 5px; padding: 2px 0; text-align: center; cursor: pointer; } li ul { display: none; } li ul li { position: relative; padding: 0; text-align: left; box-sizing: border-box; }
(function($) { $('ul li').mouseover(function() { $('ul',this).stop().slidedown(400, 'linear'); }); $('li, li ul').mouseout(function() { $('li ul').stop().slideup(400, 'linear'); }); })(jquery);
Comments
Post a Comment