CSSレスポンシブナブバーの例
レスポンシブナビゲーションバーは純粋なCSSを介して実装されており、答えは隠されたチェックボックスとメディアクエリを使用して、モバイル側のメニューの表示動作を制御することです。 1.デスクトップ側は、フレックスレイアウトを介して実装される水平ナビゲーションメニューとして表示されます。 2.モバイル側が768px未満の場合、メニューを非表示にしてハンバーガーアイコンを表示し、ラベルから非表示のチェックボックスをトリガーします。 3.チェックステータスと〜セレクターを使用して、.nav-menuの表示と非表示を制御します。 4.ハンバーガーアイコンをクリックした後、CSS変換によりアニメーション効果が達成されます。 5.メニューでは、絶対的なポジショニングを使用して、正しいレベルで表示されるようにします。ソリューション全体はJavaScriptを必要としません。CSSに依存するインタラクティブなロジックは完全で軽量です。静的なWebサイトに適しており、最終的には完全な文構造で終わります。
レスポンシブナブバーを作成することは、最新のWebデザインで一般的な要件です。以下は、純粋なHTMLおよびCSS実装（JavaScript不要）を使用して、モバイル側のハンバーガーメニューに自動的に崩壊するCSSレスポンシブナビゲーションバーのシンプルだが実用的な例です。
✅基本的な関数
- デスクトップ：水平ナビゲーションメニュー
- モバイル：ハンバーガーアイコンに折りたたみ、クリックして垂直メニューを展開します
- CSSメディアクエリを使用した応答性
- 純粋なCSS実装（使用
:checkedチェックボックスと非表示のチェックボックス）
？ HTML構造
<！doctype html>
<html lang = "zh">
<head>
<Meta charset = "utf-8" />
<Meta name = "Viewport" content = "width = device-width、initial-scale = 1.0"/>
<title>レスポンシブナビバー</title>
<link rel = "styleSheet" href = "style.css" />
</head>
<body>
<nav class = "navbar">
<！ - ハンバーガーボタン（非表示のチェックボックス） - >
<入力型= "チェックボックス" id = "nav-toggle" class = "nav-toggle">
<label for = "nav-toggle" class = "ハンバーガー">
<span> </span>
<span> </span>
<span> </span>
</label>
<！ - ロゴ - >
<div class = "nav-logo">
<a href = "＃"> logo </a>
</div>
<！ - ナビゲーションリンク - >
<ul class = "nav-menu">
<li> <a href = "＃"> home </a> </li>
<li> <a href = "＃"> service </a> </li>
<li> <a href = "＃"> bout </a> </li>
<li> <a href = "＃">連絡先</a> </li>
</ul>
</nav>
<main>
<h1>レスポンシブナビゲーションバーへようこそ</h1>
<p>ブラウザウィンドウを狭くして、メニューの応答効果を表示します。 </p>
</main>
</body>
</html>？ CSSスタイル（style.css）
/*基本リセットとレイアウト*/
* {
マージン：0;
パディング：0;
ボックスサイズ：ボーダーボックス;
}
体 {
フォントファミリー：arial、sans-serif;
ラインハイト：1.6;
}
.navbar {
ディスプレイ：Flex;
justify-content：space-bethed;
Align-Items：Center;
バックグラウンドカラー：＃333;
パディング：1REM;
位置：相対;
}
.nav-logo a {
色：白;
フォントサイズ：1.5rem;
テキスト装置：なし;
}
.nav-menu {
ディスプレイ：Flex;
リストスタイル：なし;
マージン：0;
パディング：0;
}
.nav-menu li a {
色：白;
テキスト装置：なし;
パディング：0.8rem 1rem;
表示：ブロック;
}
.nav-menu li a：hover {
バックグラウンドカラー：＃555;
}
/*ハンバーガーメニュースタイル*/
.hamburger {
表示：なし;
フレックス方向：列;
カーソル：ポインター;
}
.hamburgerスパン{
幅：25px;
高さ：3px;
背景色：白。
マージン：3px 0;
遷移：0.3s;
}
/ *モバイルレスポンシブ（最大幅768px） */
@media（max-width：768px）{
.hamburger {
ディスプレイ：Flex;
}
.nav-menu {
表示：なし;
フレックス方向：列;
幅：100％;
位置：絶対;
トップ：100％;
左：0;
バックグラウンドカラー：＃333;
Box-Shadow：0 8px 16px RGBA（0,0,0,0.2）;
}
.nav-menu li a {
パディング：1REM;
ボーダーボトム：1pxソリッド＃444;
}
/*チェックボックスがチェックされるとメニューが表示されます*/
.nav-toggle：checked〜.nav-menu {
ディスプレイ：Flex;
}
/*オプション：ハンバーガーアイコンアニメーション*/
.nav-toggle：checked〜.hamburgerスパン：nth-child（2）{
不透明：0;
}
.nav-toggle：checked〜.hamburgerスパン：nth-child（1）{
変換：回転（45deg）翻訳（5px、5px）;
}
.nav-toggle：checked〜.hamburgerスパン：nth-child（3）{
変換：回転（-45deg）翻訳（5px、-5px）;
}
}？重要なポイントを説明してください
-
.nav-toggleは、メニューの拡張/崩壊を制御する隠されたcheckboxです。 -
label[for="nav-toggle"]は、ハンバーガーアイコンのクリック領域です。 -
~セレクターは、同じレベルの後続要素（.nav-menuなど）を選択するために使用されます。 - 画面が768px未満の場合、メディアクエリトグルレイアウト。
- JSなし：CSSの
:checked状態を使用した相互作用を有効にします。
✅利点
- 静的なWebサイトに適したシンプルで軽量
- JavaScriptに依存していない、高速負荷
- 基本的なアニメーションとインタラクティブなフィードバックをサポートします
？拡張提案
-
transitionを追加して、メニューをより自然にスライドさせます - ユーザーの好みに適応するために
prefers-reduced-motionを使用します - JavaScriptを使用して、より大きなプロジェクトでより複雑なロジックを制御する
基本的にこれはそれであり、複雑ではありませんが、詳細を無視するのは簡単です（ position: absoluteとz-indexなど）。この構造を独自のプロジェクトに統合して、レスポンシブナビゲーションをすばやく実装できます。
以上がCSSレスポンシブナブバーの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Laravel Lazy Loadingと熱心な読み込み
Jul 28, 2025 am 04:23 AM
怠zyな読み込みは、アソシエーションにアクセスするときにクエリのみであり、n 1の問題に簡単につながる可能性があります。これは、関連データが必要かどうかが判断されないシナリオに適しています。 2。（）を使用して緊急読み込みを使用して関連データをロードして、バッチ処理シナリオに適したn 1クエリを回避します。 3.緊急荷重を使用してパフォーマンスを最適化する必要があり、N 1の問題はLaraveldebugbarなどのツールを介して検出できます。モデルの属性を備えた$は、不必要なパフォーマンスオーバーヘッドを避けるために慎重に使用されます。
PHPを機械学習モデルと統合します
Jul 28, 2025 am 04:37 AM
usearestapitobridgephpandmlmodelsbyrunningthemodelinpythonviaflaskorapiandapiandcallingtfromphpusingcurlorguzzle.2.runpythosscriptsdirectlyfrompurspusingec（）orshell_exec（）
Laravel Raw SQLクエリの例
Jul 29, 2025 am 02:59 AM
Laravelは、ネイティブSQLクエリの使用をサポートしていますが、安全性を確保するためにパラメーターバインディングを優先する必要があります。 1。DB:: Select（）を使用して、SQL注入を防ぐためにパラメーターバインディングを使用して選択クエリを実行します。 2。db:: update（）を使用して更新操作を実行し、影響を受ける行の数を返します。 3。DB::挿入（）を使用してデータを挿入します。 4。db:: delete（）を使用してデータを削除します。 5。DB:: Statement（）を使用して、Create、Alterなどの結果セットなしでSQLステートメントを実行します。 6. QueryBuilderでWhereraw、SelectRaw、およびその他の方法を使用して、ネイティブ表現を組み合わせてセキュリティを改善することをお勧めします
Javaアプリケーションでメモリ使用量を最適化します
Jul 28, 2025 am 02:40 AM
EfficientDataStructureSlikEarrayLayListLinkEdlistAndPrimitiveCollectionStoreduceOverhead;
Pythonの成分演算子の例
Jul 28, 2025 am 02:57 AM
Pythonの3成分演算子は、if-elseの判断を簡潔に実装するために使用され、その構文は「value_if_trueif conditionelsevalue_if_false」です。 1.正と負の値に基づいて対応する文字列を返すなど、単純な割り当てに使用できます。 2。分母がゼロ以外であることを決定するなど、分割エラーを回避できます。 3.文字列形式の条件に応じてコンテンツを選択できます。 4.リスト派生式の異なる要素にラベルを割り当てることができます。この演算子はバイナリ分岐にのみ適しており、複数の層をネストしないでください。複雑なロジックは、従来のIF-Elif-Else構造を使用して、読みやすさを確保する必要があります。
Project ReactorとSpring WebFluxを使用したJavaでのリアクティブプログラミング
Jul 29, 2025 am 12:04 AM
レスポンシブプログラミングは、ProjectReactorおよびSpringWebFluxを介してJavaでの低レイテンシの非ブロッキングサービスを実装します。 1. ProjectReactorは、2つのコアタイプを提供します。モノとフラックスは、非同期データフローの宣言的処理をサポートし、オペレーターチェーンを介した変換、フィルター、およびその他の操作をサポートします。 2。SpringWebFluxは反応器上に構築され、2つのプログラミングモデルをサポートします：注釈と機能。 Nettyなどの非ブロッキングサーバーで実行され、多数の同時接続を効率的に処理できます。 3. WebFlux Reactorを使用すると、I/O集約型シナリオでの並行性の機能とリソースの使用率が向上し、SSEとWebSOを自然にサポートします。
CSSテーブルレイアウト修正例
Jul 29, 2025 am 04:28 AM
テーブルレイアウト：固定は、レイアウトに影響するコンテンツを避けるために、最初の行のセル幅によってテーブル列の幅を強制的に決定します。 1.テーブルレイアウトの設定：テーブル幅を修正して指定します。 2.最初の行th/tdの特定の列幅比を設定します。 3。ホワイトスペースを使用：Nowrap、Overflow：Hidden and Text-Overflow：Ellipsisを使用してテキストオーバーフローを制御します。 4。安定したレイアウトと高性能レンダリングを必要とするバックグラウンド管理、データレポート、およびその他のシナリオに適用できます。これは、レイアウトジッターを効果的に防止し、レンダリング効率を向上させることができます。
メモ帳の検索と交換は、正規表現グループに置き換えます
Jul 28, 2025 am 02:17 AM
メモ帳の正規表現キャプチャグループを使用して、テキストを効果的に再編成します。まず、交換ダイアログボックス（Ctrl H）を開き、「正規表現」として「検索モード」を選択する必要があります。 2。\ 1および\ 2を使用して、交換ボックス内の対応するグループを参照します。 3。例：「ジョンドー」という名前を「doe、john」と交換し、（\ w）\ s（\ w）を見つけ、\ 2、\ 1に置き換えます。 4。日付の形式変換2023-12-25から25/12/2023、find（\ d {4}） - （\ d {2}） - （\ d {2}）を見つけ、\ 3/\ 2/\ 1に置き換えます。 5.ログの並べ替えは、時間、レベル、ID、その他の情報を抽出できます
