2012-07-17 47 views
0

我想改變主要網站導航菜單的外觀和感覺,到目前爲止我已經能夠識別CSS屬性並更改背景圖像和字體樣式,但是我想讓子菜單「向下滑動」或者頁面上的「淡入」。如何將有吸引力的jQuery效果添加到使用Html.MvcSiteMap()。Menu()創建的菜單中?

據我所知*使用MvcSiteMap,代碼的工作方式是將子菜單的可見性設置爲'無',然後在懸停時設置爲'可見'。有誰知道如何找到控制這種行爲的jquery/javascript文件?

我追加菜單的CSS結構的情況下,它可以幫助:

<nav id="menu"> 
    <ul class="dropdown"> 
    <li class> 
    <a href ="/About">About</a> 
    <ul class="sub_menu" style="visibility:hidden;"> 
     <li class> 
     <a href="/About/Team">Team</a> 
     </li> 
     <li class> 
     <a href="/About/History">Story</a> 
     </li> 
    </ul> 
    </li> 
    ..etc... 
    </ul> 
</nav> 

*我不是誰創建的站點導航菜單中的一個,我最近接手一個Web開發項目,所以遠遠沒有記錄,沒有以前的團隊成員保留,所以我不能問他們,因爲我是這個新手,我不知道如何找出這是如何工作的。

回答

0

這是一個基本的開始......這樣你就可以用CSS完成,並添加一些其他的動畫或行爲

運行的版本:http://jsfiddle.net/LUVTQ/

HTML

<nav id="menu"> 
    <ul class="dropdown"> 
    <li> 
    <a class="main_option" href ="/About">About</a> 
    <ul class="sub_menu" style="display:none;"> 
     <li class> 
     <a href="/About/Team">Team</a> 
     </li> 
     <li class="main_option"> 
     <a href="/About/History">Story</a> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <a class="main_option" href ="/About">Etc</a> 
    <ul class="sub_menu" style="display:none;"> 
     <li class> 
     <a href="/About/Team">Team</a> 
     </li> 
     <li class="main_option"> 
     <a href="/About/History">Story</a> 
     </li> 
    </ul> 
    </li> 
    ..etc... 
    </ul> 
</nav>​ 

和腳本

$(document).ready(function(){ 
    $('a.main_option').click(toggleMainOption);  
}); 

function toggleMainOption(){ 
    $(this).next('.sub_menu').slideToggle('fast'); 
    return false; 
} 
相關問題