擬似要素とCSS3を使ってリストメニューを楽しくデザイン

2013.07.23 カテゴリ：スタイルシート CSS メニュー サンプル

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。

rist-point-catch.png

サンプルを用意していますので、実際の動きをご確認ください。

擬似要素とCSS3を使ってリストメニューを楽しくデザイン

まずはHTMLから

<ul class="rist-menu" id="list1">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Ruby</a></li>
</ul>

classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。

1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思いますので、このように分ける必要もありません。

続いて、すべてのサンプルで共通している部分のCSSです。

.rist-menu {
	list-style: none;
	overflow: hidden;
	width: 300px;
	padding: 0;
	margin: 50px auto 100px;
}
.rist-menu li {
	list-style: none;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #879c18;
}
.rist-menu li:last-child {
	border-bottom: 0px;
}
.rist-menu li a {
	display: block;
	position: relative;
	z-index: 10;
	height: 40px;
	margin: 0;
	padding: 0px 10px 0px 50px;
	background: #a1b91d;
	color: #fff;
	font-size: 14px;
	line-height: 40px;
	font-weight: bold;
	text-decoration: none;
}
.rist-menu li a:hover {
	background: #879c18;
}

4行目の「width: 300px;」で全体の幅を指定してます。

23行目の「height: 40px;」、25行目の「padding: 0px 10px 0px 50px;」、29行目の「line-height: 40px;」で、高さは40pxで固定されます。

「overflow: hidden;」や「z-index: 10;」あたりはサンプルによっては必要ないですがあっても問題ないと思います。z-indexは必ずしも10である必要はありません。

サンプル1

rist-point01.png

先日書いた「スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法｜Webpark」という記事で紹介した矢印です。transformを使っているのでブラウザによってはちゃんと表示されません。。

#list1 li a:before {
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 20px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #fff;
}
#list1 li a:after {
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #a1b91d;
}
#list1 li a:hover:after {
	background: #879c18;
}

詳しくは前の記事を見ていただければと思いますが、簡単にいうと白と背景と同じ色のひし形を2つ重ねて表示しています。

サンプル2

rist-point01.png

普通の三角形です。

#list2 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #fff;
}
#list2 li a:hover:before {
	left: 27px;
}

3辺のボーダーを背景と同じ色に、左のボーダーを白にすることで矢印を表現します。

サンプル3

rist-point01.png

長方形と矢印を組み合わせた矢印です。

#list3 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #fff;
}
#list3 li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 21px;
	width: 3px;
	height: 10px;
	margin-top: -5px;
	background :#fff;
}
#list3 li a:hover:before {
	left: 27px;
}
#list3 li a:hover:after {
	left: 23px;
}

:beforeで三角形を、:afterで四角形を表示しています。四角形の高さは三角形のボーダーの長さの2倍にします。三角形と四角形の間は1pxの間隔を空けています。

サンプル4

rist-point01.png

丸の中に矢印が入っています。

#list4 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 19px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 50%;
	background: #fff;
}
#list4 li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #a1b91d;
}

:beforeで円を、:afterで矢印を作ります。

サンプル5

rist-point01.png

矢印っぽい矢印です。三角形と長方形をくっつけています。

#list5 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 25px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #fff;
}
#list5 li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 21px;
	width: 6px;
	height: 4px;
	margin-top: -2px;
	background: #fff;
}
#list5 li a:hover:before {
	left: 27px;
}

:beforeで三角形を、:afterで四角形を作ります。マウスを乗せたときは三角形だけ右へ移動させて矢印が伸びるような感じにしています。

サンプル6

rist-point01.png

擬似要素で左のボーダーを付けて、マウスを乗せたときに伸びるようにします。

#list6 li a {
	padding: 0px 10px 0px 30px;
}
#list6 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 40px;
	background: #879c18;
	transition: .3s;
	z-index: -1;
}
#list6 li a:hover {
	background: #a1b91d;
}
#list6 li a:hover:before {
	width: 300px;
}

左に幅8px高さ40pxの長方形を置いて、マウスを乗せたときに長さが300px（リストの長さと同じ）に伸びます。動きをつけるためにtransitionを使っています。また、リストの文字を優先的に表示するために「z-index:-1;」を指定します。

サンプル7

rist-point01.png

マウスを乗せると真ん中に向かって色が暗くなります。

#list7 li a {
	padding: 0px 10px 0px 30px;
	background: #94aa1b;
}
#list7 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 300px;
	height: 40px;
	margin-left: -150px;
	background: #a1b91d;
	transition: .2s;
	z-index: -1;
}
#list7 li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 40px;
	background: #7b8d16;
}
#list7 li a:hover {
	background: #94aa1b;
}
#list7 li a:hover:before {
	width: 0;
	margin-left: 0;
}

初期状態で:beforeでリスト全体に表示して、マウスを乗せたときに幅が0になります。真ん中を基準にするために「left: 50%;」と「margin-left: 150px;」を指定しています。margin-leftの値はリスト全体の半分にします。

サンプル8

rist-point01.png

丸を擬似要素で表示します。マウスを乗せたときに大きくなります。

#list8 li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 25px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #d7e975;
	transition: .2s;
}
#list8 li a:hover:before {
	left: -16px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
}

大きくなった部分を表示しないように、「overflow: hidden;」が必要となります。

サンプル9

rist-point01.png

こちらも丸を擬似要素で表示します。マウスを乗せたときにリスト全体に広がります。

#list9 li a {
	background: #a1b91d;
}
#list9 li a:before {
	display: block;
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 25px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #bbd622;
	transition: .5s;
}
#list9 li a:hover:before {
	left: -271px;
	width: 600px;
	height: 600px;
	margin-top: -300px;
}

円の中心を変えないため、19行目の「left: -271px;」のように微調整しています。

サンプル10

rist-point01.png

左側が波のようになっています。

#list10 li a:before {
	display: block;
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -50px;
	width: 80px;
	height: 80px;
	margin-top: -40px;
	border-radius: 50%;
	background: #7b8d16;
}
#list10 li a:after {
	display: block;
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 25px;
	height: 40px;
	background: #7b8d16;
}
#list10 li a:hover {
	background: #94aa1b;
}
#list10 li:nth-child(2n) a:before {
	left: 19px;
	background: #a1b91d;
}
#list10 li:nth-child(2n) a:hover:before {
	background: #94aa1b;
}

奇数番目のメニューには左がはみ出る円（濃い色）を、偶数番目のメニューにはラインの右側に円（薄い色）を配置しています。

さいごに

ということで擬似要素やCSS3を使ってリストメニューを作ってみました。画像を使わなくても擬似要素を使えばCSSだけで色々作ることができます。

transitionはブラウザによっては対応していない場合もありますが、簡単に動きを表現することができるので便利です。

今回10個紹介しましたが、作ろうと思えばいくつでも作れると思いますので、今回のサンプルを参考にオリジナルのメニューを作ってもらえたらうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加