←戻る

jQueryでアコーディオンメニューを作る

デモ/サンプル

HTML


JavaScript

JavaScriptファイルは「js」フォルダに格納されている設定なので自分のフォルダに合わせて下さい。




CSS

ul{
	list-style: none;
}

ul#accordionmenu{
	width: 300px;
	margin:50px 100px;
}

#accordionmenu a{
	text-decoration: none;
	color: #fff;
	display: block;
}

#accordionmenu a:hover{
	background-color: #7B7B7B;
	border-top: 1px solid #5F5F5F;
	border-bottom: 1px solid #7B7B7B;
}

#accordionmenu ul{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#accordionmenu li{
	background-color: #848484;
}

#accordionmenu li a{
	padding: 5px;
	border-left: 1px solid #9A9A9A;
	border-top: 1px solid #9A9A9A;
	border-right: 1px solid #696969;
	border-bottom: 1px solid #757575;
}

#accordionmenu li li a {
    border-top: 1px solid #696969;
    border-left: 1px solid #696969;
    border-right: 1px solid #8A8A8A;
    border-bottom: 1px solid #7B7B7B;
    background-color: #757575;
    padding: 5px 10px 5px 15px;
}

#accordionmenu .closed{
	background-image: url(images/ha-down.gif);
}

#accordionmenu .closed, #accordionmenu .opened {
            background-position:98% center;
            background-repeat: no-repeat;
        }

#accordionmenu .opened{
	background-image: url(images/ha-up.gif);
}

←戻る

ホームページ制作 埼玉WEB制作事務所-クローバーインターナショナル