1

画像を見てください。ウィンドウの左側にメニューがあり、サブメニューが混乱してウィンドウから出てしまうことがあります。ウィンドウから出るサブメニューの値を見つけたいのですが、これは私のhtmlコードです:

<ul class="nav">
    <li><a class="basket" href="#">مشتریان ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="employ" href="#">دعوت به همکاری
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="about-us" href="#">درباره ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="contact" href="#">تماس با ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
</ul>

また、ここに私のcss：

.submenu
{
    background: #fff;
    height: 150px;
    width: 400px;
    display: none;
    position: absolute;
    opacity: 0;
    transition: opacity ease-in 0.5s;
    -webkit-transition: opacity ease-in 0.5s;
    -moz-transition: opacity ease-in 0.5s;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.nav li:hover > .submenu
{
    opacity: 1;
    transition: opacity ease-in 0.5s;
    -webkit-transition: opacity ease-in 0.5s;
    -moz-transition: opacity ease-in 0.5s;
}

4

1 に答える 1

2

それがあなたのために仕事をすることができるかどうかはわかりませんが、とにかく試すことができます.

ウィンドウの幅を計算する必要があります。次に、サブメニューの幅と左オフセットを計算します。これで、サブメニューがウィンドウからはみ出しているかどうか、およびサブメニューがどの程度はみ出しているかがわかります。

var windowWidth = $(window).width();
var subOffsetLeft = $(this).offset().left;
var subWidth = $(this).width();

var rightOfSub = subOffsetLeft + subWidth;

if (rightOfSub > windowWidth) {
    var expendedSize = rightOfSub - windowWidth;
    alert(expendedSize)
}

このFiddleで動作することがわかります。それが役立つことを願っています。

編集＃1：

サブメニューがウィンドウからはみ出さないように調整したい場合は、サブメニューがどれだけアウトしているかに応じてマージンを変更できます: Fiddle

于 2013-10-09T13:41:48.277 に答える