クリックしてサイドメニューその時滑らかに。

質問

javascriptで、

A
B
C
というメニューを作って、クリックすると

A
a1
a2a3
B
C
というものを作成しています。
このとき、Aが開かれるとき滑らかな動作をさせたいです。
よろしくお願いします。

回答No.2

yambejp · ベストアンサー

ちょっと書いてみました。
とりあえず動けばいいやというのであれば、こんなんで十分かな
実際にメニューを作るときは加速度をつけたり、見せ始める位置を調整
したりとかイロイロあるんですが、今回は単純にある一定秒数で、
定量で分割して表示しています。

//hoge.htm
<link rel="stylesheet" href="hoge.css">
<script src="hoge.js"></script>
<ul id="menu">
<li><div><a href="#">A</a></div>
<ul>
<li><a href="a1.htm">a1</a></li>
<li><a href="a2.htm">a2</a></li>
<li><a href="a3.htm">a3</a></li>
</ul>
</li>
<li><div><a href="#">B</a></div>
<ul>
<li><a href="b1.htm">b1</a></li>
</ul>
</li>
<li><div><a href="#">C</a></div>
<ul>
<li><a href="c1.htm">c1</a></li>
<li><a href="c2.htm">c2</a></li>
<li><a href="c3.htm">c3</a></li>
<li><a href="c4.htm">c4</a></li>
<li><a href="c5.htm">c5</a></li>
<li><a href="c6.htm">c6</a></li>
<li><a href="c7.htm">c7</a></li>
<li><a href="c8.htm">c8</a></li>
<li><a href="c9.htm">c9</a></li>
<li><a href="c10.htm">c10</a></li>
</ul>
</li>
</ul>
<div id="debug">test</div>

//hoge.css
#menu ul{
display:none;
overflow:hidden;
}
#menu,#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu a{
width:200px;
height:1em;
display:block;
text-decoration:none;
background-Color:#ff8080;
}
#menu a:hover{
background-Color:#c08080;
}
#menu ul a{
background-Color:#80ff80;
}
#menu ul a:hover{
background-Color:#80c080;
}

//hoge.js
window.onload=function(){
gObj=new Object();
var menu=document.getElementById("menu");
var c=menu.firstChild;
while(c){
if(c.nodeName=="LI"){
var cc=c.firstChild;
while(cc){
if(cc.nodeName=="DIV") var div=cc;
if(cc.nodeName=="UL") var ul=cc;
cc=cc.nextSibling;
}
div.submenu=ul;
div.onclick=submenuView;
}
c=c.nextSibling;
}
}
function submenuView(){
var s=0.3; //スピード 0以上
var c=10; //滑らかさ(分割数)
gObj=this.submenu;

if(gObj.style.display!="block"){
gObj.style.display="block";
gObj.fullHeight=gObj.offsetHeight;
gObj.style.height="1px";
gObj.height=gObj.fullHeight / c;

for(var i=1;i<=c;i++){
setTimeout("changeHeight("+i+")",1000*s/c*i);
}
return false;
}else{
gObj.fullHeight=gObj.offsetHeight;
gObj.height=gObj.fullHeight / c;
for(var i=c;i>=0;i--){
setTimeout("changeHeight("+i+")",1000*s/c*(c-i));
}
return false;
}
}

function changeHeight(num){
var h=parseFloat(gObj.height) * parseInt(num);
if(h>=gObj.fullHeight) h=gObj.fullHeight;
if(h<=0){
h=gObj.fullHeight;
gObj.style.display="none";
}
gObj.style.height=h;
document.getElementById("debug").innerHTML=h
}

お礼

わざわざ親切にすみません。
自分なりに試してみますね。ポイント付与しておきます。

回答No.1

auty

・　animatedcollapse.js
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

や

・　scriptaculous.js
http://script.aculo.us/

を検索してみてください。役に立つサンプルが載っています。

補足

ありがとうございます。
しかし、日本語しかよめませんでした。