5.JSで切り替えボタンを実現!

6391 ワード
practice テキストリンク

実装されたスクリーン


JavaScriptの簡単なイベントリスナーにより、右上隅の切り替えボタンがポップアップメニューから再度押すと消える機能を実現します.


コードの内容


JavaScript
classlist.()の追加/削除を切り替えることができます.
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
const toggleBtn = document.querySelector('.navbar__toggleBtn');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
  icons.classList.toggle('active');
  //menu의 클래스리스트에 'active' 클래스가 있다면 없애주고, 없다면 'active' 클래스를 추가는 역활을 한다.
});
CSS
まずメニュー、アイコンを表示します:none;追加後は表示されません
Activeクラスが追加された場合、flexという2ページが表示されます.追加すればいい
@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 50px;
  }

  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar__menu li{
    width: 100%;
    text-align: center;
  }

  .navbar__icons{
    display: none;
    justify-content: center;
    width: 100%;
  }

  .navbar__toggleBtn {
    display: flex;
    position: absolute;
    right: 30px;
    top: -1px;
  }
  
  .navbar__menu.active,
  .navbar__icons.active {
    display: flex;
  }
  
}
ベリーパイはシリアルポートを通じてarduino mega 2560と通信する
Linuxのnohupコマンド