マーカーネット株式会社

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フォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …