HTML の水平メニューバー-htmlチュートリアル-php.cn

HTML の水平メニューバー

WBOY

リリース： 2024-09-04 16:45:31

オリジナル

601 人が閲覧しました

HTML には、ユーザーエンドにとって強調表示された、より魅力的なものを使用するためのさまざまな機能セットがあります。スクロールバーについては前の記事ですでに説明しましたが、メニューバーの同じものと同様に、ユーザー側にさらにいくつかの機能が提供されます。一般に、メニューバーはコンテンツを分類するのに役立ち、Web ページの読みやすさを高めます。ユーザーエンドのメニューバーをより対話的にするには、最も簡単な方法が役立ちます。スクロールバーには、メニューバーと同様に水平タイプと垂直タイプの両方があり、どちらも開発者が使用する必要があります。以下の概念でさらに詳しく説明します。

構文:

水平/垂直メニューバーを使用する場合、CSS を使用して HTML ページのすべての部分にスタイルを反映する必要があります。一般に、ナビゲーションバーには、子ドキュメントまたはサブ派生ドキュメントを実装するためのベースとして標準 HTML が必要です。ナビゲーションバーまたは水平バーには基本的にリンクのリストがあるため、

そして

<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>

ログイン後にコピー

上記のコードは、水平メニューバーの基本的な構文です。

HTML の水平メニューバーの例

概念をより深く理解するために、いくつかの例を見てきました。

例 #1

コード:

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

ログイン後にコピー

サンプル出力:

HTML の水平メニューバー

上記の例では、Web ページを作成するときにメニュー項目を水平ビューで表示します。ここではユーザーがカスタマイズしたビューが行単位であるため、通常はメニュー項目のみが水平パネルに表示されます。水平方向に。すべての HTML ドキュメントで同じ CSS スタイルクラスを使用できます。

例 #2

コード:

<html>
<body>
<p style="font-family:Comic Sans MS">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</p>
</body>
</html>

ログイン後にコピー

サンプル出力:

HTML の水平メニューバー

2 番目の例は最初の例と同じですが、ここでは HTML ドキュメントで CSS スタイルを使用しません。

タグでは、フォントファミリー、幅、高さなどのいくつかの CSS スタイルを使用します

例 #3

コード:

<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>

ログイン後にコピー

サンプル出力:

HTML の水平メニューバー

いくつかの無料の水平メニュータイプ:

すべての機能は、さまざまなシナリオのためのいくつかのコレクションでした。水平メニューの一部は純粋な CSS であり、さらに応答性が高くモバイルで動作することを確認するために JavaScript を使用します。

一部の水平方向のナビゲーションは完全に機能しますが、一部の機能はスクリプトでサポートされておらず、またブラウザーの互換性の問題もあります。 Web サイトのデザインでは、水平バーはミニマルな外観に最適であり、ユーザーにシンプルなナビゲーションインターフェイススペースを提供するのにも適しています。

オレンジ色のレスポンシブ水平ナビゲーションメニュー:

これは水平メニューのタイプの 1 つで、完全に純粋な CSS スタイルを備えた軽量でミニマルなメニューです。また、メニューは応答性が高く、モバイルデバイス上で垂直メニュータイプに変換され、モバイルを使用するための小さな画面の表示をサポートします。デスクトップでは何も変更せず、Web ブラウザ画面だけで動作するだけでなく、携帯電話でも同様です。

例:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

出力:

HTML の水平メニューバー

緑色のタブ付き水平メニュータイプ:

このメニューは、タブインターフェイスの水平パネルのデザインパターンの 1 つです。これは、購入/販売製品アプリケーションなどの膨大で高価なアプリケーションを使用します。これは、エンドユーザーがさまざまなメニュー項目をクリックして非常に迅速かつ簡単にデータベースから結果をユーザーに取得するのに役立ちます。上記のタイプでは、jquery などのいくつかのスクリプトを使用しますが、ここでは HTML と CSS のみを使用するため、データがユーザー画面に迅速にロードされます。前のトピックと同じ例を見てみましょう

例:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

出力:

HTML の水平メニューバー

使用した例と同じですが、一部の CSS スタイルを変更して HTML ファイルを更新しました。マウスカーソルをタブ内に置くと、前述の緑色のテキストが自動的に強調表示されるため、マウスカーソルが別のタブを移動すると、ユーザーの選択に基づいてテキストが変化します。

水平バーのプチプチ:

このメニューバーでは、前のタイプと同じように、HTML 上で完全な CSS スタイルを使用します。さらに、border-radius プロパティを追加します。これを有効にすると、バブルタイプのように表示されます。異なる CSS スタイルを使用した同じ例と、結果を含む以下のコードのような出力が表示されます。

例:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

Output:

HTML の水平メニューバー

We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.

Conclusion

Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.

以上がHTML の水平メニューバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。