0

サブメニューが垂直にドロップダウンする CSS3 で 3 レベルのドロップダウン メニューを作成します。すべて問題ありません。唯一の問題は、メニュー ( .main-menu > li-> 以下のコードを参照) が画面の右側に近すぎる場合、サブメニューの一部が画面から「はみ出して」消えることです。見えない。

画面の端に近すぎる場合は、現在のサブメニューのフローティング方向を変更して、jQuery を使用してメニューを改善したいと考えています。私はjQueryの初心者なので、少し手伝ってもらえますか?

HTML の主な構造は次のとおりです。

<nav>
  <ul class="main-menu">
    <li><a href="#">Menu Point 1</a>
      <ul>
        <li><a href="#">Menu Point 1.1</a>
          <ul> 
            <li><a href="#">Menu Point 1.1.1</a></li>
            <li><a href="#">Menu Point 1.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 1.2</a></li>
        ....
      </ul>
    </li>
    <li><a href="#">Menu Point 2</a>
      <ul>
        <li><a href="#">Menu Point 2.1</a>
          <ul>
            <li><a href="#">Menu Point 2.1.1</a></li>
            <li><a href="#">Menu Point 2.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 2.2</a></li>
        ....
      </ul>
    </li>
    .....
  </ul>
</nav>

私が見る限り、jQuery は次のことを行う必要があります。

  1. 第 1 レベルのサブメニュー + 第 2 レベルのサブメニューの幅 (x) を測定します。

  2. .main-menu > li画面の左側の位置と右側の位置の間の距離を測定します (y)

  3. if (y-x)<0 { float the submenus to the left (by default they float to the right); }

どのように始めればよいか、何か提案はありますか?

4

1 に答える 1

0

だから、私は自分で解決策にたどり着きました。誰かが興味を持っている場合のコードは次のとおりです。

$(".main-menu > li > ul > li").addClass("submenu-1");
$(".main-menu > li > ul > li > ul > li").addClass("submenu-2");

$(".main-menu > li").on("mouseover", function() {

    if($(this).find(".submenu-1").length > 0 ) {
      var clientWidth = document.body.clientWidth;
      var menuDist1 = $(this).find(".submenu-1").offset().left;
      var menuWidth = $(this).width();
      var menuWidth1 = $(this).find(".submenu-1").width();
      var menuWidth2 = $(this).find(".submenu-2").width();

      var menuPosition = menuDist1 + menuWidth1 + menuWidth2;

      if (menuPosition > clientWidth) {
        var newPosition1 = menuWidth - menuWidth1;
        var newPosition2 = -menuWidth1;

        $(this).find(".submenu-1").parent("ul").css("left", newPosition1);
        $(this).find(".submenu-2").parent("ul").css("left", newPosition2);
      }
   }    
});
于 2013-11-04T22:27:35.447 に答える