CARA MEMBUAT MENU DROPDOWN DENGAN HTML DAN CSS

byPenulis Sejati — 0


 ABANGJEFF TUTORIAL | Dalam tutorial ini Anda akan belajar bagaimana membuat menu drop-down dengan HTML dan CSS dengan cara yang sangat sederhana, dengan beberapa baris kode tanpa harus menggunakan javascript.


Langsung saja ke Scripctnya Guys


<html>

<head>

<title>Menu Desplegable</title>

<style type="text/css">

* {

margin:0px;

padding:0px;

}

#header {

margin:auto;

width:500px;

font-family:Arial, Helvetica, sans-serif;

}

ul, ol {

list-style:none;

}

.nav > li {

float:left;

}

.nav li a {

background-color:#000;

color:#fff;

text-decoration:none;

padding:10px 12px;

display:block;

}

.nav li a:hover {

background-color:#434343;

}

.nav li ul {

display:none;

position:absolute;

min-width:140px;

}

.nav li:hover > ul {

display:block;

}

.nav li ul li {

position:relative;

}

.nav li ul li ul {

right:-140px;

top:0px;

}

</style>

</head>

<body>

<div id="header">

<ul class="nav">

<li><a href="">Inicio</a></li>

<li><a href="">Servicios</a>

<ul>

<li><a href="">Submenu1</a></li>

<li><a href="">Submenu2</a></li>

<li><a href="">Submenu3</a></li>

<li><a href="">Submenu4</a>

<ul>

<li><a href="">Submenu1</a></li>

<li><a href="">Submenu2</a></li>

<li><a href="">Submenu3</a></li>

<li><a href="">Submenu4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="">Acerca de</a>

<ul>

<li><a href="">Submenu1</a></li>

<li><a href="">Submenu2</a></li>

<li><a href="">Submenu3</a></li>

<li><a href="">Submenu4</a></li>

</ul>

</li>

<li><a href="">Contacto</a></li>

</ul>

</div>

</body>

</html>

 

Pertanyaan yang sering diajukan

T: Bagaimana cara menengahkan menu secara horizontal?

Jawaban: Diasumsikan bahwa menu yang Anda miliki harus berada di tengah, karena kamitelah menambahkan lebar dan margin otomatiske header id , dalam kasus aneh bahwa menu Anda tidak berada di tengah, Anda harus mengikuti langkah-langkah berikut.

Caranya sangat sederhana, yang harus Anda lakukan adalah mengambil semua kode yang ada di dalam tag <ul class = »nav»> dan memasukkannya ke dalam tag lain, dalam hal ini saya akan menggunakan tag html5 yang disebut nav , (tag yang harus saya miliki gunakan di menu dari awal, tetapi tidak untuk membingungkan mereka, saya tidak meletakkannya) dan ke tag nav terakhir ini tambahkan dengan CSS lebar dan margin otomatis untuk memusatkannya, kodenya akan terlihat seperti ini:

<html>
<head>
<title>Menu Desplegable</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav {
width:500px; /*Le establecemos un ancho*/
margin:0 auto; /*Centramos automaticamente*/
}
 
.nav > li {
float:left;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
</style>
</head>
<body>
<div id="header">
<nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Acerca de</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</nav><!-- Aqui estamos cerrando la nueva etiqueta nav -->
</div>
</body>
</html>


Saya menyarankan Anda juga melihat: https://www.abangjeff.online/2021/01/cara-membuat-slideshow-untuk-situs.html


Sumber Artikel : falconmasters

Lebih baru Lebih lama