javascript - Menu item onclick call a muti css onhover event -
have trouble figuring out wold great thank in advance
i have menu looks this
html
<li class="menuitem"><a href="#" class="drop" onclick="dowork();">phones</a> <div class="flyout"> <div class="col_1"> <a href="#"><h3>phones</h3></a> <ul> <li><a href="https://www.google.com/" target="_top">nokie</a></li> <li><a href="https://www.google.com/" target="_blank">iphone</a></li> < </ul> </div> </li>
with 2 css
.menuitem:hover { border: 1px solid #777777; /* background color , gradients */ background: #fafafa; /* old browsers */ background: -moz-linear-gradient(top, #fafafa 0%, #fcfcfc 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(70%,#fcfcfc), color-stop(100%)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* ie10+ */ background: linear-gradient(to bottom, #fafafa 0%,#fcfcfc 100%); /* w3c */ /* rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .menuitem:hover .flyout { display:block; top:auto; left:0px; }
how call 2 class on onclick function?
use jquery add/remove or toggle class:
$( document ).ready(function() { $("p").click(function () { $('.menuitem').addclass('flyout'); }); });
this in css:
.flyout { display:block; top:auto; left:0px; }
Comments
Post a Comment