iEhohs.com

ウェブ&システム担当の仕事メモ的なブログ。個人的な記事ばかりです。

ナビゲーションメニューとサイドバーのレスポンシブ対応

開発メモ

レスポンシブ対応のナビゲーションメニューとサイドバーのサンプルです。

サンプルページ

https://www.iehohs.com/ftp/sentence-sample/

このサンプルページを開いてウィンドウの幅を変えてみてください。見え方が変わります。

これは僕がはてなブログで活動していた頃に作ったブログテーマ Sentenceで採用していた仕様です。

このテーマは僕自身が「こういうデザインのテーマが良い!」と思ったものを実際につくったもので割と評判は良いみたいです。

ぶっちゃけWordPressテーマのSimplicityをだいぶ意識しましたがw

本業の方で、サイトの編集をする時にナビゲーションメニューの仕様をいじる場面があって、「あの時どうやったかな」と思ってここに書き留めておきます。

また、サイドバーの仕様についても使う場面があると思うので合わせて載せておきます。

PC表示(1024px以上)

PC表示だと水平にナビゲーションメニュー、右側にサイドバーが出ます。普通ですね。

タブレット表示(768px以上)

タブレット表示にするとメニューは非表示です。右側のボタンをクリックすると……

垂直にメニューが展開します。

また、サイドバーはメイン下に表示され2列ずつ並びます。

スマホ表示

スマホ表示はタブレット表示とほとんど変わりませんが、本体下に表示されるサイドバーが1列に変わります。

ナビゲーションメニューのコード

HTML

<div id="nav">
    <div id="menu-inner">
        <div id="btn-content">
            <span id="menu-btn"><i class="fas fa-bars"></i></span>
        </div>
        <ul id="menu-content">
            <li><a href="index.html">MENU 1</a></li>
            <li><a href="index.html">MENU 2</a></li>
            <li><a href="index.html">MENU 3</a></li>
            <li><a href="index.html">MENU 4</a></li>
            <li><a href="index.html">MENU 5</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>$(function(){
        var n=$("#menu-btn"),
            i=$("#menu-content");
        n.click (function() {
            i.slideToggle()
        })
        /* ウィンドウサイズから表示/非表示を切り替える場合
        ,$(window).resize (function(){
            var n=window.innerWidth,
                e=1023;
            n>e?i.show():i.hide()
        })
        */
    });
    </script> 
</div>

以前まで画面リサイズのところでvar n=$(window).width()とjQueryの記述をしていましたが、これだとウィンドウのスクロールバーを除いた値が入り、スクロールバーを含めたCSSと動作が合いません。ブラウザによってスクロールバーの大きさが違うのでこれはいけない。

そこで$window.innerWidthと記述するとCSSとぴったりになりました。参考にしたのは以下のリンク。

http://black-flag.net/jquery/20151117-5810.html

と、書いてもみましたが、そもそもこのスクリプトはスマホ/タブレット表示でメニューの表示/非表示を行った後、PC表示にした時にメニューが表示されないようにするためのものでした。

しかし、ウィンドウサイズが変わるたびにメニューが閉じてしまいます。これだけならいいのですが、スマホで見ていると上下にスクロールしただけでも時々スクリプトが発動してメニューが閉じてしまうということもありました。これはよくない。

このスクリプトが無くても、CSS側で「display: block !important」と記述すると解決しました(下のコード参照)。そういうわけでコメントアウトさせています。

CSS

#nav {
    padding: 0 3.125%;
    margin: 0px auto 10px auto;
}
#nav ul {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0
}
#menu-content {
    display: none
}
#btn-content {
    text-align: right
}
#menu-content li {
    border-bottom: solid .5px #aaa;
    display: block;
    font-size: .85em;
    text-align: center
}
#menu-content li:first-child {
    border-top: solid .5px #aaa
}
#menu-content li a {
    display:block;
    padding:10px 0;
    text-decoration: none
}
#menu-content li a:hover {
    background: #f5f5f5
}
@media (min-width: 768px){
    #nav {
        padding: 0 1.25%;
        max-width: 800px
    }
}
@media (min-width: 1024px) {
    #nav {
        padding: 0;
        max-width: 1130px
    }
    #menu-content {
        display: block !important
    }
    #btn-content{
        display: none
    }
    #menu-content li {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 20%;
        margin-bottom: 15px;
        border-right: solid 1px #aaa;
        border-bottom: 0
    }
    #menu-content li:first-child {
        border-top: 0;
        border-left: solid 1px #aaa
    }
}

