ホームページ > 記事 > ウェブフロントエンド > HTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウン メニューを作成する方法を教えます
HTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウン メニューを作成する方法を教えます
- 云罗郡主オリジナル
- 2018-11-01 16:09:1526067ブラウズ
htmlドロップダウン メニューを作成するにはどうすればよいですか? HTML ドロップダウン メニュー コードとは何ですか?これらは、始めたばかりの初心者にとってはあまり明確ではありません。次の専門家が、HTML と CSS でドロップダウン メニューを作成する方法を教えます。
多くの人は、ナビゲーション上にマウスを置くとドロップダウン メニューが表示され、ユーザーはオプションの 1 つをクリックして別の URL にアクセスできます。 。
1: まず、メモ帳を開きます。メモ帳を使用する場合は、HTML ウィンドウの上部にある「言語」メニューを「H」に設定してください。 [推奨学習: Html5 チュートリアル ]
2: ドロップダウン メニュー コードを作成し、次のコードを入力してドロップダウン メニューのサイズと色を決定します。必ず置き換えてください。 「#」を使用する番号に置き換えます (番号が大きいほど、ドロップダウン メニューが大きくなります)。 「背景色」と「色」の値を任意の色 (または HTML カラーコード) に置き換えることもできます。
3: リンクをドロップダウン メニューに配置することを示します。リンクをドロップダウン メニューに追加することもできます。コードを入力してドロップダウン メニューにリンクを配置することもできます。
4: ドロップダウン メニューの外観を作成します。これにより、ドロップダウン メニューのサイズ、他の Web ページ要素の位置と色を決定できます。 「min-width」部分の「#」を必ず数値（例：250）に置き換え、「background-color」ヘッダーをお好みの色に変更してください。
5: ドロップダウン メニューのコンテンツに詳細を追加する場合、ドロップダウン メニューのテキストの色とドロップダウン メニュー ボタンのサイズを指定するときは、必ず「#」を置き換えてください。 " をピクセル数で指定してボタンのサイズを指定します。
6: ドロップダウン メニューのホバー操作を編集します。ドロップダウン メニュー ボタンの上にマウスを置くと、最初の「背景色」行が選択内容を変更する必要があります。ドロップダウンメニューに が表示されます。
7: 次に、ドロップダウン ボタンの名前を作成しましょう。次のコードを入力します。「名前」を目的のドロップダウン ボタンの名前 (たとえば、メニュー) に置き換えてください。
< div class = “dropdown” > < button class = “dropbtn” >名称< / button > < div class = “dropdown-content” >
eight : ドロップダウン メニューにリンクを追加します。ドロップダウン メニューの各サブオプションは、Web サイト上のページまたは外部 Web サイトのいずれかのコンテンツにリンクする必要があります。 http://www.php.cn/ リンクの名前をリンクのアドレス (引用符はそのままにします) と「名前」に置き換えてください。
コード例:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: black;
color: white;
padding: #px;
font-size: #px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: #px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: #px #px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
</div>
</div>
</body>
</html>効果は次のとおりです:
上記は、HTML ドロップダウン メニューを実行する方法です。専門家が HTML と CSS でドロップダウン メニューを作成する方法を教えます。 HTML5 オンライン マニュアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。
以上がHTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウン メニューを作成する方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。