この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。 以下の例はすべてレスポンシブです。 まず、効果図を見てみましょう。 検索バーを作成する<div class="topnav"> <a class="active" href="#home">ホーム</a> <a href="#about">概要</a> <a href="#contact">お問い合わせ</a> <input type="text" placeholder="検索.."> </div> /* 上部のナビゲーションバーに黒の背景色を追加します */ .トップナビ{ オーバーフロー: 非表示; 背景色: #e9e9e9; } /* ナビゲーションバーのリンクスタイルを設定します */ .topnav { フロート: 左; 表示: ブロック; 色: 黒; テキスト配置: 中央; パディング: 14px 16px; テキスト装飾: なし; フォントサイズ: 17px; } /* ホバー時のリンクの色を変更する */ .topnav a:hover { 背景色: #ddd; 色: 黒; } /*現在選択されている要素を強調表示します*/ .topnav a.active { 背景色: #2196F3; 色: 白; } /* ナビゲーションバーの検索ボックスのスタイルを設定する*/ .topnav 入力[type=text] { フロート: 右; パディング: 6px; 境界線: なし; 上マージン: 8px; 右マージン: 16px; フォントサイズ: 17px; } /* 画面幅が 600px 未満の場合、メニュー オプションと検索ボックスは縦に積み重ねて表示されます */ @media スクリーンと (最大幅: 600px) { .topnav a, .topnav 入力[type=text] { フロート: なし; 表示: ブロック; テキスト配置: 左; 幅: 100%; マージン: 0; パディング: 14px; } .topnav 入力[type=text] { 境界線: 1px 実線 #ccc; } } CSS 検索ナビゲーション バー - 送信ボタン付き<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>初心者向けチュートリアル (runoob.com)</title> <meta name="viewport" content="width=デバイス幅、初期スケール=1"> <スタイル> * {ボックスのサイズ: 境界線ボックス;} 体 { マージン: 0; フォントファミリー: Arial、Helvetica、sans-serif; } .トップナビ{ オーバーフロー: 非表示; 背景色: #e9e9e9; } .topnav { フロート: 左; 表示: ブロック; 色: 黒; テキスト配置: 中央; パディング: 14px 16px; テキスト装飾: なし; フォントサイズ: 17px; } .topnav a:hover { 背景色: #ddd; 色: 黒; } .topnav a.active { 背景色: #2196F3; 色: 白; } .topnav .検索コンテナ { フロート: 右; } .topnav 入力[type=text] { パディング: 8px; 上マージン: 8px; フォントサイズ: 17px; 境界線: なし; } .topnav .search-container ボタン { フロート: 右; パディング: 6px; 上マージン: 8px; 右マージン: 16px; 背景: #ddd; フォントサイズ: 17px; 境界線: なし; カーソル: ポインタ; } .topnav .search-container ボタン:hover { 背景: #ccc; } @media スクリーンと (最大幅: 600px) { .topnav .検索コンテナ { フロート: なし; } .topnav a、.topnav input[type=text]、.topnav .search-container ボタン { フロート: なし; 表示: ブロック; テキスト配置: 左; 幅: 100%; マージン: 0; パディング: 14px; } .topnav 入力[type=text] { 境界線: 1px 実線 #ccc; } } </スタイル> </head> <本文> <div class="topnav"> <a class="active" href="#home">ホーム</a> <a href="#about">概要</a> <a href="#contact">お問い合わせ</a> <div class="検索コンテナ"> <フォームアクション="/action_page.php"> <input type="text" placeholder="検索.." name="検索"> <button type="submit">送信</button> </フォーム> </div> </div> <div style="padding-left:16px"> <h2>レスポンシブ検索メニュー</h2> <p>ナビゲーション バーに検索ボックスがあります。 </p> <p>効果を確認するには、ブラウザ ウィンドウのサイズを変更してください。 </p> </div> </本文> </html> CSS 検索ナビゲーションバー - 検索アイコン付き<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>初心者向けチュートリアル (runoob.com)</title> <link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <スタイル> * {ボックスのサイズ: 境界線ボックス;} 体 { マージン: 0; フォントファミリー: Arial、Helvetica、sans-serif; } .トップナビ{ オーバーフロー: 非表示; 背景色: #e9e9e9; } .topnav { フロート: 左; 表示: ブロック; 色: 黒; テキスト配置: 中央; パディング: 14px 16px; テキスト装飾: なし; フォントサイズ: 17px; } .topnav a:hover { 背景色: #ddd; 色: 黒; } .topnav a.active { 背景色: #2196F3; 色: 白; } .topnav .検索コンテナ { フロート: 右; } .topnav 入力[type=text] { パディング: 6px; 上マージン: 8px; フォントサイズ: 17px; 境界線: なし; } .topnav .search-container ボタン { フロート: 右; パディング: 6px 10px; 上マージン: 8px; 右マージン: 16px; 背景: #ddd; フォントサイズ: 17px; 境界線: なし; カーソル: ポインタ; } .topnav .search-container ボタン:hover { 背景: #ccc; } @media スクリーンと (最大幅: 600px) { .topnav .検索コンテナ { フロート: なし; } .topnav a、.topnav input[type=text]、.topnav .search-container ボタン { フロート: なし; 表示: ブロック; テキスト配置: 左; 幅: 100%; マージン: 0; パディング: 14px; } .topnav 入力[type=text] { 境界線: 1px 実線 #ccc; } } </スタイル> </head> <本文> <div class="topnav"> <a class="active" href="#home">ホーム</a> <a href="#about">概要</a> <a href="#contact">お問い合わせ</a> <div class="検索コンテナ"> <フォームアクション="/action_page.php"> <input type="text" placeholder="検索.." name="検索"> <button type="submit"><i class="fa fa-search"></i></button> </フォーム> </div> </div> <div style="padding-left:16px"> <h2>レスポンシブ検索メニュー</h2> <p>ナビゲーション バーに検索ボックスがあります。 </p> <p>効果を確認するには、ブラウザ ウィンドウのサイズを変更してください。 </p> </div> </本文> </html> これで、検索ナビゲーション バーの CSS サンプル コードに関するこの記事は終了です。CSS 検索ナビゲーション バーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...
以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...
今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...
ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...
1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...
HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...
目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...
序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...
序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...