CSSで可変式ドロップダウンメニュー

CSS

CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。ホバー時にメニューが降りてくるのでスマホやタッチデバイスでは動作が微妙なんですが、これをベースにしてレスポンシブなドロップダウンメニューを作り込んでいけそうな気がします。スマホやタッチデバイスの場合だけはクリック時にメニューが降りてくるようにする処理をjsで書いたりするとよさそう。

[ads_center]

コード

以下は実際に作ってみた時のコードです。

HTML

以下、HTML。

<nav id="navi">
	<ul>
		<li><a href="#">カテゴリ1</a>
			<ul>
				<li><a href="#">リスト1</a></li>
				<li><a href="#">リスト2</a></li>
				<li><a href="#">リスト3</a></li>
				<li><a href="#">リスト4</a></li>
				<li><a href="#">リスト5</a></li>
			</ul>
		</li>
		<li><a href="#">カテゴリ2</a>
			<ul>
				<li><a href="#">リスト1</a></li>
				<li><a href="#">リスト2</a></li>
				<li><a href="#">リスト3</a></li>
				<li><a href="#">リスト4</a></li>
			</ul>
		</li>
		<li><a href="#">カテゴリ3</a>
			<ul>
				<li><a href="#">リスト1</a></li>
				<li><a href="#">リスト2</a></li>
				<li><a href="#">リスト3</a></li>
			</ul>
		</li>
		<li><a href="#">カテゴリ4</a>
			<ul>
				<li><a href="#">リスト1</a></li>
				<li><a href="#">リスト2</a></li>
			</ul>
		</li>
	</ul>
</nav>

CSS

続いてCSSです。

#navi a {
	text-decoration: none;
}

#navi ul {
	font-size: 14px;
}

#navi ul li {
	display: block;
	float: left;
	width: 25%;
	position: relative;
}

#navi ul li ul {
	width: 100%;
	display: none;
	position: absolute;
}

#navi ul li:hover ul {
	display: block;
}

#navi ul li a {
	color: #fff;
	background: #999;
	border-right: 1px solid #666;
	display: block;
	height: 3em;
	line-height: 3em;
	padding-left: 0.5em;
	padding-right: 0.5em
}

#navi ul li:last-child a {
	border-right: none;
}

#navi ul li:hover a {
	color: #333;
	background: #eee;
}

#navi ul li ul li {
	width: 100%;
	clear: left;
}

#navi ul li ul li a {
	border-right: none;
	height: 2em;
	line-height: 2em;
	padding: 0.3em;
}

#navi ul li ul li a:hover {
	background: #ccc;
}

ちなみにここでは親カテゴリが4つあるので「#navi ul li」のwidthを25%としましたが、3つなら33.33%、5つなら20%といったように、カテゴリの数によってここのサイズを変更する必要があります。

以下と組み合わせるとレスポンシブにも色々と対応できそう。

Lightroomのトーンカーブの使い方Lightroomで基本的なトーンカーブの使い方前のページ

jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  2. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  3. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  4. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  5. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  6. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP