マーカーネット株式会社

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

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

関連記事

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ① こちらでとっても簡単なアコーディオンを作成しましたが、これでは自分のデザインに活用できなかった・・・ そんな時はhtml5の新属性、独自データ属性 …

手作り感溢れる癒しのWEBデザイン

手作り感溢れる癒しのWEBデザイン

フラットデザインやシンプル系、クール系のデザインとは違った手作り感溢れるデザインは気持ちが伝わりほっこりさせてくれます。 トレンドのデザインは進んでゆきますが、手作り系のデザインは今も昔もずっと残って …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …

ごろごろしながらウェブネタ探し

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 普段、皆さんはデザインを作るとき、どこからデザインのネタを探しているんですか? 私は場合は、そう …