レスポンシブWebデザインで折りたたみメニューに切り替える

レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。

画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。

動きとしてはメディアクエリで表示、非表示等を変更、折りたたみメニューのときは「MENU ▼」をクリックしたときにjQueryでclassをつけたり削除したりしています。

にしてもスマートフォンも混沌としてきましたねぇ。ios、android、windows phone、Tizen、Firefox OS等々、OS自体の数が増え、これからスマートフォンブラウザもいろいろでてくるんでしょうねぇ。。。ふうう。。。

<div class="menubtn">MENU ▼</div>
<nav id="menu" class="togmenu">
<ul>
<li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">NEWS</a></li><li><a href="#">GALLERY</a></li><li><a href="#">BLOG</a></li><li><a href="#">CONTACT</a></li>
</ul>
</nav>

<style>
.togmenu {
    display:none;
}
.menubtn {
    padding: 16px 20px;
    background:#34C6CD;
    color: #fff;
}
#menu ul {
    margin: 0;
    padding: 0;
    background:#34C6CD;
}
#menu li {
    list-style: none;
    border-top: 2px solid #fff;
}
#menu li a {
    padding: 16px 20px;
    display:block;
    text-decoration:none;
    background:#34C6CD;
    color: #fff;
}
@media only screen and (min-width: 800px) {
    .menubtn {
        display:none;
    }
    .togmenu {
        display:block;
    }
    #menu li {
        display: inline-block;
        border:none;
    }
}
</style>

<script>
$(function(){
    $(".menubtn").click(function(){
        $("#menu").toggleClass('togmenu');
    }); 
});
</script>