【Vaster2】CSSでスマホの時のメニューバーを変更【jQueryなし】

以前作ったものは、jQueryをつかっていたので PageSpeed Insights でレンダリングをブロックすると指摘されていました。

なので、今回はCSSのみ（スムーススクロールの部分はJavaScript）でつくりました。

閉じているとき

開いたとき。記事などのコンテンツは押し下げられます。

メニューバーは固定ではありません。

HTMLをいじります、必ずバックアップをとってから作業してください。

手順としては、既存の「メニューを開くボタン」を表示させない、新しいメニューバーを設置、必要ならばスムーススクロール用のJavaScriptを設置。の3ステップです。

初心者がいろいろ調べながら作りました。正確性はありませんので留意してください。

追記：Googleカスタム検索を追加したものをつくりました。

目次

• 既存のメニューを開くボタンを表示させない
• ヘッダーナビゲーションを表示させない
  • もし削除するなら
• 新しいメニューバーを設置
• スムーススクロール用の JavaScript を貼り付け
• 補足
• 参考サイト
• 最後に

既存のメニューを開くボタンを表示させない

これを表示させない

メニューを開くボタンのCSS @media screen and (max-width: 768px){にあるdisplay:block !important;をdisplay: none;に変更

変更前

/*  メニューを開くボタン  */
 .button-toggle{
 display:none;
 }
 @media screen and (max-width: 768px){
  .button-toggle{
  display:block !important;
  width:90%;
  box-sizing:border-box;
  
  color:#fff;
  padding:8px 10px;
  margin:10px auto;
  background:#008ec2;
  border:2px solid #fff;
  }
  }

変更後

/*  メニューを開くボタン  */
.button-toggle{
 display:none;
 }
 @media screen and (max-width: 768px){
  .button-toggle{
  display: none; /* 変更 */
  width:90%;
  box-sizing:border-box;
  
  color:#fff;
  padding:8px 10px;
  margin:10px auto;
  background:#008ec2;
  border:2px solid #fff;
  }
  }

ヘッダーナビゲーションを表示させない

自分の環境ではヘッダーナビゲーションが表示されてしまったので下記CSSを追加しました

CSSにある、レスポンシブデザインの@media screen and (max-width: 768px)のところに#PageList1{display: none;}を追加

CSS

/*   レスポンシブデザイン
--------------------------------------------------- */        
@media screen and (max-width: 768px){
#PageList1 {
display: none;
}

もし削除するなら

上のCSSを追加した後に、もし既存のメニューのコードを削除するなら、該当するjQuery, JavaScript, HTML, CSSを削除。

今回作るメニューバーは削除しなくても動きます。

削除するのは、たぶんこれ（自信がないので削除は様子を見ながらお願いします……）

jQuery（他にjQueryに依存しているものがある場合は削除しないでください）

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

JavaScript

<!--レスポンシブメニューのためのjavascriptコード-->

 <script type='text/javascript'>
 /*<![CDATA[*/
$(function(){
if ($(window).width()<900) {
    $('nav').css('display','none');
    $('.button-toggle').on('click', function() {
        $('nav').slideToggle();
    });
 }
});
 /*]]>*/
</script>

HTML

<div class='button-toggle'><i class='fa fa-bars'/>メニューを開く</div>

CSS

/*  メニューを開くボタン  */
.button-toggle{
    display:none;
}
@media screen and (max-width: 768px){
    .button-toggle{
    display:block !important;
    width:90%;
    box-sizing:border-box;

    color:#fff;
    padding:8px 10px;
    margin:10px auto;
    background:#008ec2;
    border:2px solid #fff;
}
}

新しいメニューバーを設置

「レイアウト」－headerの場所の「ガジェットを追加」－「HTML / JavaScript ガジェット」に下記コードをコピペして保存。

下記コードはこのブログのものです。リンク先などの目標（<li>...</li> の中身）は自分のものでお願いします。（chrome の「検証」やFirefoxの「要素を調査」で調べられます。ともに、右クリックから選ぶか、キーボードのF12キー）

追記：当初のものより少しHTMLの構造を変更しました。また、メニューバーを上部に固定するとき用のCSSを追加しました。（コメントアウトしてあります）

<div class="cp_menu">
 <div class="cp_menu-inner">
  <div class="btn-content">
  <label for="cp_menu_bar1"><span id="menu-btn"><i class="fas fa-bars" aria-hidden="true"></i> MENU</span></label>
  </div>
<input type="checkbox" name="radio" id="cp_menu_bar1"/>
<ul id="link1">
 <li><a href="https://sutasutashiki.blogspot.com">ホーム</a></li>
 <li><a href="#Label1">カテゴリー</a></li>
 <li><a href="#PopularPosts1">よく読まれている記事</a></li>
 <li><a href="#related-posts-widget">関連記事</a></li>
</ul>
 </div>
</div>
<style>
@media screen and (min-width:769px){/*PC時に非表示する要素*/
.cp_menu {
    display: none;
}}
@media screen and (max-width:770px){/*スマホ時に表示する要素*/
.cp_menu {
 /* margin: 52px auto; メニュー上部固定用 要数値調節 */
}
.cp_menu-inner {
 max-width: 460px;
 margin: 0 auto;
 padding: 0;
 font-size: 1.2em;
 background: #1b2538;
 /* position: fixed; メニュー上部固定用 */
 /* top: 0; メニュー上部固定用 */
 /* z-index: 2; メニュー上部固定用 */
 /* margin-left:0px; メニュー上部固定用 */
 / *height: auto; メニュー上部固定用 */
}
.btn-content {
 text-align: left;/* ボタン位置 */
}
.cp_menu label {
 width: 25%;
 display: block;
 position: relative;
 margin: 0 0 2px 0;
 padding: 12px;
 line-height: 1.5;
 color: #ffffff;
 background: #1b2538;
 cursor: pointer;
}
#cp_menu_bar1 { /* チェックボックス非表示 */
 display: none;
}
.cp_menu ul {
 margin: 0;
 padding: 0;
 background: #f4f4f4;
 list-style: none;
}
.cp_menu li {
 overflow-y: hidden;
 max-height: 0;
 transition: all 0.5s;
 padding: 0;
 line-height: 1.5em;
}
.cp_menu a {
 display: block;
 padding: 10px;
 text-decoration: none;
 color: #000000;
 line-height: 1.5;
 box-sizing: border-box;
 border-bottom: 1px solid rgba(78,78,78,0.3);
}
/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li {
 max-height: 3.0em;
 opacity: 1;
}}
</style>

