NavStow.js

PCのナビゲーションを1行のスクリプトでハンバーガーメニューに自動変換する軽量 JavaScript ライブラリ。

🌐 デモ・ドキュメント — インタラクティブデモ・インストール方法・APIリファレンス

特徴

• script タグ1行で導入 — インストール不要
• HTML構造を変更しない — 既存の要素をそのまま利用
• 複数要素を合体 — nav・サブリンク・CTAボタンを1つのメニューに
• 多彩なレイアウト — list-1col / list-2col / links / button
• ドロップダウン対応 — 入れ子の ul を自動的に開閉
• アクセシビリティ対応 — inert・フォーカストラップ・aria-modal・Escキー
• アニメーション — slide / fade、top / bottom / left / right から選択
• ブレイクポイント管理 — 複数の幅ごとに body クラスを自動付与
• 固定/非固定ボタン — button.fixed オプションで切り替え
• 元要素の自動非表示 — autoHide: true でバーガー表示時に元のnavを隠す
• cleanClone モード — cleanClone: true でクローン時に class/id を除去、ホスト CSS の干渉ゼロ
• 依存ライブラリなし — バニラ JS のみ

導入

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/navstow/navstow.min.css">

<!-- JS（body 閉じタグ前） -->
<script src="https://cdn.jsdelivr.net/npm/navstow/navstow.min.js"></script>

npm

npm install navstow

import NavStow from 'navstow';

基本的な使い方

HTML — 既存ナビをそのまま利用

<header>
  <nav id="main-nav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li>
        <a href="#">サービス</a>
        <!-- 入れ子 ul はドロップダウンとして自動対応 -->
        <ul>
          <li><a href="#">Web制作</a></li>
          <li><a href="#">開発</a></li>
        </ul>
      </li>
      <li><a href="#">会社概要</a></li>
    </ul>
  </nav>

  <div id="cta-area">
    <a href="#" class="cta-btn">お問い合わせ</a>
  </div>
</header>

JavaScript — 初期化

NavStow.init({
  elements: [
    { selector: '#main-nav',  style: 'list-1col' },
    { selector: '#cta-area',  style: 'button'    },
  ],
  burger   : 767,
  button   : { position: 'right top', animation: 'cross' },
  animation: { type: 'slide', origin: 'top', duration: 300 },
  overlay  : true,
});

対応するHTML構造

リスト構造（標準）

<nav id="main-nav">
  <ul>
    <li><a href="#">リンク</a></li>
  </ul>
</nav>

div / span ラッパー構造

<nav id="sub-links">
  <div><a href="#">リンク A</a></div>
  <div><a href="#">リンク B</a></div>
</nav>

a 直置き構造

<nav id="flat-nav">
  <a href="#">リンク A</a>
  <a href="#">リンク B</a>
</nav>

オプション

| オプション | デフォルト | 説明 | |---|---|---| | elements | [] | 対象要素の配列。selector・style・autoHide を指定 | | burger | 767 | バーガーメニューを表示する最大幅（px） | | button.position | 'right top' | ボタン位置。right top / left top / right bottom / left bottom | | button.animation | 'cross' | ボタンアニメーション。cross / spin / arrow | | button.fixed | true | true: ページに固定 / false: スクロールで流れる | | animation.type | 'slide' | メニューアニメーション。slide / fade / none | | animation.origin | 'top' | スライド方向。top / bottom / left / right | | animation.easing | 'ease' | CSS トランジションのイージング | | animation.duration | 300 | アニメーション時間（ms） | | overlay | false | 背景オーバーレイの表示 | | breakpoints | [] | 幅ごとに body へ付与するクラスの配列 |

elements の style 値

| style | 用途 | 見た目 | |---|---|---| | list-1col | メインナビ | 1カラムのリスト、区切り線あり | | list-2col | サブリンク | 2カラムのグリッド | | links | フラット構造 | 1カラムのリスト、区切り線あり | | button | CTAボタンなど | 中央揃えで1要素をそのまま配置 |

breakpoints の設定例

breakpoints: [
  { maxWidth: 767,  class: 'mobile'  },
  { maxWidth: 1024, class: 'tablet'  },
  { minWidth: 1025, class: 'desktop' },
],

autoHide

バーガーメニューが表示されるブレイクポイント（burger以下）で、元の要素を自動的に非表示にします。

elements: [
  { selector: '#main-nav', style: 'list-1col', autoHide: true },
  { selector: '#cta-area', style: 'button',    autoHide: true },
],

CSS メディアクエリで :not(.ns-cloned) を使って非表示にする方法でも同じ効果が得られます。

cleanClone

cleanClone: true を指定すると、クローン時に 元要素のすべての class と id（子孫含む）を除去 します。ホスト側 CSS の干渉をゼロにしたい場合に使用します。

elements: [
  { selector: '#main-nav', style: 'list-1col', cleanClone: true, autoHide: true },
],

| | 通常モード | cleanClone: true | |---|---|---| | class / id | 引き継ぐ | すべて除去 | | ホスト CSS 干渉 | navstow.css で吸収 | ゼロ | | スタイリング方法 | 元クラス or .ns-wrap-* | .ns-wrap-* のみ |

注意： クラスが除去されるため、元のナビ CSS は適用されません。.ns-wrap-list-1col a などの NavStow クラスで自力でスタイルを設定してください。

API

const menu = NavStow.init({ /* options */ });

// メニューを開く
menu.open();

// メニューを閉じる
menu.close();

// インスタンスを破棄
menu.destroy();

アクセシビリティ

• メニュー開閉時に aria-expanded を更新
• メニューに role="dialog" / aria-modal="true" を付与
• 開いている間は背面を inert で無効化（キーボード・スクリーンリーダーから隔離）
• フォーカストラップ — Tab / Shift+Tab がメニュー内を循環
• Escキー でメニューを閉じ、ボタンにフォーカスを戻す
• ドロップダウントグルに aria-label を自動設定

CSS カスタマイズ

ボタンの位置・サイズはライブラリが生成するクラスをCSSで上書きできます。

/* ヘッダー右上に合わせる例 */
.ns-button {
  top: 0;
  right: 0;
  height: 64px;
  width: 48px;
  border-radius: 0;
  background: #4a9eff;
}

主なクラス：

| クラス | 説明 | |---|---| | .ns-button | ハンバーガーボタン本体 | | .ns-button-fixed | button.fixed: true のとき付与（position: fixed） | | .ns-menu | メニューパネル | | .ns-overlay | 背景オーバーレイ | | .ns-wrap-list-1col | list-1col スタイルのラッパー | | .ns-wrap-list-2col | list-2col スタイルのラッパー | | .ns-wrap-links | links スタイルのラッパー | | .ns-wrap-button | button スタイルのラッパー | | .ns-dropdown | ドロップダウンリスト | | .ns-dropdown-open | ドロップダウン展開中 | | body.ns-menu-open | メニューが開いている間付与 |

ライセンス

MIT License — 無償で自由に使用・改変・再配布できます。 本ライブラリの使用によって生じたいかなる損害についても、作者は責任を負いません。