JavaScriptで作るダイナミックなタグメニュー

information

JavaScript

body

CSS

　JavaScriptで作るダイナミックなタグメニューの設置方法を説明します。まるでFlashで作ったかのような滑らかな動きをしてくれます。JavaScriptはaccordian.pack.jsというライブラリを利用しますのでJavaScriptのタグよりダウンロードしてください。タグの数や幅などはCSSで簡単に変更できますのでCSSのページを参考にしてみてください。

　JavaScriptはaccordian.pack.jsというライブラリを利用します。ダウンロードし各自サーバにアップしてお使いください。

　⇒　accordian.pack.js

<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div id="basic-accordian">

<div class="tab_container">
  <div id="test1-header" class="accordion_headings header_highlight" >menu1</div>
  <div id="test2-header" class="accordion_headings" >menu2</div>
  <div id="test3-header" class="accordion_headings" >menu3</div>
  <div id="test4-header" class="accordion_headings" >menu4</div>
</div>

<div style="float:left;">
  <div id="test1-content">
	<div class="accordion_child">
    	menu1の内容をここに記入
    </div>
  </div>
  
  <div id="test2-content">
	<div class="accordion_child">
    	menu2
    </div>
  </div>
  
  <div id="test3-content">
	<div class="accordion_child">
    	menu3
    </div>
  </div>
  
  <div id="test4-content">
	<div class="accordion_child">
    	menu4
    </div>
  </div>
</div>
</div>
</body>