テンプレート配布

TIPS:カスタマイズ

  1. TIPS:カスタマイズ

Question-Template

有ると便利かな?と思った情報をまとめておきます。
とりあえず途中ですがupしておきます。
レスポンシブテンプレートのみです。

Answer

サブメニューとかいらないんだよ
つかわなくてへいきですよ。

type-A、type-P

html
<script src="js/jquery.toggle.js"></script>   //削除
jquery.toggle.js

削除(使用しません)

type-C、type-D

jquery.toggle.js
 //アコーディオンメニュー
$('nav li,nav > ul > li> a[href^=#]') //省略
        ・
        ・
        ・
        ・
     $('nav li').children('span') //省略
    )
});
3行目~11行目を削除
jquery.toggle.js

※600の部分はテンプレートによって異なるので注意してください
 //小画面時にメニューを閉じてからリサイズするとメニューが表示されないのを防ぐ
$(window).resize(function () {
    var menu = $("#menu"),
        sub  = $(".sub-menu"),
        w = window.innerWidth ? window.innerWidth : $(window).width();
    w > 600 && menu.is(":hidden") && menu.attr("style", ""),
    w > 600 && sub.is(":hidden") && sub.attr("style", "")
});
↓変更
 //小画面時にメニューを閉じてからリサイズするとメニューが表示されないのを防ぐ
$(window).resize(function () {
    var menu = $("#menu"),
        w = window.innerWidth ? window.innerWidth : $(window).width();
    w > 600 && menu.is(":hidden") && menu.attr("style", "")
});


type-F、type-G、type-H、type-I、type-K、type-L、type-M、type-N

jquery.toggle.js
  //アコーディオンメニュー
$('nav li,nav > ul > li> a[href^=#]') //省略
        ・
        ・
        ・
      $('nav li').children('span') //省略
  });
3行目~9行目を削除

狭い画面でもメニューは出しっぱなしがいいのよ
※メニュー側がメインの下に表示されるタイプ(type-E、type-K、type-L、type-N)は、ちょっとややこしいのでここでは説明しません。

type-B

html
<div id="open">Open Menu</div>   //削除
<script src="js/jquery.toggle.js"></script>   //削除
style.css
※背景色や文字色は 適宜変更してください。
/* スマホ、タブレット用メニュー */
/* #menu内 */
margin-bottom:数値px;  //削除
/* nav内 */
position:absolute;  //削除
/* nav ul内 */
display:none;  //削除
※背景色や文字色はスマホ、タブレット用メニューのこの辺をいじればかわります
menu
nav ul
nav li a,nav li span
nav li a:hover,nav li span:hover 
  →background、color

nav li span:after
  →border-top、border-right

type-C、type-D、type-F、type-G、type-H、type-I、type-J、type-M

html
<a href="#" id="open"><span id="open-icon"></span></a>   //削除
or
<div id="open"><span id="open-icon"></span></div>  //削除
or
<div id="open"><span id="open-icon"></span><span class="open-text">Open Menu</span></div>   //削除
style.css
※背景色や文字色は 適宜変更してください。
/* スマホ、タブレット用メニュー */
/* menu内 */
display:none;  //削除
position:absolute;  //削除

※position:absolute; 
が書かれていない時は
display:none;  //削除
position:static;   //追加
※背景色や文字色はスマホ、タブレット用メニューのこの辺をいじればかわります
menu
nav ul
nav li a,nav li span
nav li a:hover,nav li span:hover 
  →background、color

nav li span:after
  →border-top、border-right
jquery.toggle.js
//小画面時にメニュー内リンクを押した場合、一度閉じる
  から
  
}); // ←一番下のこれを残して全て削除