今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. 時間入力を補助する「timepicker」
  4. ソート・フィルター・ページャー付きのテーブル「Datatable」
  5. select要素の複数選択フォームを実装「Multiple Select」

レスポンシブな折りたたみメニュー「Naver」

スポンサーリンク

レスポンシブな折りたたみメニューを実装するプラグイン「Naver」を紹介します。

jQueryプラグイン「Naver」

このプラグインを使えば、デバイスの画面サイズ(ブラウザの幅)によってメニューが折りたたまれるレスポンシブメニューを実装することができます。

  • メニューを折りたたむ横幅(max-width)
  • 折りたたまれたときのラベルの有無
  • 折りたたまれたときのラベルテキスト
スポンサーリンク

それではデモページのメニューをご覧ください。

「Naver」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)