画像のモックアップを 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;
}