2

サイトのヘッダーに水平 CSS ドロップダウン メニューがあります。メニューはヘッダーにも表示されます。メニューにマウスオーバーしてドロップダウンを取得すると、ドロップダウンにサブメニューを持つサブメニューがある場合、メニューが画面から完全に飛び出し、右に表示されない場所に移動するという問題があります。水平スクロール バーを取得します。このメニューは、次のようなリスト項目を使用して作成されます (簡潔にするために、大量の項目を削除しました)。

<nav id="main-menu"  role="navigation">   
   <div class="menu-navigation-container">
      <ul class="menu">         
         <li class="last expanded">
            <a href="/content/clients" title="Clients">Clients</a>
            <ul class="menu">
               <li class="first expanded">
                  <a href="/content/information-technology-client" title="IT Client Services">Information Technology</a>
                  <ul class="menu">
                     <li class="first expanded">
                        <a href="/content/enterprise-applications-client" title="Client Enterprise Applications">Enterprise Applications</a>
                        <ul class="menu">
                           <li class="first leaf"><a href="/content/oracle-client" title="Oracle Client Services">Oracle</a></li>
                           <li class="leaf"><a href="/content/peoplesoft-client" title="PeopleSoft Client Services">PeopleSoft</a></li>
                           <li class="leaf"><a href="/content/sap-client" title="SAP Client Services">SAP</a></li>
                           <li class="leaf"><a href="/content/lawson-client" title="Lawson Cilent Services">Lawson</a></li>
                           <li class="leaf"><a href="/content/hyperion-client" title="Customer Relationship Management Client Services">Hyperion</a></li>
                           <li class="leaf"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>                               
                        </ul>
                     </li>                     
                  </ul>
               </li>               
            </ul>
         </li>
      </ul>
   </div>
   <div class="clear"></div>
</nav>
<!-- end main-menu -->

つまり、基本的に「エンタープライズ アプリケーション」に到達すると、メニューが画面からはみ出して表示されなくなります。メニューの HTML はシステムによって生成されるため、私はメニューの HTML を制御できません。追加の ID またはクラスを作成できません。ここで示したものだけを使用できます。ただし、jQuery をカスタム ファイルに追加して、これに対処することはできます。リスト項目が画面から飛び散るのを防ぐことができる jQuery (または単純なバニラ JavaScript) を考えられる人はいますか? また、これはイントラネット アプリであるため、残念ながらデモをお送りすることはできません。ああ、私は外部 CSS ファイルにアクセスできるので、追加の CSS を追加できます。メニュー自体の ID とクラスを追加/編集することはできません。

ありがとう

4

2 に答える 2

1

私はこれをやっただけで、うまくいくようです。

$('#main-menu li').mouseenter(function() {
  //make sure menu does not fly off the right of the screen
  if ($(this).children('ul').offset().left + 200 > $(window).width()) {       
    $(this).children('ul').css('right', 180);          
  } 
});
于 2013-05-14T19:00:15.607 に答える
-1

ドロップダウンにカーソルを合わせると、jQuery を使用してスクロールできますか?

                             |
                             V
<li class="leaf" onHover="$(this).scroll();"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>
于 2013-05-13T22:50:47.000 に答える