不器用さんの5限目は図工

不器用でもいろいろ、つくりたい。

【ブログカスタマイズ】ブログに階層ヘッダーメニューを追加してみた

ども!最近普段諦めるところ粘って主張してみたらうまくいきました、あきあです!

やっぱり粘ってみるのも大事ですね!!(*´ω`*)




さて、このブログにもやっと上にメニューが出来ました



ヤッター!

f:id:akia7:20150727233302p:plain



世の中には便利なプラグインがたくさんあって、最初は使おうと意気揚々としていたのですが、何故かうまくいかず…

もういいやっと書くことにしました。

だいぶ泥臭いコードですけどw
スマートなコード教えてほしい!

何か悩んでる人の参考になれば~と思ったので、乗せておきますね。

とりあえず動いてるからヨシ!

前提条件として、

  • サイドにカテゴリー表示があること
  • 階層は「-」で繋いでカテゴリ登録していること
  • 階層は2階層まで

 

デザインのフッターにJSを入れて

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
<!--
(function(){
$(document).ready(function(){


    //上部メニューの作成
    $("#content").before("<div id='Menu'><ul id='MenuUl'></ul></div>");
    $(".hatena-module-category").find("ul:first-child").attr("id","SideCategoryUl");
    var menuArray = [];
    $("#SideCategoryUl li").each(function(){
      var allTxt = $(this).text();
      var txtAry = allTxt.split(" (");
      var ar = txtAry[0].split("-");
      var href= $(this).find("a").attr("href");
      var txt = ar[0];

      //まだ一度も出ていなかったら初期化
      if(!menuArray[txt]){
        menuArray[txt] = new Array("",new Array());
      }
      if(ar.length <= 1){
        //第1階層
        menuArray[txt][0] = href;
      }else{
        //第2階層
        var sub = menuArray[txt][1];
        sub.push(new Array(href,ar[1]));
        menuArray[txt][1] = sub;
      }

    });

    //sortするために配列に戻す
    newMenuAry = new Array();
    for (var key in menuArray) {
      newMenuAry.push(new Array(key,menuArray[key]));
    }
    newMenuAry.sort();
 
    //DOMの作成
    $("#SideCategoryUl li").remove();//いったん削除
    for(var i = 0; i < newMenuAry.length; i++){
      var txt = newMenuAry[i][0];
      var href = newMenuAry[i][1][0];
      var subAry = newMenuAry[i][1][1];
      subAry.sort();

      var li = "<li><a href="+ href +">"+ txt +"</a>";
      for(var j = 0; j< subAry.length; j++){
        if(j == 0){
          li = li + "<ul>";
        }
        li = li + "<li><a href="+ subAry[j][0] +">"+ subAry[j][1] +"</a></li>";
        if(j == subAry.length -1 ){
          li = li + "</ul>";
        }

      }
      li = li + "</li>";

      //上部のメニューにDOMを追加
      $("#MenuUl").append(li);
      //右のカテゴリーにもDOMを追加
      $("#SideCategoryUl").append(li);

    }

    //ロールオーバー
    $('#MenuUl li').hover(function(){
      $('>ul:not(:animated)',this).slideDown('fast')
    },function(){
        $('>ul',this).slideUp('fast');
    });

    //上にあるのにサイドのは要らないかも…非表示にする
    $(".hatena-module-category").hide();

    //タグのハイフンより前を削除
    $(".categories a").each(function(){
      var ary = $(this).text().split("-");
      var txt = ary[0];
      if(ary.length >= 2){
        txt = ary[1];
      }
      $(this).text(txt);
    });



});

})();

// -->
</script>

デザインのCSSに追加

#Menu{
  background: #31CCBA;
}
#MenuUl {
  display: table;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
#MenuUl li{
  display:table-cell;
  position: relative;
}
#MenuUl > li{
  border-right: 1px solid #fff;
}
#MenuUl > li:first-child{
  border-left: 1px solid #fff;
}
#MenuUl li a{
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
  text-decoration: none;
  background: #31CCBA;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

#MenuUl li a:hover{
  background: #F44799;
  color: #fff;
}
#MenuUl ul{
  position: absolute;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
  top: 36px;
  width: 100%;
  display: none;
}
#MenuUl ul li{
  display: block;
  float: none;
  border-top: 1px solid #fff;
}
#MenuUl ul li a:hover{
  background: #89CE11;
}

JSの流れとしては

  • 「#content」の前に新しいhtmlを追加
  • サイドのカテゴリーの中身を分解して組み直して配列に
  • 配列の中身をソートして表示
  • ロールオーバーの処理を追加

すごいざっと書いてみましたw

自分でやりたいと思っている人のとっかかりになれば幸いです!
ほんとはこんな泥臭いことはしなくていいはず…だけど…w



こういうのは楽しいね!

よろしければポチよろしくお願いします~

にほんブログ村 ハンドメイドブログ 手づくり工作へ

Twitterやってます!

今日のうさぎ

f:id:akia7:20150728002219p:plain

▲TOP
当ブログで使用されている文章、画像、情報など全ての無断転載・複製を固く禁じます。