検索ナビゲーションバー付きの CSS サンプルコード

検索ナビゲーションバー付きの CSS サンプルコード

この記事では、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 関数はランダムな色の検証コードをカプセル化します (完全なコード)

>>:  Linux環境でOpenSSL証明書を生成する

推薦する

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

MySQLカバーインデックスの詳しい説明

コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

MySQLトリガーの例の詳細な説明

目次トリガーとは何かトリガーを作成する複数の実行ステートメントを持つトリガーの作成制限と考慮事項要約...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...