既存のナビゲーション要素を指定するだけで、スマホ用のハンバーガーメニューを自動生成。HTML構造を変えず、依存ライブラリなし。
PCのナビをそのまま活かしながら、スマホ用メニューを自動生成します。
script タグ1行で導入できます。
<!-- 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 install navstow
import NavStow from 'navstow'; NavStow.init({ /* options */ });
対象要素のセレクタを渡すだけで動作します。
<!-- PC用ナビ（そのまま残す） --> <nav id="main-nav"> <ul> <li><a href="#">ホーム</a></li> <li> <a href="#">サービス</a> <ul> <!-- ドロップダウンも自動対応 --> <li><a href="#">Web制作</a></li> </ul> </li> </ul> </nav> <!-- サブリンク --> <nav id="sub-links"> <ul> <li><a href="#">ログイン</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">採用情報</a></li> </ul> </nav> <!-- CTAボタン --> <div id="cta-area"> <a href="#" class="cta-btn">お問い合わせ</a> </div>
NavStow.init({ elements: [ { selector: '#main-nav', style: 'list-1col' }, // メインナビ { selector: '#sub-links', style: 'list-2col' }, // サブリンク { selector: '#cta-area', style: 'button' }, // CTAボタン ], burger: 767, // ハンバーガー表示ブレイクポイント（px） });
NavStow.init() に渡すオブジェクトで動作をカスタマイズできます。
NavStow.init({ elements: [ { selector: '#nav', style: 'list-1col' }, ], breakpoints: [ { maxWidth: 767, class: 'mobile' }, { maxWidth: 1024, class: 'tablet' }, { minWidth: 1025, class: 'desktop' }, ], burger: 767, button: { position : 'right top', // 'left top' / 'right top' / 'left bottom' / 'right bottom' animation: 'cross', // 'cross' / 'spin' / 'arrow' fixed : true, // true: position fixed / false: position absolute el : '#my-btn', // 既存要素を使う場合（省略時は自動生成） }, animation: { type : 'slide', // 'slide' / 'fade' origin : 'top', // 'top' / 'bottom' / 'left' / 'right' easing : 'ease-in-out', duration: 300, }, autoHide: true, // burger表示時に元の要素を自動非表示（要素ごとに上書き可） overlay: true, }); // cleanClone モード — class/id を除去してホスト CSS 干渉ゼロに NavStow.init({ elements: [ { selector: '#nav', style: 'list-1col', cleanClone: true, autoHide: true }, ], });
| オプション | デフォルト | 説明 |
|---|---|---|
| elements | [] | 統合する要素の配列。各要素に selector（CSSセレクタ）と style（wrap スタイル名）を指定 |
| breakpoints | — | 画面幅に応じて body に付与するクラスの定義。maxWidth / minWidth と class を指定 |
| burger | 767 | ハンバーガーボタンを表示するブレイクポイント（px）。この幅以下で表示 |
| button.position | 'right top' | ボタンの配置。'left top' / 'right top' / 'left bottom' / 'right bottom' |
| button.animation | 'cross' | ボタンアニメーション。'cross'（×）/ 'spin'（回転）/ 'arrow'（矢印） |
| button.fixed | true | true: position fixed（常に表示）/ false: position absolute（スクロールで流れる） |
| button.el | — | 既存のHTML要素をボタンとして使う場合、CSSセレクタまたはDOM要素を指定 |
| animation.type | 'slide' | メニューの表示アニメーション。'slide' / 'fade' |
| animation.origin | 'top' | slide アニメーションの方向。'top' / 'bottom' / 'left' / 'right' |
| animation.duration | 300 | アニメーション時間（ms） |
| autoHide | false | true: burger表示時に元の要素を自動非表示。elements 個別に autoHide を指定すると上書き可能 |
| cleanClone | false | elements 個別オプション。true にするとクローン時に class・id（子孫含む）をすべて除去。ホスト CSS の干渉をゼロにしたい場合に使用。スタイルは .ns-wrap-* クラスで設定する |
| overlay | true | メニュー背後の暗幕オーバーレイを表示するか |
elements の style には list-1col（1カラムリスト）・list-2col（2カラムリスト）・links（div/span/a 直置き）・button（CTA用）を指定。任意の文字列も使用可能（.ns-wrap-{style} クラスが付与される）。
list-1col / list-2col は ul > li 以外に div > a・span > a・a 直置きにも対応。
ns- プレフィックスのクラスで自由にスタイルを上書きできます。
/* ヘッダーをメニュー・オーバーレイより前面に */ header { z-index: 10001; } /* ボタンをヘッダーに合わせる */ .ns-button { top: 0; right: 0; height: 64px; /* ヘッダーと同じ高さ */ width: 64px; border-radius: 0; background: #4a9eff; } /* メニューの上余白をヘッダー高さ分確保 */ .ns-menu { padding-top: 80px; }
init() が返すインスタンスからメニューを制御できます。
const nav = NavStow.init({ /* options */ }); // 外部ボタンからメニューを開く document.querySelector('#open-btn').addEventListener('click', () => { nav.open(); }); // ページ離脱時にリセット nav.destroy();