CODEWITHSUNDEEP
jquerycss
Exception
Exception

Reputation: 8379

Implementing Google like menu using CSS and jQuery

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

Upvotes: 0

Views: 1148

Answers (3)

ArVan
ArVan

Reputation: 4275

I made some changes to your js to make menu click-based. Also prepared a function for hovering menu elements. I hope this will help.

    $('#content1').click(function() {
    $('#a').fadeIn('slow');
     event.stopPropagation(); 
});
$('.ele').hover(function(){

});
$('body').click(function(){
  $('#a').fadeOut('slow');});

Upvotes: 1

sirmdawg
sirmdawg

Reputation: 2579

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)

Upvotes: 2

danludwig
danludwig

Reputation: 47375

For starters, here is a fork of your fiddle. All I did was give your ol a position: absolute.

This causes the menu to not affect other content lower in the page flow.

Which google menu are you talking about? The MORE tab?

Upvotes: 2

Related Questions