JavaScriptの隠しメニュー-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptの隠しメニュー

王林

May 16, 2023 am 09:50 AM

JavaScripthiddenmenu

このデジタル時代において、Web サイトは人々が情報を取得しコミュニケーションを図るための重要な方法の 1 つとなっています。ユーザーエクスペリエンスを向上させるために、Web サイトのデザインでは対話性と実用性がますます重視されています。このため、メニューバーのデザインもWebサイトデザインの重要な部分となっています。しかし、メニューバーは非常に煩雑でページスペースを多く占有し、ユーザーに不便や圧迫感を与える場合があります。したがって、隠しメニューの出現は、デザイナーにとってこの問題を解決する効果的な方法の 1 つになりました。

隠しメニューは、ユーザーが必要ないときは非表示にし、必要に応じて展開することができます。このように、メニューを非表示にすると、ページのスペースが節約されるだけでなく、情報をより適切に分類できるようになります。そのため、隠しメニューを備えたウェブサイトが増えています。隠しメニューを実装するには様々な方法がありますが、本記事ではJavaScriptをベースに隠しメニューを実装する方法を紹介します。

1. HTML 構造

まず、以下に示すように、ページ内にメニューバーを定義する必要があります:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

ログイン後にコピー

これは、4 つのオプションを含む単純なメニューバーです。 : ホーム、ブログ、仕事、連絡先。このメニューバーを非表示にするために JavaScript を使用します。

2. CSS スタイル

メニューを非表示にする前に、最初に CSS スタイルを定義する必要があります。次のようにメニュー項目の表示属性を非表示にできます:

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
}

nav ul li {
    margin:0 10px;
}

nav ul li a {
    color:#333;
    text-decoration:none;
}

.hidden-menu {
    display:none;
}

ログイン後にコピー

これらの CSS スタイルは、メニュー項目のスタイルを設定し、メニューを非表示にするために使用されます。このうち、非表示メニューのスタイルはdisplay:noneで、これがメニューを非表示にする鍵となります。

3. JavaScript の実装

ここで、JavaScript を使用して隠しメニューの実装を開始できます。メニューバーにボタンを追加する必要があります。ユーザーがこのボタンをクリックすると、メニューバーが消えます。ボタンをクリックした後、JavaScriptを通じてメニューバーの表示状態を切り替えます。この関数を実装するには、JavaScript の addEventListener メソッドを使用してボタンクリックイベントをリッスンする必要があります。

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button id="menu-button">Menu</button>
</nav>

ログイン後にコピー

メニューバーコードでは、button 要素を追加し、その id 属性を「menu-button」に設定しました。これで、JavaScript コードの記述を開始できます。このボタン要素を取得し、ボタンがクリックされたときにメニューバーの表示状態を切り替える必要があります。このステップは、次のコードで完了できます。

const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");

button.addEventListener("click", () => {
    menu.classList.toggle("hidden-menu");
});

ログイン後にコピー

この JavaScript コードは、ボタン要素とメニューバー要素を取得し、ボタンがクリックされたときにメニューバーの状態を切り替えるために使用されます。 classList.toggle メソッドを使用して、メニューバーのクラス属性を切り替えて、メニューバーの表示と非表示を切り替えます。

4. CSS スタイルを調整する

コードが完成したら、非表示メニューの効果が実際のニーズにより一致するように CSS スタイルを調整する必要があります。デフォルトでは、メニューバーの初期状態は非表示になっており、ユーザーがボタンをクリックした後にのみ表示されます。したがって、メニューバーのデフォルト状態を調整する必要があります。以下に示すように、メニューバーの表示プロパティを none に設定して、メニューバーがデフォルトで非表示になるように設定するだけです。

nav ul {
    display:none;
    flex-direction:row;
    justify-content:flex-end;
}

.hidden-menu {
    display:flex;
}

ログイン後にコピー

このようにして、ユーザーが Web ページをロードすると、メニューバーが表示されます。デフォルトは非表示であり、ユーザーがボタンをクリックした後にのみ表示されます。

5. 実装効果

これで、JavaScript 隠しメニューの実装が完了しました。次に、実装の効果を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript隐藏菜单</title>
    <style>
        nav ul {
            display:none;
            flex-direction:row;
            justify-content:flex-end;
            list-style:none;
            margin:0;
            padding:0;
        }

        nav ul li {
            margin:0 10px;
        }

        nav ul li a {
            color:#333;
            text-decoration:none;
        }

        .hidden-menu {
            display:flex;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button id="menu-button">Menu</button>
    </nav>
    
    <script>
        const button = document.getElementById("menu-button");
        const menu = document.querySelector("nav ul");
        
        button.addEventListener("click", () => {
            menu.classList.toggle("hidden-menu");
        });
    </script>
</body>
</html>

ログイン後にコピー

この例では、ユーザーが Web ページをロードすると、メニューバーはデフォルトで非表示になります。次の図に示すように、メニューバーはユーザーがボタンをクリックした後にのみ表示されます。

JavaScriptの隠しメニュー

ボタンを再度クリックすると、メニューバーは非表示に戻ります。州。

6. 拡張アプリケーション

この方法により、単純な非表示メニュー効果を実現できます。ただし、メニューバーにオプションが多すぎると、非表示のメニューがニーズを完全に満たすことができなくなりますが、現時点ではレスポンシブデザインを使用してこの問題を解決できます。レスポンシブデザインにより、デバイスごとに異なるメニューバーを表示できます。たとえば、携帯電話では、ドロップダウンメニューを使用してすべてのオプションを表示できます。この方法により、さまざまなデバイスのニーズに適切に適応でき、ユーザーエクスペリエンスが向上します。

以上がJavaScriptの隠しメニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。