CSSを使ってメニューバーを非表示・表示する方法をサンプルで解説

Web サイト開発では、メニュー バーはユーザーのナビゲーションと操作を容易にする Web サイトの重要な部分となることがよくあります。ただし、特定の状況ではメニュー バーを非表示にしたい場合があります。たとえば、モバイル向けに最適化するときにページ スペースを減らすため、またはレスポンシブな Web サイトを作成するときに、画面の小さなデバイスではメニュー バーを非表示にする必要がある場合などです。ハンバーガーボタンがクリックされただけです。この記事では、メニューバーを表示・非表示にするCSSの基本テクニックを紹介します。

1. display 属性を使用してメニュー バーの表示と非表示を制御する

display 属性は CSS の非常に基本的な属性であり、メニュー バーの表示モードを制御するために使用されます。 HTML要素。この属性には複数のパラメータがあり、block (ブロック レベル要素)、inline (インライン要素)、none (表示されない) などのいくつかの共通値が含まれます。

メニュー バーを非表示にするには、次の CSS コードをスタイル シートに追加します。

.menu {
    display: none;
}

この方法では、ページが読み込まれると、メニュー バーが非表示になります。ハンバーガーボタンがクリックされたときにメニューバーを表示したい場合は、メニューバー要素の表示属性をクリック時にブロックするように変更することで、ボタンにイベントをバインドして表示できます。コード例は次のとおりです。

HTML コード:

<div class="menu-toggle">
  <button>Toggle Menu</button>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>

CSS コード:

.menu {
  display: none;
}

/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 2em;
    box-sizing: border-box;
    z-index: 9999;
  }
}

/* 汉堡按钮样式 */
.menu-toggle button {
  background-color: #000;
  color: #fff;
  padding: 0.6em;
  border: none;
}

/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
  display: block;
}

JavaScript コード:

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

上記のように、 JavaScript の疑似クラス セレクター :active と classList 属性を使用して、ハンバーガー ボタンをクリックしたときに .active クラスを追加し、メニュー バー要素の表示属性を変更して、ハンバーガー ボタンをクリックしたときにブロックします。メニューを展開し、メニューバーの表示・非表示を実現します。

2. CSS アニメーションによるメニュー バーのスライド表示の制御

display 属性を使用して要素の表示と非表示を制御することに加えて、多くの興味深いアニメーションがあります。 CSS のテクニックは、よりスムーズな表示効果を実現するのに役立ちます。その中で、いくつかの単純な要素のトランジション効果は、CSS のトランジション属性を使用することで実現できます。

具体的には、メニューバーの表示において、メニューバー要素にトランジションエフェクトを追加して、非表示状態から表示状態に遷移させることができます。

次の CSS コードを追加します。

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 2em;
  box-sizing: border-box;
  transition: left 0.3s ease-in-out;
}

/* 展开菜单时加上移动效果 */
.menu.active {
  left: 0;
}

メニュー バー要素 .menu の位置を固定に設定して固定位置に保ち、次に左に設定します。属性を -100 % に設定します。この方法では、メニュー バーがページの左側、ユーザーの画面から隠れます。同時に、メニュー バー要素のトランジション効果を設定します。左属性が変更されると、イーズインアウトイージング効果を通じてトランジションが行われ、よりスムーズな表示効果が実現されます。

ハンバーガー ボタンがクリックされると、JavaScript コードを使用してメニュー バー要素の left 属性を -100% から 0 に変更し、同時に対応するクラス .active## を追加します。 # メニューバー要素に。コード例は次のとおりです。

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

ハンバーガー ボタンのクリック イベントでは、JavaScript の classList 属性を使用して、

.active## を切り替えることでメニュー バーの表示と非表示を制御します。 ＃ クラス。同時に、.active クラスが .menu 要素に追加されると、メニュー バー要素の left 属性が -100% から 0 に変更され、スムーズなスライドが行われます。効果は、設定されたトランジション効果エフェクトを通じて生成されます。 まとめ

Webサイト開発のプロセスにおいて、メニューバーの表示方法は検討が必要になることが多い問題です。 CSSプロパティのさまざまなテクニックを活用することで、メニューバーの非表示やスライド表示など、さまざまな表示方法を実現し、ユーザーにとってより便利な操作体験を提供します。この記事が Web サイト開発のインスピレーションとなり、より良い Web デザインの実現に役立つことを願っています。

以上がCSSを使ってメニューバーを非表示・表示する方法をサンプルで解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。