像使用CSS和jQuery的菜單一樣實現Google

我想實現最新的Google菜單..（當我們打開谷歌左上角時，我們可以看到一個Google Button。當我點擊那個按鈕時，菜單會一直出現，直到另一個菜單點擊發生在文件上，懸停的那個元素菜單會出現，直到mouseout，我想實現相同的，這裏是我試過的代碼..我希望我會在這裏得到幫助。功能，例如谷歌菜單（效果）像使用CSS和jQuery的菜單一樣實現Google

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代碼

$('#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是小提琴
感謝

來源

2011-12-15 Exception

什麼是你的代碼問題那麼遠？ – 2011-12-15 18:26:59

我想實現像谷歌菜單一樣的確切功能.. – Exception 2011-12-15 18:29:53

您可以嘗試使用toggle這樣的：

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

然後放在某處代碼，如果用戶點擊了其他位置，將關閉菜單...

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

如果我們不如上所示，包括event.stopPropagation();，$('html').click()也會發生，這意味着它將打開和關閉菜單。

希望這會有所幫助！

P.S.這裏是一個小提琴： http://jsfiddle.net/mkprogramming/zhdDC/

（我使用了一種叫做體，而不是html格）

來源

2011-12-15 18:48:30 sirmdawg

對於初學者來說，here is a fork of your fiddle。我所做的只是給你一個位置：絕對的。

這會導致菜單不會影響頁面流中較低的其他內容。

你在說什麼谷歌菜單？更多選項卡？

來源

2011-12-15 18:47:03 danludwig

我對你的js做了一些改變，使菜單基於點擊。還準備了懸停菜單元素的功能。我希望這將有所幫助。

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

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

來源

2011-12-15 18:48:18 ArVan

像使用CSS和jQuery的菜單一樣實現Google

回答

相關問題