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

CSSドロップダウンメニュー

今日、ドロップダウンメニューは、ほとんどの最新のWebサイトに共通の機能です。これらのメニューを使用すると、よりカスタマイズされたナビゲーション機能を作成できるため、ユーザーはWebサイトで探しているコンテンツを簡単に見つけることができます。

HTMLに加えてCSSを使用して、ユーザーがドロップダウンのメニューラベルにカーソルを合わせたときにのみコンテンツを表示するドロップダウンメニューを作成できます。

このチュートリアルでは、CSSでドロップダウンメニューを作成する方法を例を挙げて説明します。このチュートリアルを読み終えると、独自のドロップダウンメニューを作成するために必要なツールとコードが完成します。

CSSドロップダウンメニュー

HTMLには、ドロップダウンメニューを作成するための特定のタグはありません。

ただし、CSSを使用すると、ユーザーがメニューにカーソルを合わせたときにテキストまたはリンクのリストを表示するメニューを作成できます。したがって、このチュートリアルでは、HTMLとCSSの両方を利用してドロップダウンメニューを作成します。

地元のバドミントンクラブから、クラブに関する情報をオンラインで共有するためのWebサイトを作成するように依頼されました。このウェブサイトには、クラブ、その歴史、および参加方法に関するいくつかのページが含まれます。

クラブは、ユーザーがメニューにカーソルを合わせたときにトリガーされるドロップダウンメニューを作成できるかどうかを尋ねてきました。このメニューには、機器、入門、およびメンバーシップ情報の3つのページのリストが表示されます。このメニューのラベルは「新規メンバー」である必要があります。

ドロップダウンメニューの例

CSSでこのドロップダウンメニューを作成する方法を見てみましょう。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

ドロップダウンメニューを作成するには、最初にHTMLで基本的なメニューを作成します。このコードを使用してこれを行うことができます：

<div class="menu">
	<button class="dropdown_button">New Members</button>
	<div class="content">
		<a href="equipment.html">Equipment</a>
		<a href="gettingstarted.html">Getting Started</a>
		<a href="membership.html">Membership Information</a>
	</div>
</div>

私たちのコードには、次のものがあります。

コードは次を返します：

CSSドロップダウンメニュー

これまでのところ、ドロップダウンメニューにスタイルを追加していないため、プレーンHTMLで表示されます。バドミントンクラブのウェブサイトのドロップダウンメニューのスタイルを設定するために使用するコードは次のとおりです。

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

私たちのコードは次を返します：

[Code result here]

コードがどのように機能するかを分析してみましょう。

dropdown_button class ドロップダウンボタンのスタイルを設定するために使用されます。このコードでは、ボタンの背景色を薄緑に設定し、ボタンのテキストの色を白に変更し、ボタンの周囲に10ピクセルのパディングを追加し、ボタンのフォントサイズを15ピクセルに設定して、周囲の境界線を削除します。ボタン。

コンテンツクラスは、ドロップダウンメニューのコンテンツのスタイルを格納します。このクラスはデフォルトで非表示になっており（display：noneを使用）、背景は明るい灰色です。また、コンテンツクラスを使用する要素の最小幅は150pxであり、要素は絶対的に配置されます。コンテンツクラスのx-indexも1であるため、Webページ上の他のすべての要素の上に表示されます。

メニュークラスには、メニュー全体のスタイルが格納されます。このコードでは、<div class=”menu”>のコンテンツを配置します。 Webページ上の他の要素に関連するタグ。また、要素をインラインブロックコンテナとして表示するインラインブロックスタイルを使用してメニューを表示します。

.content a styleは、ドロップダウンメニューのリンクのスタイルを設定するために使用されます。このスタイルは、リンクからすべての下線を削除し（text-decoration：none;を使用）、各リンクをブロックスタイルで表示し、各リンクの色を黒に設定し、各リンクの周囲のパディングを16pxに設定します。

コードの最後で、.content a：hoverルールを使用して、ユーザーがカーソルを使用してドロップダウンメニューのリンクにカーソルを合わせたときに何が起こるかを定義します。この場合、ユーザーがメニューのリンクにカーソルを合わせると、リンクの背景色が明るい灰色（＃f7f7f7）に変更されます。

また、ユーザーがメニューにカーソルを合わせたときにメニューのコンテンツをブロックとして表示するルール.menu：hover.contentを指定しました。

CSS：hoverセレクターがどのように機能するかについて詳しく知りたい場合は、CSS：hoverセレクターガイドをお読みください。

右のドロップダウンメニュー

上記の例では、画面の左側に表示されるHTMLとCSSを使用してドロップダウンメニューを作成しました。ただし、ドロップダウンメニューを画面の右側に表示することもできます。

これを実現するには、上記のコードに次のCSSルールを適用できます。

.content {
	right: 0;
}

このルールは、ドロップダウンとその内容を画面の右側に移動します。

結論

HTMLを使用して、ドロップダウンメニューの基本構造を作成できます。次に、CSSを使用してスタイルを適用し、完全で見た目に美しいドロップダウンメニューを作成できます。

このチュートリアルでは、例を参照して、HTMLとCSSを使用してドロップダウンメニューを作成する方法について説明しました。この記事で説明したコードを使用すると、HTMLとCSSで独自のドロップダウンメニューを作成できます。


  1. CSSImageSpriteを使用したナビゲーションメニューの作成

    画像スプライトは、サイトの読み込み時間を短縮するhttpリクエストの数を減らすために使用されます。 以下は、CSS画像スプライトを使用してナビゲーションメニューを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    margin: 0px; } span {    

  2. Tkinterを使用したドロップダウンメニューの作成

    ナビゲーションは、美的な方法でユーザーエクスペリエンスを向上させるため、アプリケーションの最も重要な部分です。 Tkinterを使用すると、メニューとサブメニューを非常に効率的に作成できます。 Tkinterにはメニューを作成するための組み込み関数があり、これらは別のtkinterウィジェットまたはウィンドウで呼び出すことができます。 Tkinter.Menu モジュールは、Menu-itemsにいくつかのプロパティを提供します。これらのプロパティの一部は、ボタンのラベル付け、ボタンの切り替え、カスケードプロパティを使用したサブメニューの追加などに使用されます。 この記事では、 tki