CDP用メニューCSS

CSS

rowList_007のスタイルシート

@charset "Shift_JIS;
@media screen{

/*アイコンはIE8以上で有効です */

#MENU ul
{
	margin: 0;
	padding: 0;
}

#MENU01,
#MENU02,
#MENU03,
#MENU04
{
	display: block;
	margin: 0 0 0.4em;
	padding: 0 0 0 30px;
	border: 0;
	background: transparent none;
}

#MENU01:hover,
#MENU02:hover,
#MENU03:hover,
#MENU04:hover
{
	/* リストに触れたときのアイコン */
	background: url("img/rowList_007_2.png") no-repeat 0 50%;
}

#MENU01 a:link,
#MENU02 a:link,
#MENU03 a:link,
#MENU04 a:link
{
	/* メニューリンク */
	display: block;
	margin: 0;
	padding: 0.5em;
	border: solid #000000;
	border-width: 1px 1px 1px 5px;
	background transparent none;
	color: #000000;
	text-decoration: none;
	zoom: 1; /* IEバグ */
}

#MENU01 a:visited,
#MENU02 a:visited,
#MENU03 a:visited,
#MENU04 a:visited
{
	/* 訪問済みリンク */
	border-color: #555555;
	color: #000000;
}

#MENU01 a:hover, #MENU01 a:focus,
#MENU02 a:hover, #MENU02 a:focus,
#MENU03 a:hover, #MENU03 a:focus,
#MENU04 a:hover, #MENU04 a:focus
{
	/* オンマウス時とフォーカス時のリンク */
	border-color: #000000;
	color: red;
}

#MENU li.menu-on
{
	/* 該当ページリストのアイコン */
	background: url("img/rowList_007_1.png") no-repeat 0 50%;
}

#MENU li.menu-on a
{
	/*該当ページリンク */
	border-color: #000000;
	color: #000000;
}
}

使用画像（わかりやすいよう、実際の画像とサイズや色味が異なって表示されている場合があります）

： rowList_007_1.png
： rowList_007_2.png

使いかた

テキストエリア内のスタイルシートをコピーする（JavaScript有効下では、テキストエリア内クリックか、ラベル（テキストエリア上部のrowList_007のスタイルシート）をクリックする等テキストエリアをフォーカス状態にすると内容が「すべて選択」された状態になる）
テキスト編集ソフトを開いてコピーした内容をはりつけ、style.cssとして保存
style.cssを上書き保存する

CSS着せ替えテンプレート企画 > ベースCSS > rowList_007

CDP用メニューCSS

実サンプル

CSS

使いかた