WEBLOG

はてなブログでスマホ用メニューを設置する方法(横開き)

はてなブログだけではなく、webサイトをレスポンシブ化したい時に重宝するのがスマホ用メニューですよね。

縦に開くタイプのメニューや、画面の横から表示されるようなメニューなど種類は多々あります。

今回は横に開くタイプのスマホメニュー実装方法と実際に設置できるソースを載せます。

横開きというのは、こんな感じのメニューです。
参考:https://www.adchsm.com/slidebars/

HTML

<div id="sp-menu-btn"><img src="【メニューボタンの画像パス】" alt="menu" /></div>
<nav>
    <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
    </ul>
</nav>

HTMLをデザイン>カスタマイズ>タイトル下に貼りつけます。

CSS

/* メニューボタン */
#sp-menu-btn {
  position: absolute;
  z-index: 9;
  right: 3.125%;
  top: 10px;
}

/* メニュー */
#top-editarea nav {
  display: block;
  background: #AAAAAA;
  position: absolute;
  left: -60%;
  top: -10px;
  z-index: 9;
  width: 60%;
  height: 100%;
}
#top-editarea nav ul {
  margin-top: 0;
  display: block;
}
#top-editarea nav ul li {
  border-bottom: 1px solid #FFFFFF;
  border-right: 0;
  display: block;
}
#top-editarea nav ul li a {
  padding: 10px;
  width: 100%;
  text-decoration: none;
  display: block;
  box-sizing: border-box;
  color: #ffffff;
}

デザイン>カスタマイズ>デザインCSSに貼りつけます。

jQuery

$(function() {
  var _touch = ('ontouchstart' in document) ? 'touchstart' : 'click';
  var sp_menu_btn = '#sp-menu-btn';
  var container_inner = '#container-inner';
  
  // メニューボタンがタップされたら
  $(sp_menu_btn).on(_touch, function(){
    
    // 開いているときは閉じる
    if($(sp_menu_btn).hasClass('active')) {
      $(sp_menu_btn).removeClass('active');
      $(container_inner).animate({'top':'0','left':'0'},300);

    // 閉じているときは開く
    }else {
      $(sp_menu_btn).addClass('active');
      $(container_inner).animate({'top':'0','left':'60%'},300);
    }
  });
});

管理画面>設定>詳細設定>headに要素を追加に貼りつけます。

※jQueryライブラリは必ず読み込ませて下さい。
はてなブログでjQueryを使う方法

webサイトのメニュー数が増えそうなときに、横開きメニューを使用すると見やすいです。

コメントを残す

*