みつばちブログ

☆ ブログページのメニューが完成しました ☆

f:id:mitsubachiblog:20190620151523p:plain

初心者なりにいろいろ調べながら、ようやく完成。とっても嬉しいです！
タイトル下の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="https://mitsubachiblog.hatenablog.com/entry/plofile">　ハンドメイド　 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href=https://mitsubachiblog.hatenablog.com/archive/category/%40mitsubachi_c.love.r>作品《みつばちクローバー》</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%40Mxygift">作品《Ｍｘｙ》</a></li>
            </ul>
        </li>
        <li>
            <a href="https://mitsubachiblog.hatenablog.com/entry/mitsubachiprogram">　子どもプログラミング　 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E6%95%99%E8%82%B2">プログラミング教育</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/Scratch">Scratch(スクラッチ)</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%95%99%E6%9D%90">おすすめ教材・本</a></li>
            </ul>
        </li>
        <li>
            <a href=https://mitsubachiblog.hatenablog.com/entry/SUMAHO>　スマホ教室　 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%82%A2%E3%83%97%E3%83%AA">おすすめアプリ</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E5%9F%BA%E6%9C%AC">スマホ講座 基本</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/LINE">スマホ講座 LINE</a></li>
            </ul>
        </li>
        <li>
            <a href="https://mitsubachiblog.hatenablog.com/entry/sensei">家庭科の先生の豆知識 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/cook">料理の基本</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/wash">洗濯の基本</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/clean">掃除の基本</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/life">生活の基本</a></li>
            </ul>
        </li>
        <li>
            <a href="https://mitsubachiblog.hatenablog.com/entry/m_c.cook">管理栄養士のレシピ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%94%E3%81%AF%E3%82%93">ごはん</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%81%8B%E3%81%9A">おかず</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%82%84%E3%81%A4">おやつ</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%9D%E3%81%AE%E3%81%9F">そのた</a></li>
            </ul>
        </li>
        <li>
            <a href="https://mitsubachiblog.hatenablog.com/entry/osusume">おすすめ
            <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E3%82%AB%E3%83%95%E3%82%A7">カフェ</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%81%AE%E9%A3%9F%E3%81%B9%E7%89%A9">食べ物</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/etc">etc</a></li>
            </ul>
        </li>
        <li>
            <a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%93%E3%81%B0%E3%81%9F%E3%82%93%EF%BC%A0%E8%87%AA%E7%A8%BC%E5%A5%B3%E5%AD%90">その他 <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88%E5%88%9D%E5%BF%83%E8%80%85%E3%81%AE%E8%A8%98%E9%8C%B2">アフィリエイト初心者の記録</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">はてなブログカスタマイズ</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E9%9B%A2%E5%A9%9A%E4%BD%93%E9%A8%93%E8%AB%87">離婚体験談</a></li>
                <li><a href="https://mitsubachiblog.hatenablog.com/archive/category/%E6%97%A5%E5%B8%B8">日常の出来事</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>

ほとんどコピペですが… 参考サイト様に感謝です！
その都度、メモ書き程度ですが記録させていただきました！
デザインこだわるより記事を書けといろいろなところで見ましたが、わたしはそれだと気が済まないようで気が付いたらデザインいじってました。
できあっていくのがとても楽しいです♪ 楽しくブログ続けていけるようにいろいろチャレンジしていきます！

mitsubachiblog.hatenablog.com