[css] CSSだけで奇麗なナビゲーションボックスを作る

CSSだけでも割と奇麗につくれます。

ダウンロード:navi_box.zip

CSS

a {color:#666;text-decoration:none;}
a:hover {color:#666;text-decoration:underline;}

 .side_list{
	margin: 0 0 8px;
	padding: 0 0 10px;
	border: 1px solid #92B724;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 248px;
	background: #FDFDFD;
	}

.side_list h3{
	width: 232px;
	color: #FFF;
	text-shadow: 1px 1px 0px #336600;
	display: block;
	margin: 0 0 10px 0;
	padding: 6px 6px 6px 10px;
	font-size: 14px;
	
	border-top: 1px solid #D3E894;
	
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-radius-topleft: 4px;	/* Firefox */
	border-radius-topright: 4px;	/* Firefox */
	
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;	/* Firefox */
	-moz-border-radius-topright: 4px;	/* Firefox */
	
	background: #9ABE2C; /* old browsers */
	background: -moz-linear-gradient(top, #B3D748 0%, #7B9F09 100%, #ededed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B3D748), color-stop(100%,#7B9F09), color-stop(100%,#ededed)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B3D748', endColorstr='#7B9F09',GradientType=0 ); /* ie */
	}

	* html .side_list h3{width: 204px;border:1px solid #993300;}
	
	.side_list li{
	border-bottom: 1px dotted #CCC;
	margin: 0 5px;
	padding: 5px;
	}
	
	.side_list ol,ul {list-style-type: none;}
	.side_list li ul li{
	background: url(../img/arrow.jpg) 0px 6px no-repeat;
	border: none;
	margin: 0;
	padding: 0 0 0 15px;
	}
	
	ul li ul{ padding: 0px 4px;}
	
	ul {
	margin: 0;
	padding: 0;
	}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./css/style.css" />
<title>test</title>

<body>

<ul>
<li class="side_list">

	<h3>カテゴリ</h3>
	
		<ul>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a>
			<ul>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			</ul>
		</li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
			<ul>
			<li><a href="####" title="小カテゴリ">小カテゴリ</a></li>
			</ul>
		</li>
		<li><a href="####" title="大カテゴリ">大カテゴリ</a></li>
		</ul>

</li>
</ul>

</body>
</html>

Similar posts