responsive template

右サイドメニュー／スマホ：メニューボタン　切り替えテンプレート

履歴：　2016/ 5/ 9 初回アップ

これは、フリーの【Drawer menu】を使ったレスポンシブルな右サイドメニューのテンプレートです。
【Drawer menu】は MITライセンスで公開されている css/JQuery のサンプルコードでブラウザの横幅に応じてサイドカラムの幅が2段階に切り替わり、スマホなど更に狭まるとメニューリストはヘッダー上の固定ボタンに切り替わります。サイドメニューは右サイドでも左サイドでも html の <body> 中のセレクタを一つ書き換えるだけで切り替えができます。
このテンプレートは上記【Drawer menu】のサンプルコードを利用したもので、主な変更点は上部ヘッダーバーは固定で本体をスクロールしても上端に表示されたままで、そのヘッダーバーを３分割して、左側は透明背景色上にトップページへのリンクボタン、真ん中は画像背景(スマホでは表示しない)、右側は濃い背景色に白抜き文字でページタイトルを表示させるようにしました。
なお、このテンプレートでは共用になることが多いと思われる右側メニューバーは php のインクルードを使用して別ファイルにしています。もちろんそのまま平書きしても大丈夫です。
右サイドメニュー上段には Google Custom Serch を設置しました。検索ワード枠に検索語を入力して検索すると検索結果はメインカラムに表示されます。

使用している css は次の通り：　このページで使用していないセレクタは両端に /*　*/ を入れてコメントアウトしてあるので、削除しても構いません。読み込みが僅かに早くなるかも？
オリジナルのセレクタから一部名前を変更しています。　drawer ＞ slide　／ dropdown ＞ dd
<pre> タグを使用しているので長い行は右端を突き抜けていますが、ドラッグすればコピーは出来ます）


/*  2016/05/01 changed by soso Nakajima */

