HTML の水平メニュー バー

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

構文:

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

そして

要素は、以下の基本の構文です。

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

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

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

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

例 #1

コード:

<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>

• Home
• About
• Contact

サンプル出力:

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

例 #2

コード:

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

サンプル出力:

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

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

例 #3

コード:

<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>

• Home
• About
• Contact

サンプル出力:

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

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

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

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

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

例:

<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>


<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>

出力:

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

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

例:

<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>


<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>

出力:

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

水平バーのプチプチ:

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

例:

<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>


<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>

Output:

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 サイトの他の関連記事を参照してください。