jquery - hover on a button to get options in a modal box like google plus -
for of have seen google plus must have noticed when hover on "add circles" button, automatically presented modal box type of div contains circles in checkboxes , can click 1 want.
is there example of how using css/jquery...or perhaps similar it?
or in explanation, how done?
here example on how do:
<!doctype html> <html> <head> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> var aa; $(document).ready(function() { $(".addcontainer").mouseenter(function() { $(".addcircles").animate({height : 200}); }); $(".addcontainer").mouseleave(function() { $(".addcircles").animate({height : 0}); }); $(".addcircles input[type=checkbox]").change(function(e){ alert($(this).attr("id")+": "+($(this).attr("checked") == "checked" ? "checked" : "unchecked")); }); }); </script> </head> <body> <div class="addcontainer" style="position: relative; width: 120px;"> <div class="add" style="cursor: pointer;">add circles</div> <div class="addcircles" style="height: 0; position: absolute; overflow: hidden;"> <ul style="list-style: none;"> <li><input type="checkbox" id="circle1" />circle 1</li> <li><input type="checkbox" id="circle2" />circle 2</li> <li><input type="checkbox" id="circle3" />circle 3</li> </ul> </div> </div> </body> </html>
Comments
Post a Comment