0

メインのサイト ナビゲーション メニューのルック アンド フィールを変更しようとしています。これまでのところ、css 属性を特定し、背景画像とフォント スタイルを変更することはできましたが、サブ メニューを「スライド ダウン」または「ページ上でフェードインします。

私が知る限り* 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 開発プロジェクトを引き継ぎましたが、これまでのところ文書化が不十分であり、以前のチーム メンバーが残っていないため、彼らに尋ねることはできません。これがどのように機能するかを知る方法がわかりません。

4

1 に答える 1

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;
}
于 2012-07-17T17:36:02.977 に答える