補足として、PC表示の#menu-content li内のwidthの値は表示させたいメニューの数に合わせて変えてやる必要があります。

サンプルではメニューは5つなので100 / 5 = 20%です。4つならば100 / 5 = 25%ってな感じです。

サイドバーのコード

HTML

<aside id="box2">
    <div id="box2-inner">    
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 1</div>
            <div class="sidebar-module-body">サイドバー1の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 2</div>
            <div class="sidebar-module-body">サイドバー2の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 3</div>
            <div class="sidebar-module-body">サイドバー3の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 4</div>
            <div class="sidebar-module-body">サイドバー4の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 5</div>
            <div class="sidebar-module-body">サイドバーの中身です。</div>
        </div>
    </div>
</aside>

CSS

#box2 {
    float: none;
    width: 93.75%;
    padding: 0 3.125%;
    font-size: 85%;
    line-height: 1.5
}
#box2-inner {
    width: 100%;
    overflow: hidden
}
.sidebar-module {
    float: none;
    margin-bottom: 30px;
    width: 100%
}
.sidebar-module-title {
    margin-bottom: 15px;
    font-size: 130%;
    font-weight: 700;
    line-height: 2.5em
}
.sidebar-module-title a {
    color: #333;
    text-decoration: none
}
.sidebar-module-title a:hover {
    text-decoration: underline
}
@media(min-width:768px) {
    #box2 {
        width: 92.5%;
        padding: 0 0 0 7.5%
    }
    #box2-inner .sidebar-module:nth-child(2n +1) {
        clear: both
    }
    .sidebar-module {
        float: left;
        width: 40.541%;
        margin: 0 9.460% 60px 0
    }
}
@media(min-width:1024px) {
    #box2 {
        float: right;
        width: 26.549%;
        padding-left: 2.655%
    }
    #box2-inner {
        width: 100%;
        overflow: hidden
    }
    .sidebar-module {
        float: none;
        width: 100%;
        margin-right: 0
    }
}

ウィジェットが2つずつ並ぶ仕様ですが、これを3つにする場合はタブレット表示の#box2-inner .sidebar-module:nth-child(2n +1)のところで、2nを3nに変えてやればOK。

あと.sidebar-moduleのwidthの値も整えてやればいいです。marginの値をそのままなら23.873%かな。

コードの圧縮を元に戻す

少しでも読み込みを速くするために圧縮していました。圧縮にはRefresh-SFを使ってました。

https://refresh-sf.com/

今回のサンプルページ用にコードを整理しようと思ったのですが、圧縮前のデータが見つからず。かと言ってアップしているコードを圧縮前の状態に手直しするのはめんどくさい!

https://prettydiff.com/?m=beautify

探してみたら普通に元に戻るツールがありました。Pretty Diffというものです。特に問題ありません。

Font Awesomeの追加

ナビゲーションメニューのボタンや、見出しのチェックマークなどの記号はFont Awesomeというウェブフォントを使っています。

使い方は簡単。HTMLのhead内に以下のコードを挿入。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

それから以下のリンクに飛んで表示させたいアイコンをクリック。

https://fontawesome.com/icons?d=gallery

直接貼り付ける場合は表示されているHTMLタグを挿入、CSSで指定する場合は以下のようにfont-familyとUnicodeを記述します。

.sample {
    font-family:'Font Awesome 5 Free';
    content: '\f00c'
}

noindexで検索エンジンに登録されないようにする

今回作ってアップしたページはサンプルなので、 他のページの評価にも影響を及ぼさないようnoindexにして検索エンジンに登録されないようにします。

以下のコードをhead内に埋め込めばOK。

<meta name=”robots” content=”noindex” />

子テーマ編集に応用していきます

こんな記事を書いて、子テーマを編集するとか言ってましたが全然何もできていません。

いちからデザインするのは大変なので、このSentenceのデザインを再現する子テーマを作成しようと思います。

今年中にできたらいいな〜。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です