.hd1 { display: table-cell; color: #ffa; font-size: 0.8em; font-weight: bold; width: 15%; max-width: 200px; min-width: 100px; height: 40px; color: #770; overflow: hidden; vertical-align: middle; padding: 0;}
.hd2 { display: table-cell; color: #fff; width: 35%; max-width: 300px; height: 40px; overflow: hidden;}
.hd3 { display: table-cell; color: #fff; font-size: 0.8em; font-weight: bold; background: #040; color: #fff; width: 50%; height: 40px; overflow: hidden; vertical-align: middle;}
.blkl { float: left;}
.blkr { float: right;}
.hd1 a { display: block; width: calc(90% - 10px); padding: 5px 0; margin: -10px 0 0 5px; text-align: center; border:2px solid; border-color:#7f7 #272 #272 #7f7; background: rgba(127,255,127,0.4); border-radius: 4px;}
/*!
 * jquery-drawer v3.1.0
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta  (http://blivesta.com/)
 */

  * { margin: 0; padding: 0;}
  img { width: 100%; height: auto;}
/*  li { margin-bottom: 20px; padding: 10px 0 10px 10px;}
  h2 { text-align: center; font-size: 1.5rem; margin-top: 5px;}
  .inner { width: 100%; max-width: 700px; margin: 20px auto 0;}
  .inner  p { margin-bottom: 40px; background-color: #bfb;} */

#h-shell { position: fixed; top: 0; left:0; width: 100%;}
#header{ display: table; height: 40px; width: 100%; max-width: 1200px; margin: 0 auto;}
#shell { position: absolute; top: 0; width: 100%;}
#contents{ width: calc(100% - 20px); max-width: 1200px; background: #dfd; padding:40px 10px;}
.h1 {text-align: center; font-weight: bold; font-size: 2rem; margin-top: 20px;}
.foreword { margin: 20px auto; line-height: 1.3; font-size: 0.8em; text-align: left; background-color: #eef; border: dotted #484 1px; width: 85%; padding: 10px;}



/************************ side bar menu style sheet ***********************************/
.slide-nav{position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;color:#222;background-color:transparent;}
/* .slide-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222} */
.slide-menu{margin: 0; padding: 20px 0; list-style: none; background: rgba(225,255,225,0.5);}
/* .slide-menu-item{font-size:1rem;display:block;padding:.75rem;text-decoration:none;color:#222;} */
/* .slide-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent} */
.slide-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}  /* slide メニュー以外をクリックした時閉じる */
.slide-open .slide-overlay{display:block}
.slide--top .slide-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}
.slide--top .slide-open .slide-nav{top:0}
.slide--top .slide-button,.slide--top.slide-open .slide-button{right:0}
.slide-left .slide-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}
.slide-left .slide-button {left:0} .slide-left .slide-button, .slide-left.slide-open .slide-nav,.slide-left.slide-open .slide-navbar .slide-button{left:0}  /* ナビメニュー開閉 */
.slide-left.slide-open .slide-button{left:16.25rem}
.slide-right .slide-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}
.slide-right .slide-button,.slide-right.slide-open .slide-nav,.slide-right.slide-open .slide-navbar .slide-button{right:0}
.slide-right.slide-open .slide-button{right:16.25rem}
.slide-button{position:fixed;z-index:4;top:0; display:block;box-sizing:content-box;width:1rem;padding:6px .7rem 14px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:inset 2px #383;outline:0;background-color: #ff9; border-radius: 6px;}
.slide-button:hover{cursor:pointer;background-color: #ffb;}
.slide-button-icon{position:relative;display:block;margin-top:10px}
.slide-button-icon,.slide-button-icon:after,.slide-button-icon:before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222}
.slide-button-icon:after,.slide-button-icon:before{position:absolute;top:-8px;left:0;content:' '}
.slide-button-icon:after{top:8px}
.slide-open .slide-button-icon{background-color:transparent}
.slide-open .slide-button-icon:after,.slide-open .slide-button-icon:before{top:0}
.slide-open .slide-button-icon:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.slide-open .slide-button-icon:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}
.slide--sidebar,.slide--sidebar .slide-contents{background-color:#fff}
.size64 {color: #fff;} .size75 {color: #fff;}	/* for window size check */

/*************** under 640px **********************/
@media (max-width: 40em){
#header { margin: 0;}
.hd1 {margin-left: 0; width: 20%;}
.hd2 {display: none; width: 0}
.hd3 { width: 80%;}
}

/*************** over 920px **********************/
@media (min-width:57.5em){
.hd1 {margin-left: 0; font-size: 1em;}
.hd2 {width: 300px; z-index: 100;}
.hd3 {width: calc(85% - 300px)}
.slide-left #contents {margin-left: 200px; width: calc(100% - 220px);} /* body タグに slide-left を指定した時 */
.slide-right #contents {margin-right: 200px; width: calc(100% - 220px);} /* body タグに slide-right を指定した時 */
.slide-nav{box-shadow: 3px 0px 5px #473; font-size: 0.8em;}
.slide-button{display:none;visibility:hidden}
.slide-vbar .slide-nav{ display:block; position:fixed; width:12.5rem; height:100%;-webkit-transform:none;-ms-transform:none;transform:none;}
.slide-vbar.slide-left .slide-nav{ left:0;}
.slide-vbar.slide-left .slide-contents{margin-left:12.5rem}
.slide-vbar.slide-right .slide-nav{right: 0;}
.slide-vbar.slide-right .slide-contents{margin-right:12.5rem}
.slide-vbar .slide-container{max-width:48rem}
.size64 {color: #f00;}
}
/*************** over 1200px **********************/
@media (min-width:75em){

.slide-left #contents {margin-left: calc(50% - 340px); width: 920px;} /*  */
.slide-right #contents {margin-left: calc(50% - 600px); width: 920px;} /*  */
.slide-vbar .slide-nav{ width:16.25rem; font-size: 1em;}
.slide-vbar.slide-left .slide-nav {left: calc(50% - 600px);}
.slide-vbar.slide-right .slide-nav {right: calc(50% - 600px);}
.slide-vbar.slide-left .slide-contents{margin-left:16.25rem}
.slide-vbar.slide-right .slide-contents{margin-right:16.25rem}
.slide-vbar .slide-container{max-width:60rem}
.size75 {color: #f0f;}
}
/* .slide--navbarTopGutter{padding-top:3.75rem} */
/* .slide-navbar .slide-navbar-header{border-bottom:1px solid #ddd;background-color:#fff} */
/* .slide-navbar{z-index:3;top:0;width:100%} */
/* .slide-navbar--fixed{position:fixed} */
/* .slide-navbar-header{position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center} */
/* .slide-navbar .slide-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none} */
/* .slide-navbar .slide-brand:hover{background-color:transparent} */
/* .slide-navbar .slide-nav{padding-top:3.75rem; font-size: 0.6em;} */
/* .slide-navbar .slide-menu{padding-bottom:7.5rem} */

@media (min-width:57.5em){
/* .slide-navbar{height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff} */
/* .slide-navbar .slide-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0} */
/* .slide-navbar .slide-menu-right{float:right} */
/* .slide-navbar .slide-menu li{float:left;} */
/* .slide-navbar .slide-menu-item{line-height:3.75rem;padding-top:0;padding-bottom:0} */
/* .slide-navbar .slide-button{display:none} */
/* .slide-navbar .slide-nav{position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} */
/* .slide-navbar .slide-menu{padding:0} */
/* .slide-navbar .slide-dd-menu{position:absolute;width:16.25rem;} */
/* .slide-navbar .slide-dd-menu-item{padding-left:.75rem} */
}
.slide-menu a { display: block; width: 100%; text-decoration: none; margin: -5px; padding: 5px 0 5px 30px; text-indent: -32px;}	/* リスト全体をリンク領域に */
.slide-menu a:before {content:">"; color: #030; margin-right: 5px; font-weight: bold;}
.slide-menu>li{ margin: 5px 0 10px 10px; padding: 10px; background-color: #fff; box-shadow: -2px -2px 2px #595 inset; border-radius: 4px;}
.slide-menu>li:hover{ background-color: #fdd; box-shadow: 2px 2px 2px #595 inset;}
.slide-menu>li.open { background-color: #ff7;}
ul.slide-dd-menu {margin-top: 15px; background-color: transparent;/* height: 0; */}
.slide-dd-menu>li{ margin: 5px 0 15px 5px; padding: 5px; width:calc(100% - 15px);list-style:none;background-color: #ffb; box-shadow: -2px -2px 2px #595 inset;}
.slide-dd-menu>li:hover{ background-color: #fdd; box-shadow: 2px 2px 2px #595 inset;}
.slide-dd-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff;}
.slide-dd-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222;}
.slide-dd-menu-item:hover{text-decoration:underline;color:#555;}
.slide-dd.open>.slide-dd-menu{ display: block;/* height: 100%; -webkit-transition:height 1s; transition:height 1s; */}
.slide-dd .slide-caret{display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,-webkit-transform .5s ease;transition:transform .5s ease,opacity .5s ease;transition:transform .5s ease,opacity .5s ease,-webkit-transform .5s ease;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.slide-dd.open .slide-caret{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.slide-container{margin-right:auto;margin-left:auto}
@media (min-width:57.5em){
.slide-container{max-width:60rem}
}
@media (min-width:75em){
.slide-container{max-width:70rem}
}

使用している JQuery スクリプト


/*!
 * jquery-slide v3.1.0
 * Flexible slide menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/slide
 * License : MIT
 * Author : blivesta  (http://blivesta.com/)
 */

!function(e){"use strict";
"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){"use strict";
var t="slide",n="undefined"!=typeof document.ontouchstart,s={init:function(n){return n=e.extend({iscroll:{mouseWheel:!0,preventDefault:!1},showOverlay:!0},n),s.settings={state:!1,"class":{nav:"slide-nav",toggle:"slide-toggle",overlay:"slide-overlay",open:"slide-open",close:"slide-close",dropdown:"slide-dd"},events:{opened:"slide.opened",closed:"slide.closed"},dropdownEvents:{opened:"shown.bs.dropdown",closed:"hidden.bs.dropdown"}},this.each(function(){var o=this,r=e(this),a=r.data(t);
if(!a){n=e.extend({},n),r.data(t,{options:n});
var i=new IScroll("."+s.settings["class"].nav,n.iscroll);
n.showOverlay&&s.addOverlay.call(o),e("."+s.settings["class"].toggle).on("click."+t,function(){return s.toggle.call(o),i.refresh()}),e(window).resize(function(){return s.close.call(o),i.refresh()}),e("."+s.settings["class"].dropdown).on(s.settings.dropdownEvents.opened+" "+s.settings.dropdownEvents.closed,function(){return i.refresh()})}})},addOverlay:function(){var t=e(this),n=e("").addClass(s.settings["class"].overlay+" "+s.settings["class"].toggle);
return t.append(n)},toggle:function(){var e=this;
return s.settings.state?s.close.call(e):s.open.call(e)},open:function(o){var r=e(this);
return o=r.data(t).options,n&&r.on("touchmove."+t,function(e){e.preventDefault()}),r.removeClass(s.settings["class"].close).addClass(s.settings["class"].open).css({overflow:"hidden"}).slideCallback(function(){s.settings.state=!0,r.trigger(s.settings.events.opened)})},close:function(o){var r=e(this);
return o=r.data(t).options,n&&r.off("touchmove."+t),r.removeClass(s.settings["class"].open).addClass(s.settings["class"].close).css({overflow:"auto"}).slideCallback(function(){s.settings.state=!1,r.trigger(s.settings.events.closed)})},destroy:function(){return this.each(function(){var n=e(this);
e(window).off("."+t),n.removeData(t)})}};
e.fn.slideCallback=function(t){var n="transitionend webkitTransitionEnd";
return this.each(function(){var s=e(this);
s.on(n,function(){return s.off(n),t.call(this)})})},e.fn.slide=function(n){return s[n]?s[n].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof n&&n?void e.error("Method "+n+" does not exist on jQuery."+t):s.init.apply(this,arguments)}});

もう一つ JQuery スクリプト（もちろん上記のスクリプトに併合しても構わない。）


$(document).ready(function() {
  $('.slide').slide();
});

メインの html サンプルコード


<!DOCTYPE html>

<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta charset="UTF-8">
<meta name="author" content="SoSo Nakajima">
  <title>responsive template</title>
  <link rel="stylesheet" href="./css/omenu.css">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
</head>
<style>
</style>
<body class="slide slide-right slide-vbar">
    <!-- slide-right の代わりに slide-left を入れると左サイドメニューになる -->

<div id="contents">
<div align="center" class="m_area">
<!-- ここからメインの内容 -->

</div> <!-- end of m_area -->
</div> <!-- end of contents -->

<div id="h-shell">
<div id="header">
<button type="button" class="slide-toggle slide-button">
  <span class="sr-only">toggle navigation</span>
  <span class="slide-button-icon"></span>
</button>
 <div class="hd1"> <a href="#" style="text-decoration: none;">＞ Top Page</a></div><div class="hd2" style="background-image: url(./images/header.png);background-repeat: no-repeat;background-position: left top;"></div><div class="hd3" style="padding-left:5%;height:40px;">＞　Responsible Drawer Template　＜</div>
</div><!-- end of header -->
</div><!-- end of h-shell -->

<!-- <?php include("./header.html"); ?>  php でサイドメニュー(以下の <nav> ～ </nav>)を別ファイルに保存する場合 -->
<nav class="slide-nav" style="margin-top: 40px;">
<!-- ここには何も入れない：スクロールしなくなる -->
  <ul class="slide-menu">
<!-- 入れるならここ -->
<div style="border: solid #7b7 2px; box-shadow: -2px -2px 2px #373 inset; margin: -10px 0 -5px; padding: 5px; text-align: center; color: #050; font-weight: bold;">
★ Google サイト内検索 ★
    <gcse:searchbox-only></gcse:searchbox-only>
</div>
<hr style="margin: 10px 0;">
    <li><a href="#">top link</a></li>
    <li class="slide-dd">
    <a href="#" data-toggle="dropdown">【Ⅰ】大分類－１</a>
      <ul class="slide-dd-menu">
      <li><a href="#">子分類１</a></li>
      <li><a href="#">子分類２</a></li>
      <li><a href="#">子分類３</a></li>
      <li><a href="#">子分類４</a></li>
	  </ul>
	</li>
    <li class="slide-dd">
    <a href="#" data-toggle="dropdown">【Ⅱ】大分類－２</a>
      <ul class="slide-dd-menu">
        <li><a href="#">子分類１１</a></li>
        <li><a href="#">子分類１２</a></li>
        <li><a href="#">子分類１３</a></li>
        <li><a href="#">子分類１４</a></li>
     </ul>
    </li>
    <li class="slide-dd">
      <a href="#" data-toggle="dropdown">【Ⅲ】大分類－３</a>
      <ul class="slide-dd-menu">
        <li><a href="#">子分類３１</a></li>
        <li><a href="#">子分類３２</a></li>
        <li><a href="#">子分類３３</a></li>
        <li><a href="#">子分類３４</a></li>
	  </ul>
	</li>
<hr>
	<li class="slide-dd">
	<a href="#" data-toggle="dropdown">【Ⅲ】大分類－４</a>
      <ul class="slide-dd-menu">
        <li><a href="#">子分類４１</a></li>
        <li><a href="#">Top</a></li>
        <li><a href="#">子分類４２</a></li>
        <li><a href="#">子分類４３</a></li>
      </ul>
    </li>
	<li class="slide-dd"><a href="#">子分類４５</a></li>
	<li class="slide-dd"><a href="#">子分類４５</a></li>
	<li class="slide-dd"><a href="#">子分類４５</a></li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  (function() {
    var cx = '00123456789:abcdefg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script>
<script src="./js/omenu.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

Google custom serch の設置方法
Google custom serch にアクセスする
Google IDでログインして　最低限　「設定」タブで「検索エンジン名」と「検索するサイト」のURLを記入し、「デザイン」タブで希望のレイアウトパターンや必要に応じて各種設定を行い、「保存してコードを取得」ボタンを押す。
スクリプトコードが表示されるが、そのコードのうち下記のような <script>～</script>を　メインhtmlの </body>タグの前にペーストする。
(cx = '012345:abcdefg' の部分が各設定によって異なる)


<script>
  (function() {
    var cx = '012345:abcdefg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

次に、検索枠を表示させたい部分に
<gcse:searchbox-only>　</gcse:searchbox-only>　
をペーストし、検索結果を表示したい部分に　
<gcse:searchresults-only>　</gcse:searchresults-only>　
をペーストする。上記のように検索枠と結果表示部分を分けてペーストしないと、結果表示が幅を狭めたブロック要素中に表示されることがあり、その場合検索結果が見づらくなってしまう。

なお Drawer menu は MITライセンスなので、css/JQuery　などのファイル中の著作権表示は消さないで使用すること。改変・配布は自由。

Access Counter:

楽天の商品

右サイドメニュー／スマホ：メニューボタン 切り替えテンプレート

右サイドメニュー／スマホ：メニューボタン　切り替えテンプレート