mootools.jsでアコーディオンメニューを設置

 スライドメニューの設置方法はこれまで色々紹介してきましたが、今回また違う方法を紹介します。今回は「mootools.js」というJavaScriptライブラリを利用します。比較的軽快に動いていると思います。

information

 「mootools」は公式サイトでダウンロードしてください。

 ⇒ http://mootools.net/

比較的簡単にできていてスタイルシートも少ないのでカスタマイズもしやすいかと思います。

body

<p class="accToggler">メニュー1</p>
	<p class="accContent">
	メニュー1の内容
	</p>
<p class="accToggler">メニュー2</p>
	<p class="accContent">
	メニュー2の内容
	</p>
<p class="accToggler">メニュー3</p>
	<p class="accContent">
         メニュー3の内容
	</p>
<p class="accToggler">メニュー4</p>
	<p class="accContent">
	メニュー4の内容
	</p>

JavaScript

<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript">
var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {
        accordionTogglers = document.getElementsByClassName('accToggler');
        
        accordionTogglers.each(function(toggler){
                //remember the original color
                toggler.origColor = toggler.getStyle('background-color');
                //set the effect
                toggler.fx = new Fx.Color(toggler, 'background-color');
        });
        
        accordionContents = document.getElementsByClassName('accContent');
                
        accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
                //when an element is opened change the background color to blue
                onActive: function(toggler){
                        toggler.fx.toColor('#6899CE');
                },
                onBackground: function(toggler){
                        //change the background color to the original (green) 
                        //color when another toggler is pressed
                        toggler.setStyle('background-color', toggler.origColor);
                }               
        });
}
</script>

CSS

<style type="text/css">
<!--
.accToggler{
        margin: 3px auto;
        padding: 3px;
        width: 480px;
        background: #acc95f;
        color: #f4f4f4;
        border: 1px solid #fff;
        cursor: pointer;
}
.accContent{
        margin: 0px auto;
        width: 480px;
}

 ※ FC2サーバは遅いときがあるので別サーバのサンプルも用意しました。
レッツFC2ブログ アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加