0

画像のモックアップを HTML/CSS に変換しようとしていますが、navbar を機能させるのに苦労しています:

JSFiddle コード:

http://jsfiddle.net/victorhooi/ZcrCc/

フルスクリーンの JSFiddle 出力:

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

これは、ナビゲーション バーのモックアップです。

ここに画像の説明を入力

アイデアは、通常はハンバーガー アイコンと「メニュー」テキストのみを持ち、ホバーすると下に開いてグリフィコンとテキストを表示するというものです。

グリフィコンを既存の<li>要素に統合する方法がわかりません (<br>行を分割するために a を使用する必要がありますか?) - そして CSS の配置を使用して、開いたり閉じたりします。

#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
}

/* first level */

#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }
4

1 に答える 1

1

これでもっと近くなるはずです。グリフ アイコンをブロック要素にします。素敵なアニメーションが必要な場合は、CSS3 または jQuery を使用してください。

html

<ul>
    <li>
        <ul>
            <li><a href="#biography"><img src="http://placehold.it/50x50"/>Bio</a>
            </li>
            <li><a href="#story"><img src="http://placehold.it/50x50"/>Story</a>
            </li>
            <li><a href="#proposal"><img src="http://placehold.it/50x50"/>Proposal</a>
            </li>
            <li><a href="#gallery"><img src="http://placehold.it/50x50"/>Gallery</a>
            </li>
            <li><a href="#rsvp"><img src="http://placehold.it/50x50"/>RSVP</a>
            </li>
            <li><a href="#thedate"><img src="http://placehold.it/50x50"/>The Date</a>
            </li>
            <li><a href="#party"><img src="http://placehold.it/50x50"/>Party</a>
            </li>
            <li><a href="#thankyou"><img src="http://placehold.it/50x50"/>Thank You</a>
            </li>
        </ul> <a href="/">Menu</a>

    </li>
</ul>

CSS

#nav > a {
    display:none;
}
#nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
#nav li {
    position: relative;
}
/* first level */
#nav > ul > li {
    float: left;
}
/* second level */
#nav li ul {
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav li ul img {
    display:block;
    min-width:100%;
}
#nav li ul li {
    text-align:center;
}

http://jsfiddle.net/Wz5wn/

于 2013-09-30T19:41:04.563 に答える