JavaScriptでナビゲーションメニューを実装する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-06 11:01:55

オリジナル

1226 人が閲覧しました

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

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>

ログイン後にコピー

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

#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 属性を使用してメニュー項目の余白を設定します。マウスがメニュー項目の上にあるときは、背景色が灰色に、テキストの色が白に変更され、メニュー項目が選択されると、背景色が黒に、テキストの色が白に変更されます。

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 スタイルを追加します。

完全なコード

最後に、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 サイトの他の関連記事を参照してください。