JavaScriptのメディアクエリ

Question

ページ上部にheader要素でナビゲーションメニューを横並びに作っています。widthが850px以上の場合、左側にaside要素でサブメニューを縦並びに作っています。しかし、widthが850px以下になった場合、aside要素をドロップダウンメニューとして使おうと考えています。

例えば、

<header>
  <ul id="header">
    <li><a id="profileLogoName">ABC</a></li>
    <li>DEF</li>
    <li>GHI</li>
    <li>JKL</li>
    <li>MNO</li>
  </ul>
</header>

<aside>
  <ul>
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
    <li>jkl</li>
  </ul>
</aside>

widthが850px以下の場合、#profileLogoNameの要素を押すとasideタグがドロップダウンメニューとして現れる仕様にしたいです。そこでJavaScriptを次のように設定しました。

window.onresize = function() {
      var profile = document.getElementById('profileLogoName');
      var subMenu = document.getElementsByTagName('aside')[0];

      if(window.innerWidth < 850) {
        profile.addEventListener('click', function() {subMenu.style.display = "block";})
        subMenu.addEventListener('click', function() {subMenu.style.display = "none";})
      }
}

しかし、これだといくつか問題点があり、うまくいきませんでした。
どう改善すればいいでしょうか？

Comments

[m.ts10806]

viewportが動的に変わる仕組みを作られているのでしょうか？それとも単なるウィンドウサイズなのでしょうか。

[ryoo_chksl]

後者です

Answer 1

jsをhtml内に直接記述したサンプルソースです。
jsでは特に分岐をかけず、#pushButtonがクリックされた時に#characterにpushButton-clickedクラスを追加しています。

<p id="pushButton" onclick="document.getElementById('character').classList.add('pushButton-clicked')">push</p>
<p id="character">dog</p>

cssでviewportが850px以下で.pushButton-clickedが付与された場合にdisplay: block;を適用しています。

#character {display: none;}
@media screen and (max-width:850px) {
  #character.pushButton-clicked {display: block;}
}

この方法だと、viewportが851px以上の時にクリックされた後、windowサイズ変更で850px以下になった場合に
display: block;は適用されてしまうので、この挙動が不都合であればjsで分岐処理を入れてください。