小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に簡単です。

初心者向けチュートリアルのホームページナビゲーションを例に挙げましょう

まず、大きな div_nav を記述し、その div_nav の中に「ホーム」「ルーキーノート」「ルーキーツール」「リファレンスマニュアル」などを div として含めます。 div_nav の背景色は対応する色に設定されます。

背景色設定コードは以下の通りです。

.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
色:#fff;
背景:透明 url(images/blueslate_backgroundOVER.gif) 繰り返しなし 上部中央;
}

今すぐ:

.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current

上の図のコードへの注釈は次のとおりです。

id はメニュー内の ul の li です。つまり、ナビゲーション バー内のすべての要素です。マウスを乗せると効果が現れます。

ポップアップがul要素であることを示すために最後にulが追加されます。

ここでの CSS 全体がこの ul 要素のスタイルを指定します。

簡単に言えば、ナビゲーションバー上でマウスを動かすと、

たとえば、マウスがラベル要素の上にあるときの HTML のフォント色を設定します。

a:hover{色:赤;}

a:hoverはマウスが上にあることを意味します

a:current はフォーカスを取得することを意味します。

小さな三角形も簡単にセットできます

.blue #スレートナブ
{位置:相対;
表示:ブロック;
高さ:42px;
フォントサイズ:11px;
フォントの太さ:太字;
背景:透明 url(images/blueslate_background.gif)repeat-x 左上;
フォント ファミリ:Arial、Verdana、Helvitica、sans-serif;テキスト変換:大文字;
}

「ホームページ」などの小さな div の背景画像を設定するには、background を使用します。

上記のテキストは、ラベルの上にマウスを置いたときの効果を設定するため、マウスを他のラベルの上に置いたときに、小さな三角形の背景も表示されます。

マウスを他のタブの上に移動すると:

さて、これで小さな三角形のナビゲーションが完成しました。その他の詳細は、ご自身で調整していただけます。

注: ドキュメントの名前空間はコード内で宣言されています。

<html> タグを単独で記述してもドキュメントの名前空間は宣言されませんが、 xmlns=" http://www.w3.org/1999/xhtml " を追加するとドキュメントの名前空間が宣言されます。名前空間を宣言すると、ブラウザは HTML ドキュメントのタグを解析するときにこの仕様に従います。通常の使用では、両者の間に大きな違いは感じられません。

特殊なケースは、一部のタグの解釈です。たとえば、xhtml 命名規則では、すべてのタグを厳密に閉じ、単一のタグの最後に「/」を追加する必要があります。xhtml 命名規則を使用していても、タグを記述するときに規則に従わない場合、タグを解析できない可能性があります。したがって、良い書き方の習慣としては、終了タグを追加することです。

ソースコードを添付します:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<meta name="キーワード" content=" " />
<meta name="説明" コンテンツ=" " />
<title>水平ナビゲーション</title>
<link rel="スタイルシート" href="style.css" type="text/css" />
</head>
 
<body style="text-align:center">
 
 
<p> </p>
 
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://sc.chinaz.com/" title="css メニュー" class="current">ホーム</a></li>
<li><a href="http://sc.chinaz.com/" title="css メニュー">初心者向けメモ</a></li>
<li><a href="http://sc.chinaz.com/" title="css メニュー">初心者向けツール</a></li>
<li><a href="http://sc.chinaz.com/" title="css メニュー">リファレンス マニュアル</a></li>
<li><a href="http://sc.chinaz.com/" title="css メニュー">ユーザーノート</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">テスト/試験</a></li>
<li><a href="http://sc.chinaz.com/" title="css メニュー">ローカル ブックマーク</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">ログイン</a></li>
 
</ul>
</div>
</div>
 
 
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  一般的な nginx コマンドをシェル スクリプトに組み込む方法の詳細な説明

>>:  MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

推薦する

HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...

1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。

数日前、ある要件に取り組んでいたとき、MySQL で重複レコードをクリーンアップする必要がありました...

便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...

Vue は Tencent TIM インスタント メッセージングを統合します

この記事では主に、Tencent TIM インスタント メッセージングを Vue と統合する方法を紹...

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...

VUEのデータプロキシとイベントの詳細な説明

目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

ElementUIカスタムCSSスタイルが有効にならない問題を解決する

例えば、入力ボックスがあります <el-入力 ref="mySearch"...

WeChatアプレットがユーザーの移動軌跡を記録

目次設定を追加json 構成レイヤー構成の表示論理層の構成位置追跡をオンにする録音を開始開始座標を決...

Linuxでawkを使用する方法の詳細な説明

awk を学ぶ前に、sed、grep、tr、cut などのコマンドを学んでおく必要があります。これら...

mysql スケジュールタスク (イベント イベント) の詳細な説明

1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...