CSS3 アコーディオンメニュー

縦

カテゴリや本文の文章が長いときなどコンパクトに収納できて便利です。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

#ac a {
	display: block;
	height: 17px;
	line-height: 20px;
	font-weight: bold;
	padding: 4px;
	background-color: #FFF;
	text-decoration: none;
	color: #666;
}
#ac p {	
	padding-right: 5%;
	padding-left: 5%;
}
#ac div:hover {
	height: 300px;
	transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
#ac div:hover a {
	color: #06C;
}

#ac a {

display: block;

height: 17px;

line-height: 20px;

font-weight: bold;

padding: 4px;

background-color: #FFF;

text-decoration: none;

color: #666;

}

#ac p {

padding-right: 5%;

padding-left: 5%;

}

#ac div:hover {

height: 300px;

transition: all 1s ease;

-o-transition: all 1s ease;

-moz-transition: all 1s ease;

-webkit-transition: all 1s ease;

}

#ac div:hover a {

color: #06C;

}

横

使いどころがよくわかりませんが、とりあえず横です。

#ac2 .item2 {
	transition: all 2s ease;
	-o-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-webkit-transition: all 2s ease;
	border: 1px none #CCC;
	overflow: hidden;
	padding: 5px;
	width: 20px;
	float: left;
	height: 300px;	
}
#ac2 a {
	font-weight: bold;
	background-color: #FFF;
	text-decoration: none;
	display: block;
	text-align: center;
	height: 300px;
	width: 20px;
	float: left;
	margin-right: 5%;
	margin-left: 0px;
	padding-top: 5px;
	color: #666;
}
#ac2 p {
	padding: 2%;
	margin: 0px;
}
#ac2 div:hover {
	width: 300px;
	transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
#ac2 div:hover a {
	color: #06C;
}

#ac2 .item2 {

transition: all 2s ease;

-o-transition: all 2s ease;

-moz-transition: all 2s ease;

-webkit-transition: all 2s ease;

border: 1px none #CCC;

overflow: hidden;

padding: 5px;

width: 20px;

float: left;

height: 300px;

}

#ac2 a {

font-weight: bold;

background-color: #FFF;

text-decoration: none;

display: block;

text-align: center;

height: 300px;

width: 20px;

float: left;

margin-right: 5%;

margin-left: 0px;

padding-top: 5px;

color: #666;

}

#ac2 p {

padding: 2%;

margin: 0px;

}

#ac2 div:hover {

width: 300px;

transition: all 1s ease;

-o-transition: all 1s ease;

-moz-transition: all 1s ease;

-webkit-transition: all 1s ease;

}

#ac2 div:hover a {

color: #06C;

}

タグ: アコーディオン, メニュー
カテゴリー: CSS

コメントを残すコメントをキャンセル

CSS3のみで画面外からメニューをスライド表示

表示領域内に文字を省略し…を表示

CSS3　拡大、縮小、スライド、回転

JavaScriptで画面外からメニューをスライド表示

高機能でオシャレな実用的メニュー（HTMLテンプレート）

CSS3　ボックスシャドウ

CSS3 アコーディオンメニュー

縦

横

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル