jQueryプラグインのFlexNavを試してみる

JavaScript

jQueryプラグインのFlexNavを試してみる。

FlexNav - A jQuery Plugin for Responsive Menus
http://jasonweaver.name/lab/flexiblenavigation/

※バージョン1.3.3で試しました。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/flexnav.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.flexnav.min.js"></script>
<style>
/* paddingを0にしとかないとなぜかメニューがずれる */
ul { padding: 0; }

/* なぜか▼の下に隙間ができるので背景を無しにしている */
.flexnav .touch-button { background: none;}
</style>
<script>
$(function(){
  $(".flexnav").flexNav();
});
</script>
</head>
<body>
  <ul data-breakpoint="800" class="flexnav">
  <li><a href="#">メニュー１</a>
    <ul>
    <li><a href="#">メニュー１−１</a></li>
    <li><a href="#">メニュー１−２</a></li>
    <li><a href="#">メニュー１−３</a></li>
    </ul>
  </li>
  <li><a href="/">メニュー２</a>
    <ul>
    <li><a href="#">メニュー２−１</a></li>
    <li><a href="#">メニュー２−３</a>
      <ul>
      <li><a href="#">メニュー２−３−１</a></li>
      <li><a href="#">メニュー２−３−２</a></li>
      </ul>
    </li>
    </ul>
  </li>
  <li><a href="#">メニュー３</a></li>
  </ul>
</body>
</html>

デモ

http://yk5656.web.fc2.com/flexnav/index.html