検索ナビゲーションバー付きの 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証明書を生成する