<i class="fas fa-bars" aria-hidden="true">はFont Awesome 5のものです。

Vaster2のデフォルトはFont Awesome 4なので、たぶんこれ <i class="fa fa-bars" aria-hidden="true"></i>を貼り付けれはいいと思います。

スムーススクロール用の JavaScript を貼り付け

下記コードを</body>直上に貼り付け

<!-- スムーススクロール用のJavaScript -->
<script>
var scrollElm = (function() {
  if('scrollingElement' in document) return document.scrollingElement;
  if(navigator.userAgent.indexOf('WebKit') != -1) return document.body;
  return document.documentElement;
})();
(function() {
  var duration = 500;
  var ignore = '.noscroll';
  var easing = function (t, b, c, d) { return c * (0.5 - Math.cos(t / d * Math.PI) / 2) + b; }; //jswing
  var smoothScrollElm = document.querySelectorAll('a[href^="#"]:not(' + ignore +')');
  Array.prototype.forEach.call(smoothScrollElm, function(elm) {
    elm.addEventListener('click', function(e) {
      e.preventDefault();
      var targetElm = document.querySelector(elm.getAttribute('href'));
      if(!targetElm) return;
      var targetPos = targetElm.getBoundingClientRect().top -30;
      var startTime = Date.now();
      var scrollFrom = scrollElm.scrollTop;
      (function loop() {
        var currentTime = Date.now() - startTime;
        if(currentTime &lt; duration) {
          scrollTo(0, easing(currentTime, scrollFrom, targetPos, duration));
          window.requestAnimationFrame(loop);
        } else {
          scrollTo(0, targetPos + scrollFrom);
        }
      })();
    })
  });
})();
</script>

if(currentTime < duration)のなかの<記号を実体参照の<に変更しました。

if(currentTime &lt duration)

スクロールしたときに上に間隔が欲しかったので var targetPos = targetElm.getBoundingClientRect().top;の行にマイナス数字を入れました。（とりあえず -30）

var targetPos = targetElm.getBoundingClientRect().top -30;

補足

右下にある「上に戻る」ボタンが動かなくなったので、ボタンのコードを修正しました。

href="#"をhref="#Header1"に変更

<a class="top-button" rel="nofollow"
     style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#Header1" title="Back to Top">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcKVJi7kLASowdBDEKRiVkKkXQngawIJj8UMtXtdrN0WBqYj4WhnncFYzaBz9Q-DZGpcUTst1VSoi0Mg-7A9oELZBGgbJ71iQxOceQV2G1REFLxb0PSdp5T3pH2Q2g1-RIBTeJLQ4UtMv/s1600/back-to-top-button-style-7.png" height="48" width="48" /></a>

参考サイト

最後に

iOS SafariがCSSのプロパティ scroll-behavior に対応したらCSSのみでやってみたい。