【はてなブログ】ドロップダウン機能付きのグローバルメニュー完成！タイトル下のHTML記録
☆ ブログページのメニューが完成しました ☆
初心者なりにいろいろ調べながら、ようやく完成。とっても嬉しいです！
タイトル下の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>ほとんどコピペですが… 参考サイト様に感謝です！
その都度、メモ書き程度ですが記録させていただきました！
デザインこだわるより記事を書けといろいろなところで見ましたが、わたしはそれだと気が済まないようで気が付いたらデザインいじってました。
できあっていくのがとても楽しいです♪ 楽しくブログ続けていけるようにいろいろチャレンジしていきます！
