関連項目⇒
ソースが大変長く感じるかもしれませんが、メニュー項目を大変多く設定しています。必要に応じて減らしてお使い下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>クールメニュー２</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{
font-size:12;
font-family:Arial;
}
.oDiv{
width:150;border:1 solid #ffc11e;
position:absolute;left:-1;background-color : #fad683;
text-align:center;font-size:12;
}
.td_M{
border:2 outset #ffffff;
height:25;padding:5;
color : #666666;background-color:#ffc11e;cursor:hand;
}
.gTd{
border:2 groove lemon;
height:25;padding:3;
}
A{
color : #666666;
text-decoration:none;
font-family:"MS UI Gothic";
}
A:HOVER{
color : black;
}
-->
</STYLE>
<script language="javascript">
function tbl1(){t1.from="-105";t1.to = "60"; tbl2();}
function tbl2(){t2.from="-80";t2.to = "85"; tbl3();}
function tbl3(){t3.from="-55";t3.to = "110"; tbl4();}
function tbl4(){t4.from="-30";t4.to = "135"; tbl5();}
function tbl5(){t5.from="-5"; t5.to = "160"; tbl6();}
function tbl6(){t6.from="20"; t6.to = "185";}
function tbla(){t1.from="60"; t1.to = "-105"; tblb();}
function tblb(){t2.from="85"; t2.to = "-80"; tblc();}
function tblc(){t3.from="115";t3.to = "-55"; tbld();}
function tbld(){t4.from="135";t4.to = "-30"; tble();}
function tble(){t5.from="160";t5.to = "-5"; tblf();}
function tblf(){t6.from="185";t6.to = "20";}
</script>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY bgcolor="#ffc11e">
<DIV class="oDiv" style="top:-3;z-index:8;">
<DIV id="tbl0" style="position:relative;top:2;height:48;z-index:8;" class="td_M"></DIV>
<DIV class="td_M">
<div id=td1a onclick="tbl1()" class="time" begin="0;td1b.click;dummy2.begin" end="td1a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td1b onclick="tbla()" class="time" begin="td1a.click" end="td1b.click" timeaction="display">CLOSE</div>
<div id=td1c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV></DIV>
<DIV id="tbl1" class="oDiv" style="top:-105;z-index:6;">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td2a onclick="tbl1()" class="time" begin="0;td2b.click;dummy2.end" end="td2a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td2b onclick="tblb()" class="time" begin="td2a.click" end="td2b.click" timeaction="display">CLOSE</div>
<div id=td2c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl2" class="oDiv" style="top:-80;z-index:5;">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td3a onclick="tbl3()" class="time" begin="0;td3b.click;dummy2.end" end="td3a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td3b onclick="tblc()" class="time" begin="td3a.click" end="td3b.click" timeaction="display">CLOSE</div>
<div id=td3c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl3" style="top:-55;z-index:4;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td4a onclick="tbl4()" class="time" begin="0;td4b.click;dummy2.end" end="td4a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td4b onclick="tbld()" class="time" begin="td4a.click" end="td4b.click" timeaction="display">CLOSE</div>
<div id=td4c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl4" style="top:-30;z-index:3;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td5a onclick="tbl5()" class="time" begin="0;td5b.click;dummy2.end" end="td5a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td5b onclick="tble()" class="time" begin="td5a.click" end="td5b.click" timeaction="display">CLOSE</div>
<div id=td5c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl5" style="top:-5;z-index:2;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td6a onclick="tbl6()" class="time" begin="0;td6b.click;dummy2.end" end="td6a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td6b onclick="tblf()" class="time" begin="td6a.click" end="td6b.click" timeaction="display">CLOSE</div>
<div id=td6c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl6" style="top:20;z-index:1;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M"></DIV>
</DIV>
<div id="dummy" class="time" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td6a.click;" dur=".1" timeaction="display"></div>
<div id="dummy2" class="time" begin="td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;td6b.click;" dur=".1" timeaction="display"></div>
<t:animate id="t1" targetElement="tbl1" attributeName="top" from="" to="" begin="td1a.click;td1b.click;" dur=".7" fill="hold" />
<t:animate id="t2" targetElement="tbl2" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td1b.click;td2b.click;" dur="1" fill="hold" />
<t:animate id="t3" targetElement="tbl3" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td1b.click;td2b.click;td3b.click;" dur="1.3" fill="hold" />
<t:animate id="t4" targetElement="tbl4" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td1b.click;td2b.click;td3b.click;td4b.click;" dur="1.6" fill="hold" />
<t:animate id="t5" targetElement="tbl5" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;" dur="1.9" fill="hold" />
<t:animate id="t6" targetElement="tbl6" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td6a.click;td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;td6b.click" dur="2.2" fill="hold" />
</BODY>
</HTML>
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>クールメニュー２</TITLE>
<STYLE type="text/css">
<!--
/*★★★ JavaScriptはもういらない!? ★★★★★★
★ HTML+TIME by〜〜(m--)m ura@ad.il24.net ★
★ URL http://html-time.com */
.time{behavior: url(#default#time2);}
/*★★★★★★★★★★★★★★★★★★★★★★*/
BODY{
font-size:12;
font-family:Arial;
}
.oDiv{
width:150;border:1 solid #ffc11e;
position:absolute;left:-1;background-color : #fad683;
text-align:center;font-size:12;
}
.td_M{
border:2 outset #ffffff;
height:25;padding:5;
color : #666666;background-color:#ffc11e;cursor:hand;
}
.gTd{
border:2 groove lemon;
height:25;padding:3;
}
A{
color : #666666;
text-decoration:none;
font-family:"MS UI Gothic";
}
A:HOVER{
color : black;
}
-->
</STYLE>
<script language="javascript">
function tbl1(){t1.from="-105";t1.to = "60"; tbl2();}
function tbl2(){t2.from="-80";t2.to = "85"; tbl3();}
function tbl3(){t3.from="-55";t3.to = "110"; tbl4();}
function tbl4(){t4.from="-30";t4.to = "135"; tbl5();}
function tbl5(){t5.from="-5"; t5.to = "160"; tbl6();}
function tbl6(){t6.from="20"; t6.to = "185";}
function tbla(){t1.from="60"; t1.to = "-105"; tblb();}
function tblb(){t2.from="85"; t2.to = "-80"; tblc();}
function tblc(){t3.from="115";t3.to = "-55"; tbld();}
function tbld(){t4.from="135";t4.to = "-30"; tble();}
function tble(){t5.from="160";t5.to = "-5"; tblf();}
function tblf(){t6.from="185";t6.to = "20";}
</script>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY bgcolor="#ffc11e">
<DIV class="oDiv" style="top:-3;z-index:8;">
<DIV id="tbl0" style="position:relative;top:2;height:48;z-index:8;" class="td_M"></DIV>
<DIV class="td_M">
<div id=td1a onclick="tbl1()" class="time" begin="0;td1b.click;dummy2.begin" end="td1a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td1b onclick="tbla()" class="time" begin="td1a.click" end="td1b.click" timeaction="display">CLOSE</div>
<div id=td1c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV></DIV>
<DIV id="tbl1" class="oDiv" style="top:-105;z-index:6;">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td2a onclick="tbl1()" class="time" begin="0;td2b.click;dummy2.end" end="td2a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td2b onclick="tblb()" class="time" begin="td2a.click" end="td2b.click" timeaction="display">CLOSE</div>
<div id=td2c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl2" class="oDiv" style="top:-80;z-index:5;">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td3a onclick="tbl3()" class="time" begin="0;td3b.click;dummy2.end" end="td3a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td3b onclick="tblc()" class="time" begin="td3a.click" end="td3b.click" timeaction="display">CLOSE</div>
<div id=td3c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl3" style="top:-55;z-index:4;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td4a onclick="tbl4()" class="time" begin="0;td4b.click;dummy2.end" end="td4a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td4b onclick="tbld()" class="time" begin="td4a.click" end="td4b.click" timeaction="display">CLOSE</div>
<div id=td4c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl4" style="top:-30;z-index:3;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td5a onclick="tbl5()" class="time" begin="0;td5b.click;dummy2.end" end="td5a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td5b onclick="tble()" class="time" begin="td5a.click" end="td5b.click" timeaction="display">CLOSE</div>
<div id=td5c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl5" style="top:-5;z-index:2;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M">
<div id=td6a onclick="tbl6()" class="time" begin="0;td6b.click;dummy2.end" end="td6a.click;dummy.begin" timeaction="display">MENU</div>
<div id=td6b onclick="tblf()" class="time" begin="td6a.click" end="td6b.click" timeaction="display">CLOSE</div>
<div id=td6c class="time" begin="dummy.begin" end="dummy2.end" timeaction="display">LOCK</div>
</DIV>
</DIV>
<DIV id="tbl6" style="top:20;z-index:1;" class="oDiv">
<DIV class="gTd"></DIV>
<DIV class="gTd"><A href="#">コンテンツ６ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ５ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ４ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ３ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ２ ⇒</A></DIV>
<DIV class="gTd"><A href="#">コンテンツ１ ⇒</A></DIV>
<DIV class="td_M"></DIV>
</DIV>
<div id="dummy" class="time" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td6a.click;" dur=".1" timeaction="display"></div>
<div id="dummy2" class="time" begin="td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;td6b.click;" dur=".1" timeaction="display"></div>
<t:animate id="t1" targetElement="tbl1" attributeName="top" from="" to="" begin="td1a.click;td1b.click;" dur=".7" fill="hold" />
<t:animate id="t2" targetElement="tbl2" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td1b.click;td2b.click;" dur="1" fill="hold" />
<t:animate id="t3" targetElement="tbl3" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td1b.click;td2b.click;td3b.click;" dur="1.3" fill="hold" />
<t:animate id="t4" targetElement="tbl4" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td1b.click;td2b.click;td3b.click;td4b.click;" dur="1.6" fill="hold" />
<t:animate id="t5" targetElement="tbl5" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;" dur="1.9" fill="hold" />
<t:animate id="t6" targetElement="tbl6" attributeName="top" from="" to="" begin="td1a.click;td2a.click;td3a.click;td4a.click;td5a.click;td6a.click;td1b.click;td2b.click;td3b.click;td4b.click;td5b.click;td6b.click" dur="2.2" fill="hold" />
</BODY>
</HTML>