0

JSFiddleの例をご覧ください。

右側の「x」を閉じるメニューを作りたいです。緑色の div をクリックするとメニューがポップアップします。

HTML

<div class="field">
<nav id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Item 3</li>
    </ul>
    <div class="close">X</div>
</nav>

CSS

.field {
    background: green;
    width: 350px;
    height: 200px;
    margin: 10px auto;
    position: relative;
    cursor: pointer;
}
#menu {
    position: absolute;
    display: none;
}
#menu ul {
    width: 80%;
    border: 1px solid #999;
    float: left;
}
#menu li {
    background: #fff;
    padding: 5% 15%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #999;
    white-space: nowrap;
}
#menu .close {
    background: #ccc;
    width: 20%;
    padding: 5%;
    float: right;
}

JS

（JSがぐちゃぐちゃ、サッと書きました）

$('.field').on('click', function (e) {

 var $pointer = $('#pointer'),
        $menu = $('#menu'),
        parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top,
        circleX = relX - ($pointer.outerWidth() / 2) + 1,
        circleY = relY - ($pointer.outerHeight() / 2) + 1;

    $pointer.css('left', circleX);
    $pointer.css('top', circleY);
    $pointer.show();

    $menu.css('left', circleX + $pointer.outerWidth());
    $menu.css('top', circleY);
    $menu.show();

    $menu.one('click', '.close', function (e) {
        $menu.hide();
        $pointer.hide();
        e.stopPropagation();
    });
});

2 つの問題があります。

  • li アイテムは、その中のテキストが適切にオーバーフローしません。

  • [x] 要素はメニューの下にあり、右側にはありません。

他の同様の質問で提案されているさまざまな組み合わせを試しましたが、何も機能しないか、疲れていて何かを見逃していました。

重要なことは、ハードコードされた値があってはならないということです。適切な値は % のみです。これは、さまざまなサイズのブラウザで見栄えがするはずだからです。

これらの問題を解決する方法はありますか?

4

1 に答える 1

0

CSSボックスモデルを確認する必要があります。パディング、ボーダー、マージンは常に要素の幅/高さに追加され、定義した幅には含まれません。の右側に20％のスペースが残っていないため、フローティングXがジャンプダウンしていulます。

Xをdivの外側に配置することをお勧めします。すべてのフロートを除外することもできます。position: absolutediv.closeに設定し、を使用してコンテナの境界の外側に移動しleft: 100%ます。

#menu {
    position: absolute;
    display: none;
}
#menu ul {
    border: 1px solid #999;
}
#menu li {
    background: #fff;
    padding: 5% 15%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #999;
}
#menu .close {
    background: #ccc;
    width: 20%;
    padding: 5%;
    position: absolute;
    top: 0;
    left: 100%;
}

ちなみに、white-space: nowrapメニュー要素のテキストがの境界から外れることになりますがli、これはあまり柔軟ではありません。

于 2013-01-28T16:46:12.330 に答える