0

Web サイトの場合、次のような css/html メニューを作成する必要があります。

ここに画像の説明を入力

ご覧のとおり、利用可能な幅を埋めるメニュー リンクの左側と右側にいくつかの黄色の境界線があります。また、メニューの下にグラデーションのある背景画像があります。

誰かがこのメニュー スタイルを実現する方法を知っていますか?

これまでのコード:

<div id="submenu">
    <ul>
        <li class="selected">
            <a href="#">Wirtschaft<div></div></a>
            <ul>
                <li><a href="#">Kurzeinführung Wirtschaft</a></li>
                <li><a href="#">Wirtschaftstheorie</a></li>
                <li><a href="#">Arbeitsmarkt</a></li>
                <li class="selected"><a href="/test.html">Geld- und Konjunktur</a></li>
                <li><a href="#">Staatsfinanzen</a></li>
                <li><a href="#">Wirtschaft: alle Beiträge</a></li>
            </ul>
        </li>
    </ul>
</div>

#submenu {
    width: 225px;
}

#submenu ul {
    list-style-type: none;
}

#submenu ul li a {
    border-left: 6px solid transparent;
    padding-left: 4px;
    display: block;
    margin-bottom: 15px;
    color: #222624;
    font-size: 17px;
}

#submenu ul li a:hover,
#submenu ul li.selected > a {
    border-left: 6px solid #CAB106;
}

#submenu ul li ul li a {
    margin-bottom: 7px;
    font-size: 14px;
}

編集:画像のグラデーションは実際には本体に存在し、純粋な css では実行できないと思うので、背景画像にする必要があります。

EDIT2: PeterVR が提供するソリューションはうまく機能します! 残念ながら、同じスタイルの別のリストで立ち往生していますが、ul が終了したときにブロックが完全に終了していません。PeterVR が提供するコードを使用してこれを達成する方法について何か考えはありますか?

新しい問題

4

2 に答える 2

2

おそらく次のようなものです：http：//jsfiddle.net/AXze7/1/
cssのいくつかを変更しました：
-メインulをオーバーフロー非表示に設定します-
表示ブロックを<a>タグから削除しました-タグを相対位置に
設定します<a>動作する次の：

#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
    background: #CAB106;
    content: ' ';
    display: block;
    height: 100%;
    width: 225px;
    margin-left: 4px;
    position: absolute;
    left: 100%;
    top: 0;
}

これにより、アンカータグの後に緑色のブロックが追加されます。

編集：
私はあなたの2番目のケースのために私のフィドルを更新しました：http：//jsfiddle.net/AXze7/2/

変更点の概要：

  • からを削除しoverflow:hidden、ulに配置しましたli
  • スタイリングを微調整し、ピクセルで遊んで、スクリーンショットのように見せました。これを前の例と比較すると、何を達成するかを理解するのに役立ちます。
  • :beforeホバー/選択時に変化するように見える矢印アイコンの 疑似クラスを追加しました。

コードは次のようになります。 

#submenu ul li a:before,
#submenu ul li.selected > a:before {
    background: #fcc; /* put your black arrow image here */
    content: ' '; 
    display: block;
    height: 12px;
    width: 12px;
    margin-left: 2px;
    position: absolute;
    left: -18px;
    top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
    background: red; /* put your colored arraw image here */
}
于 2012-12-09T13:36:37.390 に答える
0

js fiddle.make でこのデモ#eeeを確認してください。写真に示されているグレナディンで高さ 1 ピクセルの画像を作成し、その画像に置き換えます。

于 2012-12-09T10:25:32.520 に答える