ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【javascript・css3】jsで作るtoggleメニュー


目標

  1. Timer処理でのスライドイン・アウト表現
  2. javascriptでcss3のアニメーションを動かす

反省、改善点

  • コードの簡略化
  • heightを自動で取得できるようにする。
  • css3でもう少し簡単にかけるかもしれない。

コード

html

<div>
<p id="nav_btn">
<span id="mark">
<span></span>
<span></span>
</span>
</p>
<ul id="toggle_menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">EVENT</a></li>
</ul>
</div>

css

ul,li,p{
    margin:0;
    padding:0;
}
div{
    width:300px;
    margin:0 auto; 
}
#mark{
    display:inline-block;
    width:30px;
    height:30px;
    margin:10px auto 0;
    position:relative;
    transition:all 0.1s linear;
}
#mark span{
    position:absolute;
    top:15px;
    left:0;
    right:0;
    display:block;
    width:20px;
    height:3px;
    margin:auto;
    background:#777;
}
#mark.rotate{
    transform:rotate(90deg);
}
#mark span:last-child{
    transform:rotate(90deg);
    transition:all 0.1s linear;
}
#mark.rotate span:first-child{
    opacity:0;
}
#toggle_menu{
    height:0px;
    display:none;
    list-style:none;
    overflow:hidden;
}
li,p{
    height:50px;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    background:#eee;
}
a{
    display:block;
    color:#888;
    text-decoration:none;
    background:#eee;
}
a:hover{
    color:#fff;
    background:#777;
}

javascript

var nav_btn = document.getElementById('nav_btn');
var mark = document.getElementById('mark');
var toggle_menu = document.getElementById('toggle_menu');
var nav_flag = true;
var s_height = 0;
toggle_menu.style.height = 0;
nav_btn.addEventListener('click',function(){nav_click()},false);
function nav_click(){
    if (nav_flag == true){
        mark.classList.add('rotate');
        toggle_menu.style.display = 'block';
        slide_in();
        console.log(nav_flag);
    }else if(nav_flag == false){
        mark.classList.remove('rotate');
        i = 0;
        slide_out();
    }
}

function slide_in(){
    if(s_height <= 200){
        console.log(s_height);
        s_height += 10;
        toggle_menu.style.height = s_height + 'px'; 
        var slide_id = setTimeout(slide_in,10);
    }else{
        clearTimeout(slide_id);
        nav_flag = false;
    }
}

function slide_out(){
    if(s_height > 0){
        console.log(s_height);
        s_height -= 10;
        toggle_menu.style.height = s_height + 'px'; 
        var slide_id = setTimeout(slide_out,10);
    }else{
        console.log(slide_id);
        toggle_menu.style.display = 'none';
        nav_flag = true;
    }
}