社内の月朝ゆるもく会で作ったバーチカルメニュー

毎週月曜朝、7:00~8:30くらいでゆるっともくもく会をやり始めました。
頑張って早起きして、アウトプット出していきたい。。。

成果物

See the Pen circle by UMA (@umaniel) on CodePen.

その昔、横方向の開きメニューを作ったことがあったので、縦方向でも作ってみようと思い、やってみました。

やってること

特に難しいことはしておらず、classの付け替えでheightが変わるだけです。

[class*="home--"].active {
  height: 100%;
}
[class*="home--"].disactive {
  height: 0%;
}

純javascriptはclassの付け替えが面倒。。。

const home = document.querySelectorAll("div[class*='home--']");

const active = _self => {
  const selfClass = _self.className.replace(/^(home--(top|bottom|center)).*/, "$1");
  for (i = 0; i < home.length; i++) {
    home[i].className = home[i].className.replace(/^(home--(top|bottom|center)).*/, "$1");
    home[i].className += selfClass == home[i].className ? " active" : " disactive";
  }
};

const disactive = () => {
  for (i = 0; i < home.length; i++) {
    home[i].className = home[i].className.replace(/^(home--(top|bottom|center)).*/, "$1");
  }
};