1

現在、サイト用にかなり興味深い形状のナビゲーションを作成しています。各メニュー項目が必要とする形状を以下に示します。

ここに画像の説明を入力

最終的なナビゲーションは、これの拡張バージョンのようになります。

ここに画像の説明を入力

これらの形状を CSS で作成するのは興味深い実験になると思いました。矢印の形状の 1 つの CSS と HTML は次のとおりです。

    .arrowEndOn {
        font-size: 10px; line-height: 0%; width: 0px;
        border-top: 11px solid #FFFFFF;
        border-bottom: 11px solid #FFFFFF;
        border-left: 5px solid transparent;
        border-right: 5px solid #FFFFFF;    
        float: left;
        cursor: pointer;
    }

    .arrowBulkOn {
        height: 20px;
        background: #FFFFFF;
        padding: 2px 5px 0px 0px;
        float: left;
        color: #000000;
        line-height: 14pt;
        cursor: pointer;
    }

    .arrowStartOn {
        font-size: 0px; line-height: 0%; width: 0px;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 5px solid #FFFFFF;
        border-right: 0px solid transparent;        
        float: left;
        cursor: pointer;
    }

    <div id="nav" class="navArrow" style="position: relative;">
        <div class="arrowEndOn" id="nav">&nbsp;</div>
        <div class="arrowBulkOn" id="nav">NAV</div>
        <div class="arrowStartOn" id="nav">&nbsp;</div>
    </div>

各 nav アイテムには負のオフセットが適用されています (デモでは省略しました)。これは、それらがすべて互いに同一平面になるようにレンダリングされるためです。

ロールオーバーとオン状態を Javascript で処理しています。

私の問題は、ナビゲーションをページの幅全体に広げることです。現時点では、すべてを収容するために、ナビゲーション コンテナーをより大きな幅に設定する必要があります。

オーバーフローを非表示に設定しようとしましたが、最後のアイテムは続行して終了するのではなく、レベルを下げています。

ここに例を設定しました - http://jsfiddle.net/spacebeers/S7hzu/1/

赤い境界線はoverflow: hidden;あり、青い境界線はありません。]

私の質問は次のとおりです。レベルを下げることなく、含まれている div の幅を埋める行にボックスをすべてフロートさせるにはどうすればよいですか。

ありがとう

4

2 に答える 2

1

各矢印に負のマージンを追加します。

.navArrow {
  float: left;
  margin-left: -8px;
}

デモ: http://jsfiddle.net/S7hzu/2/

于 2012-01-27T16:44:45.230 に答える