ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウン メニューを作成する方法を教えます
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 サイトの他の関連記事を参照してください。