CSSだけで作成したメニューのデザインサンプル

TOP > サンプル >  CSSだけで作成したメニューのサンプル
このエントリーをはてなブックマークに追加

見栄えのいい横メニューの作成過程

基本的なメニュー

サンプルソースを表示 

ul.menu1 {
	background-color:#000;
	height:40px;
}
ul.menu1 li {
	background-color:#000;
	float:left;
	padding: 8px 0px;
}
ul.menu1 li a {
	color:white;
	text-decoration:none;
	padding: 10px ;
}
ul.menu1 li a:hover {
	font-weight:bold;
	text-decoration:underline;
	color:blue;
}

<ul class="menu1">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

+区切り線+影

サンプルソースを表示 

ul.menu2 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu2 li {
	background-color:#000;
	float:left;
	border-left:1px solid #666;
	padding: 10px 0px;
}
ul.menu2 li:first-child {
	border-left:none;
}
ul.menu2 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu2 li a:hover {
	text-shadow: 1px 1px 3px #fff;
	font-weight:bold;
	text-decoration:none;
	background-color:#666;
}

<ul class="menu2">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

+角丸

サンプルソースを表示 

.rad1 {
	border-radius: 10px;
}
ul.menu2 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu2 li {
	background-color:#000;
	float:left;
	border-left:1px solid #666;
	padding: 10px 0px;
}
ul.menu2 li:first-child {
	border-left:none;
}
ul.menu2 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu2 li a:hover {
	text-shadow: 1px 1px 3px #fff;
	font-weight:bold;
	text-decoration:none;
	background-color:#666;
}

<ul class="menu2 rad1">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

+グラデーション

サンプルソースを表示 

.grad3 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666), color-stop(1.00, #111));
	background: -webkit-linear-gradient(#666, #111);
	background: -moz-linear-gradient(#666, #111);
	background: -o-linear-gradient(#666, #111);
	background: -ms-linear-gradient(#666, #111);
	background: linear-gradient(#666, #111);
}
.rad1 {
	border-radius: 10px;
}
ul.menu3 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu3 li {
	float:left;
	border-left:1px solid #666;
	padding: 10px 0px;
}
ul.menu3 li:first-child
{
	border-left:none;
}
ul.menu3 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu3 li a:hover {
	text-shadow: 1px 1px 3px #fff;
	font-weight:bold;
	text-decoration:none;
	background-color:#666;
}

<ul class="menu3 rad1 grad3">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

サンプルソースを表示 

.grad2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
	background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
	border-radius: 10px;
}
ul.menu3 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu3 li {
	float:left;
	border-left:1px solid #666;
	padding: 10px 0px;
}
ul.menu3 li:first-child
{
	border-left:none;
}
ul.menu3 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu3 li a:hover {
	text-shadow: 1px 1px 3px #fff;
	font-weight:bold;
	text-decoration:none;
	background-color:#666;
}

<ul class="menu3 rad1 grad2">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

+選択時にへこみ

サンプルソースを表示 

.grad2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
	background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
	border-radius: 10px;
}
ul.menu4 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu4 li {
	float:left;
	border-left:1px solid #111;
	padding: 10px 0px;
}
ul.menu4 li:last-child
{
	border-right:1px solid #111;
}
ul.menu4 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu4 li a:hover {
	background: rgba(0,0,0,0.3);
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
}

<ul class="menu4 rad1 grad2">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>

サンプルソースを表示 

.grad2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
	background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}
.rad1 {
	border-radius: 10px;
}
ul.menu5 {
	background-color:#000;
	box-shadow: 0px 3px 5px #666;
	height:40px;
}
ul.menu5 li {
	float:left;
	padding: 10px 0px;
}

ul.menu5 li a {
	color:white;
	text-decoration:none;
	padding: 8px 10px;
}
ul.menu5 li a:hover {
	background: rgba(0,0,0,0.3);
	box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
	border-radius:10px;
}

<ul class="menu5 rad1 grad2">
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>