HTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウンメニューを作成する方法を教えます-htmlチュートリアル-php.cn

HTMLドロップダウンメニューを作成するにはどうすればよいですか?専門家が HTML と CSS でドロップダウンメニューを作成する方法を教えます

云罗郡主

リリース： 2018-11-02 08:58:10

オリジナル

26208 人が閲覧しました

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 でドロップダウンメニューを作成する方法を教えます