みなさんこんにちは、mayukouです!
今回は、うちのブログで結構人気の高いトピック、
レスポンシブのメニューの新しい方法をご紹介します!縮小するとハンバーガーアイコンに替わるスクリプトです。
方法もシンプルですよ〜
では、行ってみましょう!
スポンサードリンク
Responsive Navの特徴
・JSファイルが1KBほどで軽量
・JSファイルは一つだけでその他のライブラリは読み込まなくていい
・CSS3のトランジションやホバー、マークアップを採用
・IE6から対応している
などなどあります。
PCビュー
スマホビュー
ブラウザを収縮させるとメニューがハンバーガアイコンに変わります!
Responsive Navの導入
それでは、導入方法です!
スクリプトをダウンロードする
公式サイトから、responsive-nav.js-master.zipというファイルをダウンロードできます。
解凍したら、responsive-nav.cssとresponsive-nav.jsを使います。
任意のフォルダ(jsフォルダなど)を作成し入れておきましょう。
ヘッダーに
1 2 |
<!-- <head> の中に入れる --><link rel="stylesheet"href="responsive-nav.css"> <script src="responsive-nav.js"></script> |
HTMLに
1 2 3 4 5 6 7 |
<nav class="nav-collapse"> <ul><li><ahref="#">Home</a></li> <li><ahref="#">About</a></li><li> <a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> </nav> |
メニューとなるリストタグを囲むタグ(divやnavなど)にclass=”nav-colappse”を設定します。
body閉じタグの直前に(プラグインの読み込み)
1 2 |
<!-- Put this right before the </body> closing tag --> <script>var nav = responsiveNav(".nav-collapse");</script> |
カスタマイズ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var nav = responsiveNav(".nav-collapse",{// Selector animate:true,// Boolean: Use CSS3 transitions, true or false transition:284,// Integer: Speed of the transition, in milliseconds label:"Menu",// String: Label for the navigation toggle insert:"before",// String: Insert the toggle before or after the navigation customToggle:"",// Selector: Specify the ID of a custom toggle closeOnNavClick:false,// Boolean: Close the navigation when one of the links are clicked openPos:"relative",// String: Position of the opened nav, relative or static navClass:"nav-collapse",// String: Default CSS class. If changed, you need to edit the CSS too! navActiveClass:"js-nav-active",// String: Class that is added to element when nav is active jsClass:"js",// String: 'JS enabled' class which is added to element init:function(){},// Function: Init callback open:function(){},// Function: Open callback close:function(){}// Function: Close callback}); |
英語にて書かれてあります。
主に使用する部分
animate:CSS3を使ったトランジションアニメーションを使うかどうかの設定
transition:トランジションのスピード
label:ハンバーガーアイコンの横に入れる言葉の設定。ここでは”Menu”
Insert:トグルをナビゲーションの前もしくは後に設置するかの設定 before or after
navClass:”nav-collapse” navタグのクラス指定
最後に
いかがでしたか?レスポンシブメニューの方法をご紹介しました。シンプルなので仕事でも使っています。
皆さんもぜひ使ってみてくださいね〜
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。