ナビゲーションバーの折りたたまれた状態と折りたたまれていない状態で背景色を異なる色に変更する方法

1. HTMLのナビゲーションバーの要素を特定します。通常、

2. CSSを使用して、折りたたまれた状態と折りたたまれていない状態のスタイルを定義します。以下は例です:

/* 折りたたまれていない状態のスタイル */
.navbar {
  background-color: #ffffff; /* 好きな色に変更してください */
}
/* 折りたたまれた状態のスタイル */
.navbar.collapsed {
  background-color: #ff0000; /* 好きな色に変更してください */
}

3. 上記のCSSコードを適用するために、ナビゲーションバーの要素に適切なクラス名を追加します。折りたたまれた状態の場合は、.collapsedクラスを追加し、折りたたまれていない状態の場合はこのクラスを削除します。この切り替えは、JavaScriptを使用して手動で行うことも、CSSのみで自動的に行うこともできます。以下はJavaScriptでの例です:

var navbar = document.getElementById('navbar'); // ナビゲーションバー要素のIDに応じて変更してください
// ナビゲーションバーが折りたたまれた状態の場合に`.collapsed`クラスを追加
function collapseNavbar() {
  navbar.classList.add('collapsed');
}
// ナビゲーションバーが折りたたまれていない状態の場合に`.collapsed`クラスを削除
function expandNavbar() {
  navbar.classList.remove('collapsed');
}
// ナビゲーションバーの状態に応じてスタイルを切り替える
function toggleNavbar() {
  if (navbar.classList.contains('collapsed')) {
    expandNavbar();
  } else {
    collapseNavbar();
  }
}

上記のJavaScriptコードでは、ナビゲーションバー要素のIDがnavbarであることを想定しています。必要に応じて、このIDを実際のHTML要素のIDに変更してください。

これらの手順に従うと、ナビゲーションバーが折りたたまれたときと折りたたまれていないときの背景色を異なる色に変更することができます。