CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】

Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。

HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。

実装のポイント

  • nav要素： 幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフロートによるレイアウト崩れを防ぎます。
  • リンク（a要素）： display: inline-block;で横並びにし、paddingでクリックしやすい大きさを確保します。:hover擬似クラスでマウスオーバー時に背景色を変えると、操作感が分かりやすくなります。
  • 入力フィールド： 属性セレクタinput[type="text"]に対してfloat: right;を指定し、ナビゲーションバーの右端に配置します。
  • selectedクラス： 現在閲覧中のページに対応するリンクをハイライト表示するために使用します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    margin: 0px;
    margin-top: 10px;
    padding: 0px;
}
nav {
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
input[type="text"] {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 8px;
    font-size: 17px;
}
.selected {
    background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us </a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>

実行結果

上記のコードを実行すると、次のようなナビゲーションバーが表示されます。

入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】

左側には「Home」「Login」「Register」「Contact Us」「More Info」の各リンクが横並びで表示され、右端には検索用の入力フィールドが配置されます。リンクにマウスカーソルを合わせると背景色が変化し、現在選択中の「Home」は暗い紺色で強調表示されるため、ユーザーが自分のいる場所を把握しやすくなります。

このようにfloatとinline-blockを組み合わせるだけで、検索機能を備えた実用的なナビゲーションメニューを簡単に作成できます。デザインや配色は、サイトのテーマに合わせて自由にカスタマイズしてください。


  1. CSSでピル型ナビゲーションメニューを作成する方法

    CSSでピル型（カプセル型）ナビゲーションメニューを作成するには、各リンクにborder-radiusを設定して角を丸くし、マウスオーバー時や選択中のページ用のスタイルを定義します。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <title>Document</title> <style> nav { width: 100%; background-color: rgb(255, 251, 251); over

  2. HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法

    Webサイトのナビゲーションバーにログインフォームを組み込みたいケースは多くあります。HTMLとCSSだけでも、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなナビゲーションメニューを作成できます。この記事では、ナビゲーションリンクとユーザー名・パスワード入力欄を1つのバーに配置し、画面が狭くなると縦積みレイアウトに変化する実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=wi