Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* アニメーションするドロップダウンメニュー [#vb25e8fc]
** 概要 [#maa86d1f]
- 黄色のヘッダにマウスを合わせると、その下にグレーのメニ...
- ヘッダからマウスを外すと、グレーのメニューはアニメーシ...
#ref(menu1.png)
↓
#ref(menu2.png)
↓
#ref(menu3.png)
** 方針 [#z7a7ecde]
- 黄色のヘッダはDTで表す。
- 対応するDDは、子要素としてグレーのメニューを持っており...
- ページロード時点でDDの高さを0にして、結果としてメニュー...
- ヘッダのonmouseoverイベントにハンドラ関数ddmenu()を設定...
- DDはCSSでoverflow:hiddenしてあるので、DDの高さの領域だ...
- ヘッダのonmouseoutイベントでは、逆にDDの高さを徐々に減...
** HTML&JavaScript [#h9199212]
<html>
<head>
<script type="text/javascript">
var SPEED = 15;
var TIMER = 100;
function ddmenu(id, action){
var header = document.getElementById(id + '-header');
var content = document.getElementById(id + '-content');
clearInterval(content.timer); // メニューの上げ下げを...
// メニューを下げる
if (action == 'down') { // すでにメニューが下が...
if (content.maxh && content.maxh <= content.offsetHe...
return
} else if (!content.maxh) { // 初回はこっちに分岐し...
content.style.display = 'block';
content.style.height = 'auto'; // C...
content.maxh = content.offsetHeight; // D...
content.style.height = '0px'; // h...
}
content.timer = setInterval( function () { slideDown...
// メニューを上げる
} else if (action == 'up') {
content.timer = setInterval( function () { slideUp(c...
}
}
// メニューを下げる
function slideDown(content){
var currh = content.offsetHeight; ...
var dist = (Math.round((content.maxh - currh) / SPEED)...
dist = (dist <= 1) ? 1 : dist; ...
content.style.height = currh + dist + 'px'; ...
if (currh > (content.maxh - 2)) { ...
clearInterval(content.timer);
}
}
// メニューを上げる
function slideUp(content){
var currh = content.offsetHeight;
var dist = (Math.round(currh / SPEED));
dist = (dist <= 1) ? 1 : dist;
content.style.height = currh - dist + 'px';
if (currh < 2) {
clearInterval(content.timer);
}
}
// <dt>からonmouseoutしてメニューを上げている最中に<dd>...
// メニューを下げ直す
function cancel(id){
var header = document.getElementById(id + '-header');
var content = document.getElementById(id + '-content');
clearTimeout(header.timer);
clearInterval(content.timer);
if (content.offsetHeight < content.maxh) {
content.timer = setInterval( function () { slideDown...
}
}
</script>
<style type="text/css">
dt, dd, ul, li {
margin: 0;
padding: 0;
width: 300px;
}
dt { /* <dt>にonmouseoverしてメニューが...
background: yellow; /* onmouseoutしてメニューが上がる ...
}
dd { /* <dd>がメニューを保持するコンテ...
display: none; /* ページを開いた時はdisplay:none...
height: 0; /* height:0pxして高さをなくす ...
overflow: hidden; /* JSでheightを動的に増加させるが...
/* <dd>のボックス内の部分しかメニ...
position: absolute; /* また、positionとz-indexを指定す...
z-index: 200; /* <dl>の下にある要素の上にメニュ...
}
ul { /* <ul>がメニュー */
}
li {
background: silver;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<dl>
<dt id="menu-header" onmouseover="ddmenu('menu','down'...
<dd id="menu-content" onmouseover="cancel('menu')" onm...
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</dd>
</dl>
</body>
</html>
** 参考 [#lc27a23e]
http://sandbox.leigeber.com/dropdown/dropdown.html
終了行:
* アニメーションするドロップダウンメニュー [#vb25e8fc]
** 概要 [#maa86d1f]
- 黄色のヘッダにマウスを合わせると、その下にグレーのメニ...
- ヘッダからマウスを外すと、グレーのメニューはアニメーシ...
#ref(menu1.png)
↓
#ref(menu2.png)
↓
#ref(menu3.png)
** 方針 [#z7a7ecde]
- 黄色のヘッダはDTで表す。
- 対応するDDは、子要素としてグレーのメニューを持っており...
- ページロード時点でDDの高さを0にして、結果としてメニュー...
- ヘッダのonmouseoverイベントにハンドラ関数ddmenu()を設定...
- DDはCSSでoverflow:hiddenしてあるので、DDの高さの領域だ...
- ヘッダのonmouseoutイベントでは、逆にDDの高さを徐々に減...
** HTML&JavaScript [#h9199212]
<html>
<head>
<script type="text/javascript">
var SPEED = 15;
var TIMER = 100;
function ddmenu(id, action){
var header = document.getElementById(id + '-header');
var content = document.getElementById(id + '-content');
clearInterval(content.timer); // メニューの上げ下げを...
// メニューを下げる
if (action == 'down') { // すでにメニューが下が...
if (content.maxh && content.maxh <= content.offsetHe...
return
} else if (!content.maxh) { // 初回はこっちに分岐し...
content.style.display = 'block';
content.style.height = 'auto'; // C...
content.maxh = content.offsetHeight; // D...
content.style.height = '0px'; // h...
}
content.timer = setInterval( function () { slideDown...
// メニューを上げる
} else if (action == 'up') {
content.timer = setInterval( function () { slideUp(c...
}
}
// メニューを下げる
function slideDown(content){
var currh = content.offsetHeight; ...
var dist = (Math.round((content.maxh - currh) / SPEED)...
dist = (dist <= 1) ? 1 : dist; ...
content.style.height = currh + dist + 'px'; ...
if (currh > (content.maxh - 2)) { ...
clearInterval(content.timer);
}
}
// メニューを上げる
function slideUp(content){
var currh = content.offsetHeight;
var dist = (Math.round(currh / SPEED));
dist = (dist <= 1) ? 1 : dist;
content.style.height = currh - dist + 'px';
if (currh < 2) {
clearInterval(content.timer);
}
}
// <dt>からonmouseoutしてメニューを上げている最中に<dd>...
// メニューを下げ直す
function cancel(id){
var header = document.getElementById(id + '-header');
var content = document.getElementById(id + '-content');
clearTimeout(header.timer);
clearInterval(content.timer);
if (content.offsetHeight < content.maxh) {
content.timer = setInterval( function () { slideDown...
}
}
</script>
<style type="text/css">
dt, dd, ul, li {
margin: 0;
padding: 0;
width: 300px;
}
dt { /* <dt>にonmouseoverしてメニューが...
background: yellow; /* onmouseoutしてメニューが上がる ...
}
dd { /* <dd>がメニューを保持するコンテ...
display: none; /* ページを開いた時はdisplay:none...
height: 0; /* height:0pxして高さをなくす ...
overflow: hidden; /* JSでheightを動的に増加させるが...
/* <dd>のボックス内の部分しかメニ...
position: absolute; /* また、positionとz-indexを指定す...
z-index: 200; /* <dl>の下にある要素の上にメニュ...
}
ul { /* <ul>がメニュー */
}
li {
background: silver;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<dl>
<dt id="menu-header" onmouseover="ddmenu('menu','down'...
<dd id="menu-content" onmouseover="cancel('menu')" onm...
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</dd>
</dl>
</body>
</html>
** 参考 [#lc27a23e]
http://sandbox.leigeber.com/dropdown/dropdown.html
ページ名:
