HTML ナビゲーションタグ-htmlチュートリアル-php.cn

HTML にはフロントエンド技術を強調するための多くの機能があり、ナビゲーションタグは HTML5 バージョンの機能の 1 つです。以前のバージョンでは、HTML にはさまざまな機能がありましたが、HTML 5 では、ナビゲーションがグローバル属性とイベント属性をサポートしています。 HTML のタグは、ドキュメント内のナビゲーションリンクのセットです。

内のすべてのリンクが表示されるわけではありません。要素タグは、ナビゲーションリンク内のタグの主要ブロックのみを指定します。一般に、Web ページにはナビゲーションリンクに関するセクションがあり、ユーザーがサイト内を移動するために使用されます。これらのリンクは Navigation タグ内で指定されます。

構文:

それぞれの Html タグには、次のコードのような個別の構文があります: ナビゲーションタグの基本構文。

を使用しました。 HTML スタイルと CSS スタイルの両方でタグを使用することもできます。

HTML

<nav>
< a href="/"   />
-------------------
</nav>

ログイン後にコピー

CSS

nav{
--some codes—
}

ログイン後にコピー

ナビゲーションタグは HTML でどのように機能しますか?

ユーザーは、Web ページ上のタブまたはメニューをクリックした後にリクエストを送信します。別のページに移動して、サーバーの応答により結果の Web ページがユーザーに表示されます。 HTML と同様に、

などの HTML 要素を使用して、ユーザーの視点となる GUI のメニューまたはタブを分離します。タグ。

1 つの HTML ページドキュメントには、Web ページのメニュー/タブに基づく複数のリンクが含まれる場合があります。 HTML では、ナビゲーションには通常、水平ナビゲーションと垂直ナビゲーションの 2 つのタイプが含まれます。デフォルトでは、水平ナビゲーションはユーザー要件に基づいて読み込まれ、垂直ナビゲーションまたはその他のユーザー要件タイプに変換されます。

HTML ナビゲーションタグ

上の図は、ナビゲーションリンクを介したユーザー画面の基本的な理解を示しています。ユーザーがブラウザの Web ページを通じてホームリンクをクリックする場合、リンクは Html タグにすぎません。つまり、特定の Web ページを経由し、プロジェクトに応じてクライアント側のページまたはサーバー側のページになり、ユーザーのブラウザ画面にホームページが表示されます。

HTML nav タグの例

以下は HTML nav タグの例です:

例 #3

<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">&times;</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>

ログイン後にコピー

出力:

前の例と比較すると、ユーザーを引き付けるためにナビゲーションにいくつかのアニメーションを使用しています。

さまざまな種類のナビゲーションメニュー

一般に、のような HTML タグでは、いくつかの異なるタイプのメニューやイディオムを考慮する必要があります。 (アンカー)要素はすべて閉じられている必要があります。ほとんどのナビゲーションメニューはリストを使用して作成できます。場合によっては、ユーザーの依存関係に基づいてインターフェース制限が使用されることがあります。

リストベースのナビゲーションメニューは次のとおりです:

ページ内ナビゲーションメニュー
サイトナビゲーションメニュー
コンテキスト-コンテキストナビゲーションメニュー
Stemaps ナビゲーションメニュー
ページネーション

1.ページ内ナビゲーションメニュー

Web ページ上の他の異なるセクションを指す単一ページのリンクの表またはコンテンツ。

例

<nav>
<a href="/home/">Home</a> |
</nav>

ログイン後にコピー

2.サイトナビゲーションメニュー

これはおそらく、Web ページで一般的なメニュータイプです。これは、サイトの階層から選択するオプションを示すサイトまたはサブセットのカスタムまたはユーザー定義のメニュータイプです。

例

<nav>
<ul>
<li><a href="/home/">Home</a> </li>
<li><a href="/about us/">About Us</a> </li>
<li><a href="/contact us/">Contact Us</a> </li>
</nav>

ログイン後にコピー

3.コンテキストナビゲーションメニュー

これはドキュメントのコンテンツを構築するリンクであり、HTML ドキュメントの現在のページに関連する追加情報を提供します。このメニューの例としては、一部のニュース記事、銀行サイトなどがあります。 Web ページアプリケーションで目にするものには、タブまたはメニューにマウスカーソルを置いたナビゲーションパネルが含まれています。メニューのツールチップコンテンツのように表示されます。

4.サイトマップのナビゲーションメニュー

これは、ユーザーがメニューやタブで設定したページをクリックしたときにポップアップブロックのように見えるメニューです。または、新しいウィンドウやページを設定するには追加のプラグインが必要で、すべてのコンテンツが同じサイトにマップされます。サイトマップとサイト検索の両方には、HTML で提供されるさまざまな機能セットがあります。

5.ページネーション

ページネーションでは、ユーザーがメニューまたはタブをクリックした後、フロントエンド画面に大量のファイルセットが読み込まれるように、Web ページがバックエンドで設定されることがあります。このオプションを使用すると、個別のページに分割されます。ナビゲーションと比較すると、通常は同じドキュメントのバックエンドにリンクするため、同じ Web ページにさらに多くのオプションや詳細情報が表示されるという点が異なります。