2

親への相対サブナビゲーションを使用して、CSS のみの 2 レベルの水平ナビゲーション バーを構築しています。すべてのメニュー項目はインラインです。クラス「右」または「左」に応じて、サブナビゲーションは親に整列します。これは私がこれまでに達成したことです：

html:

<body>
    <div class="navbar">
        <ul class="topnav left">
            <li>nav</li>
            <li>menu1
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item1-1</li>
                        <li>item1-2</li>
                        <li>item1-3</li>
                    </ul>
                </span>
            </li>
            <li>menu2
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item2-1</li>
                        <li>item2-2</li>
                        <li>item2-3</li>
                    </ul>
                </span>
            </li>
        </ul>
        <ul class="topnav right">
            <li class="right">menu3
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
                </span>
            </li>
            <li class="right">menu4
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
                </span>
            </li>
        </ul>
    </div>
</body>

CSS:

body {
    font-family: arial;
    margin: 0;
}

.navbar {
    height: 40px;
    background-color: black;
}

ul.topnav {
    margin: 0;
    padding: 0;
}

.subnav {
    position: absolute;
}

.subnav-right {
    right: 0;
}

ul.subnav {
    position: relative;
    margin: 4px 0 0 -8px;
    padding: 0;
    display: none;
}

ul.topnav  li{
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

ul.subnav li {
    background-color: red;
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    position: relative;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

.topnav li:hover {
    background-color: red;
}

.topnav li:hover ul.subnav {
    display: inline-block;
    background-color: red;
}

.nav ul li:hover {
    background-color: black;
}

.nav ul li {
    width: 100%;
}

.nav li ul {
    display: inline-block;
    clear: none;
    position: absolute;
    background-color: red;
    margin: 4px 0 0 -8px;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

jsfiddle:

jsfiddle.net/aLZqZ

これが私が達成しようとしていることです：

ナビメニューへの画像

4

1 に答える 1

11

私はあなたのためにこれを手に入れましたhttp://jsfiddle.net/aLZqZ/99/。100回未満の試行でも。私は少し夢中になり、合計で少なくとも 5 時間費やしました。私にとって良い挑戦であり、これまでサブナビをいじったことはありません。

この問題には次の 3 つの問題がありました。

  • 水平ナビゲーション バーに float:right を使用することは、予期しない問題を引き起こすため、通常、私の経験では良くありません。また、同じ要素が相対または絶対に配置されている場合、ブラウザーによって無効化され、無視されます (余分なコードがたくさんあります)。 . 必要に応じて float:right を text-align:right に変更しました。最近誰かのために修正した水平ナビゲーションについては、これを参照してください:ナビゲーションバーを右に揃える/フローティングする

  • サブメニューを含む li 要素が配置されていないため、その中の ul の position:absolute および right:0 は、position:absolute または :relative である最も近い包含要素に従って移動します。この場合、要素が html であるようなものはありませんでした。したがって、ul はページの最後までプッシュされます。これらの li 要素に position:relative を追加して、 right:0 が期待どおりに動作するようにしましたが、すべての li 要素を 1 行に配置せず、代わりに積み重ねました。

  • :inline がそれを行っていたときに display:inline-block のタグがありましたが、さらに重要なことに、ここで試みていることを行うために同じ要素で white-space:nowrap が重要であると実際に言及した人は誰もいません。inline-block と nowrap を一緒に使用すると、要素のような 1 つの行ブロックを、段落のように全体として整列または浮動させることができます。ところで、IE7 ではインライン ブロックに特別な注意が必要です。ここを参照してください: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

    フィドルの下部に特別な css を作成して、左右のナビゲーションを分離しました。基本的に、元の css はそのままにしました。htmlも少し修正しました。ここにすべてがあります。

    右ナビゲーションの HTML (左ナビゲーションの HTML に従います):

            <ul class="rightNav">
            <li>menu3
                    <ul class="rightSubNav">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
            </li>
            <li>menu4
                    <ul class="rightSubNav">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
            </li>
        </ul>

    左右のナビゲーションを分離するために追加した CSS:

            ul.rightNav {
        margin:0;
        padding:0;
        text-align: right;
    }

    .rightNav li:hover {
        background-color: red;
    }

    ul.rightNav  li{
        list-style: none;
        display: inline-block;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        line-height: 32px;
        position:relative;
    }

    ul.rightSubNav {
        position: absolute;
        right:0;
        margin: 4px 0 0 -20px;
        padding: 0;
        display: none;
        white-space:nowrap;
    }
    ul.rightSubNav li {
        background-color: red;
        list-style: none;
        display: inline;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        position: relative;
        line-height: 32px;
    }

    .rightNav li:hover ul.rightSubNav {
        display: inline-block;
        background-color: red;
    }

    これが役に立ったら、賛成票と回答の選択に感謝します。何か他のことを考え出し、それが別の方法で機能するようになった場合は、投稿してください。ぜひご覧ください。

    • 于 2013-02-02T07:50:31.597 に答える