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