Question

I want to implement the latest google like menu.. (When we open google left top we can see a Google Button. When I click on that button menu will appear and will stay until another click is happened on document. On hover of that element menu will appear and will live till mouseout. I want to implement the same and here is the code I have tried.. I hope I will get help here. I want to add the exact functionality like google menu(effects)

HTML

<div id="content1" style="width:50px">
<span class="header">Hello</span>
<ol id="a">
    <li><span class="ele">jkehfkje</span></li>
    <li><span class="ele">jkehfkje</span></li>
    <li><span class="ele">jkehfkje</span></li>
</ol>
</div>
<div>kufhjegfe</div>

jQuery code

$('#content1').hover(function() {
   $('#a').fadeIn('slow');
}, function() {
   $('#a').fadeOut('slow');
});

CSS

#a
{
  display:none   
}
.ele
 {
   height:20px;
   width:60px;
   border:1px solid black;
 }
.ele:hover
{
  cursor:pointer
}

here is the fiddle
Thanks

Answer 1

You might try using toggle like this:

 $('#content1').click(function(){
     $('#a').toggle('slow');
     event.stopPropagation(); //this is important
 });

Then somewhere put code that will close the menu if the user clicks somewhere else…

$('html').click(function(){
    if($('#a').is(':visible')) $('#a').toggle('slow');
});

If we don’t include event.stopPropagation(); as seen above, the $('html').click() will happen as well, which means it will both open and close the menu.

Hope this helps!

P.S. Here is a fiddle:
http://jsfiddle.net/mkprogramming/zhdDC/

(I used a div called body instead of html)