JavaScriptでナビゲーションメニューを実装する方法

JavaScript は、軽量で効率的で、学習と使用が簡単な特徴があるため、Web 開発で広く使用されているフロントエンド プログラミング言語です。 Web デザインにおいて、ナビゲーション メニューは、Web サイトのコンテンツをより整理してアクセスしやすくする重要なコンポーネントです。この記事では、JavaScriptを使用して簡単なナビゲーションメニューを実装する方法を紹介します。

1. HTML

まず、ナビゲーション メニューを保存するコンテナを HTML で作成する必要があります。このコンテナは、ul 要素または div 要素にすることができます。この記事では、ul 要素を使用してナビゲーション メニューを実装します。

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

2. CSS

次に、ナビゲーション メニューのスタイルを設定する必要があります。これには、メニュー項目の色、サイズ、余白などが含まれます。この記事では、マウスオーバー時のメニュー項目の背景色と、現在選択されているメニュー項目のスタイルを設定する必要があります。

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

上記のコードでは、#nav の下にナビゲーション メニューのスタイルを定義し、#nav li および #nav a の下にメニュー項目のスタイルを定義します。 float 属性を使用してメニュー項目を水平に配置し、margin 属性を使用してメニュー項目の余白を設定します。マウスがメニュー項目の上にあるときは、背景色が灰色に、テキストの色が白に変更され、メニュー項目が選択されると、背景色が黒に、テキストの色が白に変更されます。

3. JavaScript

最後に、JavaScript を使用してメニュー項目のクリック イベントを実装する必要があります。現在選択されているメニュー項目を .active スタイルに設定し、以前に選択したメニュー項目から .active スタイルを削除する必要があります。 document.getElementById() メソッドを使用してメニュー項目を取得し、classList.add() メソッドと classList.remove() メソッドを使用してスタイルを追加または削除できます。

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

上記のコードでは、まずメニュー項目とすべてのメニュー項目の親要素 #nav を取得し、次に for ループを使用して各メニュー項目にクリック イベントを追加します。メニュー項目がクリックされると、まず for ループを使用して、以前に選択したメニュー項目の .active スタイルを削除し、次に現在選択されているメニュー項目の .active スタイルを追加します。

4. 完全なコード

最後に、HTML、CSS、JavaScript コードを組み合わせて、完全なナビゲーション メニュー実装コードを取得します。

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

上記は、JavaScript を使用してナビゲーション メニューを実装するための完全なコードです。これを独自の Web サイトに適用すると、ユーザーが Web サイトのコンテンツをより快適に閲覧できるようになります。

以上がJavaScriptでナビゲーションメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。