HTML の水平メニュー バー
Sep 04, 2024 pm 04:45 PM
HTML には、ユーザーエンドにとって強(qiáng)調(diào)表示された、より魅力的なものを使用するためのさまざまな機(jī)能セットがあります。スクロール バーについては前の記事ですでに説明しましたが、メニュー バーの同じものと同様に、ユーザー側(cè)にさらにいくつかの機(jī)能が提供されます。一般に、メニュー バーはコンテンツを分類するのに役立ち、Web ページの読みやすさを高めます。ユーザーエンドのメニューバーをより対話的にするには、最も簡(jiǎn)単な方法が役立ちます。スクロール バーには、メニュー バーと同様に水平タイプと垂直タイプの両方があり、どちらも開(kāi)発者が使用する必要があります。以下の概念でさらに詳しく説明します。
構(gòu)文:
水平/垂直メニュー バーを使用する場(chǎng)合、CSS を使用して HTML ページのすべての部分にスタイルを反映する必要があります。一般に、ナビゲーション バーには、子ドキュメントまたはサブ派生ドキュメントを?qū)g裝するためのベースとして標(biāo)準(zhǔn) HTML が必要です。ナビゲーション バーまたは水平バーには基本的にリンクのリストがあるため、
- 要素は、以下の基本の構(gòu)文です。
<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>
上記のコードは、水平メニュー バーの基本的な構(gòu)文です。
HTML の水平メニュー バーの例
概念をより深く理解するために、いくつかの例を見(jiàn)てきました。
例 #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>
サンプル出力:
上記の例では、Web ページを作成するときにメニュー項(xiàng)目を水平ビューで表示します。ここではユーザーがカスタマイズしたビューが行単位であるため、通常はメニュー項(xiàng)目のみが水平パネルに表示されます。水平方向に。すべての 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>
サンプル出力:
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>
サンプル出力:
いくつかの無(wú)料の水平メニュー タイプ:
すべての機(jī)能は、さまざまなシナリオのためのいくつかのコレクションでした。水平メニューの一部は純粋な CSS であり、さらに応答性が高くモバイルで動(dòng)作することを確認(rèn)するために JavaScript を使用します。
一部の水平方向のナビゲーションは完全に機(jī)能しますが、一部の機(jī)能はスクリプトでサポートされておらず、またブラウザーの互換性の問(wèn)題もあります。 Web サイトのデザインでは、水平バーはミニマルな外観に最適であり、ユーザーにシンプルなナビゲーション インターフェイス スペースを提供するのにも適しています。
オレンジ色のレスポンシブ水平ナビゲーション メニュー:
これは水平メニューのタイプの 1 つで、完全に純粋な CSS スタイルを備えた軽量でミニマルなメニューです。また、メニューは応答性が高く、モバイル デバイス上で垂直メニュー タイプに変換され、モバイルを使用するための小さな畫面の表示をサポートします。デスクトップでは何も変更せず、Web ブラウザ畫面だけで動(dòng)作するだけでなく、攜帯電話でも同様です。
例:
<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>
出力:
緑色のタブ付き水平メニュー タイプ:
このメニューは、タブ インターフェイスの水平パネルのデザイン パターンの 1 つです。これは、購(gòu)入/販売製品アプリケーションなどの膨大で高価なアプリケーションを使用します。これは、エンドユーザーがさまざまなメニュー項(xiàng)目をクリックして非常に迅速かつ簡(jiǎn)単にデータベースから結(jié)果をユーザーに取得するのに役立ちます。上記のタイプでは、jquery などのいくつかのスクリプトを使用しますが、ここでは HTML と CSS のみを使用するため、データがユーザー畫面に迅速にロードされます。前のトピックと同じ例を見(jiàn)てみましょう
例:
<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>
出力:
使用した例と同じですが、一部の CSS スタイルを変更して HTML ファイルを更新しました。マウス カーソルをタブ內(nèi)に置くと、前述の緑色のテキストが自動(dòng)的に強(qiáng)調(diào)表示されるため、マウス カーソルが別のタブを移動(dòng)すると、ユーザーの選択に基づいてテキストが変化します。
水平バーのプチプチ:
このメニュー バーでは、前のタイプと同じように、HTML 上で完全な CSS スタイルを使用します。さらに、border-radius プロパティを追加します。これを有効にすると、バブル タイプのように表示されます。異なる CSS スタイルを使用した同じ例と、結(jié)果を含む以下のコードのような出力が表示されます。
例:
<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:
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 の水平メニュー バーの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8639
17
1785
16
1729
56
1581
29
1445
31
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
HTML5サーバーセントイベントでの再接続とエラーの処理。
Jul 03, 2025 am 02:28 AM
HTML5SSEを使用する場(chǎng)合、再接続とエラーに対処する方法には次のものが含まれます。1。デフォルトの再接続メカニズムを理解します。 EventSourceは、デフォルトで接続が中斷されてから3秒後に再試行します。再試行フィールドを介して間隔をカスタマイズできます。 2.接続障害または解析エラーに対処するためにエラーイベントを聞いて、自動(dòng)再接続に依存しているネットワークの問(wèn)題、サーバーエラーが手動(dòng)で再接続を遅らせる、認(rèn)証障害の更新トークンなど、対応するロジックを?qū)g行し、実行するロジックを?qū)g行します。 3.接続の手動(dòng)での閉鎖と再構(gòu)築、再試行時(shí)間の最大數(shù)を設(shè)定するなど、再接続ロジックを積極的に制御し、ナビゲーターを組み合わせてネットワークステータスを判斷して再試行戦略を最適化します。これらのメジャーは、アプリケーションの安定性とユーザーエクスペリエンスを改善できます。
最新のページの正しいHTML5 Doctypeを宣言します。
Jul 03, 2025 am 02:35 AM
Doctypeは、ページを解析するために使用するHTML標(biāo)準(zhǔn)をブラウザに伝えるステートメントです。最新のWebページは、HTMLファイルの先頭に記述するだけです。その機(jī)能は、ブラウザが奇妙なモードではなく標(biāo)準(zhǔn)モードでページをレンダリングし、その前にスペースやコメントがない最初の行に配置する必要があることを確認(rèn)することです。それを書(shū)く正しい方法は1つだけであり、古いバージョンやその他のバリアントを使用することはお?jiǎng)幛幛筏蓼护蟆?charset、viewportなどのその他は、部分的に配置する必要があります。
HTML屬性を使用したクライアント側(cè)フォーム検証の実裝。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1）userequedtoeenforcemandatoryfields.2）validateemailsandurlswitttributeslikemailorurl、orusepatternwithregexforcustomformats.3）
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動(dòng)的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無(wú)効にする屬性を介して無(wú)効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
CSSとJavaScriptをHTML5構(gòu)造と効果的に統(tǒng)合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥當(dāng)な読み込み順序、デカップリング設(shè)計(jì)と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長(zhǎng)する構(gòu)造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問(wèn)題を回避する必要があります。 3. JavaScriptは、前に導(dǎo)入され、Deferまたは非同期を使用して非同期にロードすることをお?jiǎng)幛幛筏蓼埂?4. 3つの間の強(qiáng)い依存性を減らし、データ - *屬性とクラス名制御ステータスを介して動(dòng)作を促進(jìn)し、統(tǒng)一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協(xié)力することができます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問(wèn)題に注意してください：無(wú)効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開(kāi)発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
新しいHTML5メソッド（FormData）を使用してフォームデータを送信する
Jul 08, 2025 am 02:28 AM
HTML5のFormData APIを使用してフォームデータを送信する方が便利です。 1.名前屬性を持つフォームフィールドを自動(dòng)的に収集したり、データを手動(dòng)で追加したりできます。 2.ファイルのアップロードに適したMultiPart/Form-Data形式での送信をFetchまたはXmlhttpRequestを介してサポートします。 3.ファイルを処理する場(chǎng)合、FormDataにファイルを追加してリクエストを送信する必要があります。 4.同じ名前のフィールドが上書(shū)きされ、JSON変換とネスト構(gòu)造を処理する必要はないことに注意してください。
