kglabo.blog

I will output what I thought.

kanazawa.rb meetup #78でもくもくしてきた

行ってきた

kanazawa.rb meetup #78に参加してもくもくしてきました。

kzrb.doorkeeper.jp

やったこと

  • はてなブログのNakedテーマに利用されていたjQuery記述を殺した

内容

このブログで利用されて頂いている下記のテーマなのですが、

blog.hatena.ne.jp

ナビゲーション部分の実装がjQueryで記載されており、iOSの場合は動作しなかったので、 Vanilla.jsにて書き直した(Windowをリサイズした際の処理は別にいらんだろうというコトで削除した)

theme-naked.hatenablog.jp

書き直したコードはこんな感じです。 (本当はGithubに上げたかったけど、はてなのテーマをいじる時の仕様上べた書きだったので)

# Before

<script>
$(function(){
    var menuBtn = $(".menu-btn"),
        menuContent = $(".menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 768;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>
# After

<script>
window.onload = function() {
    var menuBtn = document.querySelector('.menu-btn');
    var menuContent = document.querySelector('.menu-content');
    var menuHeight = document.querySelector('.menu-inner');

    menuBtn.addEventListener('click', function () {
        menuContent.classList.toggle('menu-content--active');
        menuHeight.classList.toggle('menu-inner--fix');
    });
}
</script>

<style>
@media screen and (max-width: 768px) {

    #n-menu .menu-inner {
        height: 34px;
    }
    #n-menu .menu-inner--fix {
        height: auto !important;
    }
    #n-menu .menu-content {
        display: none;
    }
    #n-menu .menu-content li {
        border-top: 1px solid #fff;
    }
    #n-menu .menu-content--active {
        display: block !important;
        animation: menu-content--active .3s linear 0s;
    }

    @keyframes menu-content--active{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }
}

</style>

得たもの

  • 学習内容を雑にアウトプットした
  • JavaScriptのclassListとquerySelectorとaddEventListenerがあればjQueryとある程度戦える自信
  • iOSでもナビゲーションが動くようになった

f:id:kgr0210:20190221020208g:plain
がんばったで賞