Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich ein HTML-Dropdown-Menü? So implementieren Sie das HTML-Dropdown-Menü

Wie erstelle ich ein HTML-Dropdown-Menü? So implementieren Sie das HTML-Dropdown-Menü

不言
不言Original
2018-10-19 11:42:1521450Durchsuche

Beim Durchsuchen von Websites können wir häufig die Wirkung von Dropdown-Menüs erkennen, daher müssen bei der Entwicklung von Webseiten manchmal Dropdown-Menüs verwendet werden. Der heutige Artikel wird Ihnen die Implementierung von HTML-Dropdown-Menüs vorstellen .Methode, Freunde in Not können sich darauf beziehen.

Lassen Sie uns ohne weitere Umschweife direkt zum Text übergehen~

Es gibt ein Select-Tag in HTML, mit dem Einzelauswahl- und Mehrfachauswahlmenüs erstellt werden können Wird verwendet, um die Liste der verfügbaren Optionen zu definieren.

Werfen wir einen Blick auf den spezifischen Code des HTML-Dropdown-Menüs:

<html>
<body>
<form>
<select name="cars">
<option value="city">城市</option>
<option value="hefei">合肥</option>
<option value="wuhu">芜湖</option>
<option value="nanjing">南京</option>
<option value="gaoyou">高邮</option>
</select>
</form>
</body>
</html>

Die Wirkung des HTML-Dropdown-Menüs ist wie folgt :

Wie erstelle ich ein HTML-Dropdown-Menü? So implementieren Sie das HTML-Dropdown-Menü

Zur Erläuterung: Das Select-Element ist ein Formularsteuerelement, mit dem Benutzereingaben in einem Formular akzeptiert werden können.

Das obige HTML-Dropdown-Menü wirkt zu eintönig. Als Nächstes werden wir uns mit der Verwendung von CSS befassen, um ein besser aussehendes Dropdown-Menü zu implementieren.

HTML+CSS implementiert Dropdown-Menücode:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .a{
    width: 200px;
    }
    .b{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: lightblue;
    font-size: 30px;
    }
    .c{
    height: 200px;
    width: 100px;
    display: none;
    background: gray;
    }
    .b:hover{
    background: green;
    cursor: pointer;
    }
    .a:hover .c{
    display: block;
    }
    a{
    display: block;
    text-decoration: none;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ccc;
    }
    a:hover{
    background: green;
    color: pink;
    }    
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
    <div class="c">
    <a href="#">合肥</a>
    <a href="#">南京</a>
    <a href="#">芜湖</a>
    <a href="#">高邮</a>
    <a href="#">上海</a>
    </div>
    </div>
    </body>
    </html>

Die Wirkung des Dropdown-Menüs ist wie folgt:

Wie erstelle ich ein HTML-Dropdown-Menü? So implementieren Sie das HTML-Dropdown-Menü

Erklärung: Im obigen Code wird der :hover-Selektor verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer die Maus über die Dropdown-Schaltfläche bewegt.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in den entsprechenden Spalten der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein HTML-Dropdown-Menü? So implementieren Sie das HTML-Dropdown-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn