≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなし

スマホといえば、3本線のハンバーガーメニューが使用されるようになっていますが、そのユーザビリティについては様々な調査から見直しが求められています。
スマホでよく使われるハンバーガーメニュー≡のABテスト結果とは? | Skan
今回紹介するParadeiserを利用するとJavaScriptなしのCSSのみで上部固定のメニューを簡単に導入可能です。
≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなしサンプル

使用方法 Paradeiserからファイル一式をダウンロード。
CSSを読み込みます。
<link rel="stylesheet" href="paradeiser.css">
メニューを下記のように記述します。
<!-- 各メニュー -->
<nav class="paradeiser">
<a href="#">
<img src="logo.png" alt="Logo" class="paradeiser_logo">
</a>
<a href="#">
<span>Home</span>
</a>
<!-- ドロップダウンメニュー -->
<div class="paradeiser_dropdown">
<a href="#paradeiser-more" id="paradeiser-dropdown">
<span>More</span>
</a>
<!-- 出てくるメニュー -->
<ul class="paradeiser_children" id="paradeiser-more">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>

上記でメニューは完成です。
またスクロール時にメニューを隠すには下記の記述を</body>直上に加えます。
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script> <script>
document.getElementById("paradeiser-dropdown").addEventListener("click", function(event){
event.preventDefault();
document.getElementById("paradeiser-more").classList.toggle("open");
});
document.getElementById("greybox").addEventListener("click", function(event){ event.preventDefault();
document.getElementById("paradeiser-more").classList.remove("open");
});

var myElement = document.querySelector(".paradeiser");
var headroom = new Headroom(myElement, {
tolerance : 5,
onUnpin : function() {
document.getElementById("paradeiser-more").classList.remove("open");
}
});
headroom.init();
</script>

≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなしサンプル

sponsors

「≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなし」をシェアする

記事作成:
記事URL:

TOP > > > ≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなし