レスポンシブな折りたたみメニュー「Naver」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブな折りたたみメニューを実装するプラグイン「Naver」を紹介します。
jQueryプラグイン「Naver」
このプラグインを使えば、デバイスの画面サイズ（ブラウザの幅）によってメニューが折りたたまれるレスポンシブメニューを実装することができます。
- メニューを折りたたむ横幅（max-width）
- 折りたたまれたときのラベルの有無
- 折りたたまれたときのラベルテキスト
スポンサーリンク
それではデモページのメニューをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Naverのデモでーす。">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Naver - jQueryプラグイン</title>
<link href="jquery.fs.naver.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fs.naver.js"></script>
<style>
.naver a { background: #444; color: #fff; display: block; float: left; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; }
.naver a:hover { background: #222; }
.naver.enabled a { float: none; margin: 0 0 1px 0; width: 100%; }
</style>
<script>
$(document).ready(function() {
$("nav").naver({
labels: {
closed: "めにゅーだよ",
open: "閉じるよ"
},
maxWidth: "980px"
});
});
</script>
</head>
<body>
<h1>Naver のデモでーす。</h1>
<nav class="naver">
<a href="#">めにゅー①</a>
<a href="#">めにゅー②</a>
<a href="#">めにゅー③</a>
<a href="#">めにゅー④</a>
</nav>
</body>
</html>
スポンサーリンク