小さな三角形の実装コードを含む 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 文字列分割操作 (区切り文字を含む文字列のインターセプション)

推薦する

vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。

目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

HTMLの行間設定方法と問題点

<p></p> の行間隔を設定するには、style="line-h...

Nginx を使用して https ルートドメイン名への 301 リダイレクトを実装するためのサンプル コード

SEO とセキュリティを考慮して、301 リダイレクトが必要です。以下の一般的な処理には Nginx...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...

MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

MySQL リンクを表示し、異常なリンクを削除する方法

序文:データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

border-radius 値の設定に関する質問

問題記録今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のよ...

jsはシンプルな英語-中国語辞書を実装します

この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...

LinuxにComposerをインストールする方法

1. インストールスクリプト(composer-setup.php)を現在のディレクトリにダウンロー...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...