HTMLでナビゲーションバーを作成する方法

HTML でナビゲーションバーを作成したい場合は、以下の手順に従う必要があります。これらの手順を使用すると、ナビゲーションバーを簡単に作成できます。

ステップ1： まず、テキストエディターに HTML コードを入力するか、ナビゲーションバーを作成する既存の HTML ファイルをテキストエディターで開く必要があります。

文字列から整数へ

 Make a Navigation Bar

ステップ2： ここで、バーを作成するタグ内でタグを定義する必要があります。

 You are at JavaTpoint Site.....

ステップ 3: その後、を定義する必要があります。

鬼ごっこ。ナビゲーションバーに表示する項目を定義する必要があります。

 <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....

ステップ 4: その後、タイトルタグを閉じた直後にカーソルを置く必要があります。次に、タグを定義する必要があります。ステップ 4: その後、タイトルタグを閉じた直後にカーソルを置く必要があります。次に、タグを定義する必要があります。

Javaでのcsvファイルの読み込み

 Make a Navigation Bar

ステップ5: ここで、ナビゲーションバーの位置と色の設定に使用される別の id 属性を指定する必要があります。したがって、head タグで次のコードを使用する必要があります。要件に応じてプロパティの値を変更することもできます。

 body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; }

ステップ6: その後、開始タグの直前にタグを入力する必要があります。そして、このタグも閉じる必要があります。そして最後に、HTML ファイルを保存し、そのファイルをブラウザで実行する必要があります。

 Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....

今すぐテストしてください

上記の HTML コードの出力を次のスクリーンショットに示します。