CSSから解説Jqueryでアコーディオンメニューを追加する

シェアする

スポンサーリンク

既存のサイドメニューをアコーディオン付のメニューに変更する

プラグインの設置で「簡単!」「たった3行で!」のうたい文句にひかれてコピペするものの、なんだかうまくいかないこと、ありませんか?多くのプラグインでCSSが必要なものは自分のサイトで使うときはちょっと注意が必要です。今回はサイドメニューを作ったあとにアコーディオンを設置するという設定でCSSから解説していきます。

準備ーJquery本体ファイルを用意する

jquery本体ファイルを用意しましょう。CDNを使います。

<script src=“//code.jquery.com/jquery-1.11.3.min.js”></script>

Jqueryのプラグインを使うための基本のキ
Jqueryをサイトに実装するための手順 サイトを作るとどうしてもいろんな動きをつけたくなります。 そこでやっぱりJqueryの出番とな...

既存のサイドメニューを確認する

firstshot既存のサイドメニューはこんな感じ。
font-awesomeでアイコンフォントを入れています。

一応HTMLの記述は以下に。
このサイドメニューの「Jqueryの実装」と「CSSフレームワーク」の項目にサブメニューを追加していく、という想定です。
サイドメニューのhtml(nav要素を使用しています)

<nav class="side">
<ul>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>ネットワーク入門</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>HTML5とCSS3</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>Jqueryの実装</a>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>WordPress入門</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>CSSフレームワーク</a>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>アクセス解析</a></li>
 </ul>
</nav>

初期のCSSファイル

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;}
ul{	margin:0;
	padding:0;
	list-style:none;}
.side {	width: 220px;}
.side li {cursor:pointer;
	line-height:2;
	background-color:#D9D9D9;}
.side li a{display:block;
	color:#333;
	padding-left:15px;
	text-decoration:none;}
.side li a:hover{background-color:#666;
	color:#fff;
	font-weight:bold;}

おそらくulのデフォルトのスタイルはリセットしてあるだろうという予想で、margin、paddingは0に、リストマークは表示しないようにしています。

liのスタイルにcursor:pointerと記述しておくと、アコーディオンの親メニューにもマウスオーバーしたときにpointer(手)が表示されます。

サイドメニューという前提なので幅は220pxに。<li>に行間(line-height)2、背景色。リンクのスタイルはマウスオーバーのスタイルも書いてあります。ちなみにline-heightは単位をつけないで使うのがよいですよ。

サブメニューを追加して必要な記述を加える

secondshotリストの入れ子にしてサブメニューを追加します。
すべてli要素なので、すべて同じスタイルで表示されます。

動きに必要な記述を加えていきます。
親のリストにclass=”accordion”を、子のリストにclass=”content”をそれぞれのulに入れていきます。

親メニューのリストに<a class=”toggle”>をつけます。

入れ子のリスト(liの中にulを入れる)

<nav class="side">
<ul class="accordion">
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>ネットワーク入門</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>HTML5とCSS3</a></li>
<li><a class="toggle"><i class="fa fa-chevron-circle-right fa-fw"></i>Jqueryの実装</a>
<ul class="content">
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>モーダルウィンドウ</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>スライダー</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>WordPress入門</a></li>
<li><a class="toggle"><i class="fa fa-chevron-circle-right fa-fw"></i>CSSフレームワーク</a>
<ul class="content">
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>Bootstrap</a></li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>Foundation</a></li>
</ul>
  </li>
<li><a href="#"><i class="fa fa-chevron-circle-right fa-fw"></i>アクセス解析</a></li>
</ul>
</nav>

jqueryの実行コードを設置します。の上でOK。

<script>
$(function(){
	$('.accordion').on('click', 'li', function(){
		var $this = $(this);
		//コンテンツを開く
		$this
		.toggleClass('expanded')
		.children('.content')
		.slideToggle('fast');
		
	});
});</script>

これだけでもアコーディオンの動きはしますが、最初からメニューが開いたままです。
そこで、CSSを書き加えます。最初はcontentのスタイル指定してあるリストをdisplay:noneで閉じた状態にします。

.accordion > li .content{
	display:none;}

最後の子メニューに少しインデントを加えたCSSを追加します。
子メニューがあるリストの右側に矢印を表示させます。(:afterを使いましたが、背景画像とかでもいいと思います)

.accordion > li.expanded .content {
	padding:0;
	border-top: solid 1px #fff;
}
.accordion > li.expanded .content a {
	padding-left:30px;}
.accordion li a.toggle:after{content:"↓";}

acd_last出来上がり!

うまくいきましたか?
デモページ(都合上CSSは内部CSSで記述してあります)

スポンサーリンク

シェアする

フォローする