マーカーネット株式会社

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

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

関連記事

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

WEB制作会社というと、ホームページデザインのイメージが強いと思いますが、 マーカーネットではロゴデザインの制作も承っています。 そこで、今回はロゴデザインを作成する際、参考になるサイトについてご紹介 …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …