Question

我正在尝试更改主站点导航菜单的外观和感觉，到目前为止我已经能够识别css属性并更改背景图像和字体样式但我想让子菜单'向下滑动'或'淡入'在页面上。

据我所知*使用了MvcSiteMap，代码的工作原理是将子菜单的可见性设置为'none'，然后在悬停时设置为'visible'。有谁知道如何找到控制此行为的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>

*我不是那个创建网站导航菜单的人，我最近接手了一个网站开发项目，到目前为止，文档记录很少，没有以前的团队成员，所以我不能问他们，因为我很新对此我不知道如何找出它是如何工作的。

Answer 1

这是一个基本的开始...所以你可以用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;
}

如何在使用Html.MvcSiteMap（）创建的菜单中添加有吸引力的jquery效果.Menu（）？

1 个答案: