レスポンシブ対応のメニューをいくつか試した結果、Bootstrap に落ち着きました。
実装するには Bootstrap.min.js と Bootstrap.min.css を追加しますが、Bootstrap の各種機能の中で今回使うのは nabvar だけ。
HTML に css を追加すればレンダリングブロックがぁーと警告されてさらに読み込みが速度が遅くなる
そこでパフォーマンス向上のため CSS の本数を減らしたいので navbar に使われているセレクタだけ抽出して既存 CSS に１本化しました。
navbar で検索してそこだけピックアップするだけと高を括っていたら全然違って、思っていたよりも結構大変な作業でビックリ。
Bootstrap の navbar だけ CSS
bootstrap.css から navbar だけを抽出したものが下の CSS です。
/* Bootstrap Navbar */
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7;font-size:14px!important}
.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}
.navbar-default .navbar-toggle{border-color:#ddd}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}
.navbar-default .navbar-toggle .icon-bar{background-color:#888}
.navbar-default .navbar-brand{color:#777}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav>li>a{color:#777}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}
.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}
.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}
.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
.navbar-brand{float:left;height:50px;padding:15px;line-height:20px}
.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.navbar-collapse.in{overflow-y:auto}
.collapse{display:none}
.collapse.in{display:block}
.nav{padding-left:0;margin-bottom:0;list-style:none}
.nav>li{position:relative;display:block}
.nav>li>a{position:relative;display:block;padding:10px 15px}
.navbar-nav{margin:7.5px -15px}
.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}
.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.dropdown{position:relative}
.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}
.open>.dropdown-menu{display:block}
.open>a{outline:0}
.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}
.form-group{margin-bottom:15px}
.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}nav ul{list-style:none}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}
.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}@media (max-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:200px}}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}
.navbar-nav .open .dropdown-menu>li>a{line-height:20px}
.navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}
.navbar-form .form-group{margin-bottom:5px}}@media (min-width:768px){.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:0;margin-left:0}
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}
.navbar{border-radius:4px}
.navbar-header{float:left}
.navbar-toggle{display:none}
.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}
.navbar-collapse.in{overflow-y:visible}
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}
.navbar-nav{float:left;margin:0}
.navbar-nav>li{float:left}
.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}
.navbar-nav.navbar-right:last-child{margin-right:-15px}
.navbar-right{float:right!important}
.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-left{float:left!important}
.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}
.navbar-static-top{z-index:1000;border-width:0 0 1px}
.navbar-static-top{border-radius:0}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030;-webkit-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}
.navbar-fixed-top{top:0;border-width:0 0 1px}
.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}
.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}
.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}}
.navbar-default,.navbar-brand{font-size:14px!important}
.navbar-default{position:absolute!important;top:0;left:0;width:100%;z-index:200}
.navbar-form{margin-left:0!important;border:none!important;margin-bottom:0}
.navbar-collapse{overflow-x:hidden!important}
button, select{text-transform:none;}
input{line-height:normal}
HTML の head に書いた方が速いかな
最初 bootstrap.min.css を全部貼り付けてみたら、サイズがデカくて保存できないというエラーが出て断念。仕方なく navbar だけ抽出したという流れです。
別の Seesaa テンプレートではこの抽出 navbar CSS を HTML の head に style で追加してみた。どうせキャッシュされないはずだし。結果、既存CSS内に追記するよりも読み込みは若干速い（PageSpeed Insights比）。
個人的にはCSS内に書いた方がしっくりくるけど、CSS 内の画像はデータURIスキームでBase64エンコードしているので、そもそも CSS がデカい。それに加えてこの bootstrap が追記されると、どうも読み込みの２周目に入っているような挙動。仕方ないので bootstrap navbar css は HTML の style に書いてます。
» Above-The-Fold コンテンツの表示を早くする方法
難しくてほとんど理解不能だったけどなんだかとても役にたちました。