マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

jQueryを使ってみよう【開閉式メニューを作る編】

投稿日:2015年4月15日 更新日:

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、
今からjQueryを使ってみようと思っている方必見。
jQueryの便利な使い方をご紹介します。

jQueryを使ってみよう【導入編】でjQueryを使う為の準備は整ったので
今回からはjQueryの具体的な記述方法をご紹介します。

開閉式メニューを作ってみよう

開閉式メニュー(アコーディオンメニュー)は見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことです。
ユーザー自身がコンテンツをコントロールできる為、スマートフォン等表示領域が限られているデバイスでよく使われているのを見かけますね。

HTMLソース

<nav id="nav">
<h4>WEB制作</h4>
<ul>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/android/">android</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/">CMS</a>
<ul class="child">
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/movale-type/">Movale Type</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/wordpress/">WordPress</a></li>
</ul>
</li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/css/">CSS</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/facebook/">facebook</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/iphone/">iPhone</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/javascript%ef%bc%88jquery%ef%bc%89/">javascript(jquery)</a></li>
</ul>
</nav>

Javascriptソース

<script>
$(document).ready(function(){
$('#nav > h4').click(function(){
$(this).next().slideToggle('slow');
});
});
</script>

slideToggleの引数には開閉する速度を指定します。
“slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。
例えば”1500″であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。

サンプル

少しメニューっぽくCSSで装飾すれば開閉式メニューの完成です。

-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでに …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

WEBデザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …