PC表示のグローバルメニューのマーク（webフォント）の削除、変更についての解説

f:id:Momotarous:20170816213522p:plain

こんにちは、桃太郎です。

わたしが参考にさせてもらったブログで、webフォントを使用してすべてのメニューに下矢印のアイコンがついていました。

私はカテゴリ別にメニューを使用したくはなかったので、今回は参考にさせてもらったメニューをちょっとだけカスタマイズしてみます。

参考記事

www.momotarou-nikko.com

この記事のPC表示のグローバルメニューの所の記事を参考にさせていただいています。

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

グローバルメニュー変更点

f:id:Momotarous:20170816203420p:plain

紹介されているCSSとHTMLをそのままコピペすると、このような状態になります。

それを、こういう風に変更したいと思います！

f:id:Momotarous:20170816203508p:plain

下向きの矢印を外して、右二つのリンクを外します。

下矢印を外す理由は、ホーム・プロフィールなどの2階層に分ける必要がないリンクだからです。

※階層とは？

f:id:Momotarous:20170816204348p:plain

2層になってるリンクの変更

リンクを外すのは、単純にHTMLのリンクを外していきます。

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">
        <li>
            <a href="１階層目のリンク">カテゴリ１ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ１-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">カテゴリ２ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ２-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ２-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ２-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ２-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">カテゴリ３ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ３-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ３-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ３-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ３-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">カテゴリ４ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ４-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ４-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ４-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ４-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">カテゴリ５ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ５-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ５-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">長い長いカテゴリ名のときの調整 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ６-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ６-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ６-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ６-４</a></li>
            </ul>
        </li>
        <li>
            <a href="１階層目のリンク">短 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ７-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ７-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ７-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ７-４</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 960;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

赤で書いている所を削除すると、階層が無くなります。

カテゴリ∨だけになり、カテゴリ∨の上にマウスを持ってきても階層が現れることがありません。

必要な所だけ残す

リンクが多い場合は、<li> ~ </li>までを削除すれば大丈夫です。

<●●>は必ず</●●>で閉じなければならないと決まっているので（例外有）いらない場合は<●●> ~ </●●>までを削除すれば大丈夫です。

リンクの貼り方

こちらの1階層目のリンクには、カテゴリーを貼る場合は、全てのカテゴリーをまとめているカテゴリーページのURLを入力します。
カテゴリ３には好きな名前を入れてください。

2階層目のリンクには、「親カテゴリー→子カテゴリー→孫カテゴリー」の子カテゴリーのURLを入力してください！

※例：レビュー＞食べ物＞うどん　の赤字部分が子カテゴリー。

カテゴリ３－１には子カテゴリーの名前を入力。