Cara Membuat Navigasi Bar NavBar Dropdown Transparan HTML CSS Sederhana
Navbar atau Navigasi Bar merupakan bagian yang sangat penting dari sebuah website yang berfungsi untuk membantu pengunjung atau visitor website menjelajahi isi sebuah website dengan mudah.
Jika teman - teman menggunakan platform seperti blogger setiap template biasanya sudah menyediakan navbar, namun bukannya teman-teman lebih suka kalau mengetahui cara mengubahnya ? Berikut kode sederhana HTML untuk membuat navbar .
Kode di atas dapat diletakan di bagian body lebih tepatnya di dalam tag <body> di sini </body>.
Jika kode html di atas kita buka di browser tampilannya masih berbentuk list tanpa ada manis - manisnya. hhehe .
<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">DropdownMenu</a>
<label class="dropdown-content">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</label>
</li>
</ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">DropdownMenu</a>
<label class="dropdown-content">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</label>
</li>
</ul>
Kode di atas dapat diletakan di bagian body lebih tepatnya di dalam tag <body> di sini </body>.
Jika kode html di atas kita buka di browser tampilannya masih berbentuk list tanpa ada manis - manisnya. hhehe .
Maka kita membutuhkan CSS untuk menambahkan sisi manisnya agar terlihat lebih menarik, bisa dibilang HTML tanpa CSS seperti membuat rumah namun belum dicat masih terlihat ehem ehem.
Berikut kode CSS yang kita butuhkan untuk membuat tampilan lebih bagus dilihat.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.active {
background-color: #FF0B7B;
}
Kode di atas dapat teman - teman letakan di dalam tag <style> di sini </style> biasanya tag ini diletakan di atas tag <body> .
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.active {
background-color: #FF0B7B;
}
Kode di atas dapat teman - teman letakan di dalam tag <style> di sini </style> biasanya tag ini diletakan di atas tag <body> .
Kode di atas merupakan kode css untuk untuk memberikan pemanis pada tag html <ul> <li> </li> </ul>. Fungsi .active adalah memberikan efek apabila menu tersebut aktif efek kode background-color akan memberikan warna pada tampilannya.
Berikut kode css untuk tampilan dropdown transparan
Membuat tampilan transparan pada beberapa bagian website kita sebenarnya tidak terlalu sulit karena kita dapat memberikan kode opacity pada element yang akan kita ubah menjadi transparan.
Berikut kode css untuk tampilan dropdown transparan
.dropbutton {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0.7;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #d8d8d8}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #f9f9f9;
}
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0.7;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #d8d8d8}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #f9f9f9;
}
Membuat tampilan transparan pada beberapa bagian website kita sebenarnya tidak terlalu sulit karena kita dapat memberikan kode opacity pada element yang akan kita ubah menjadi transparan.
Kode hover berfungsi memberikan efek ketika krusos berada pada area elemen hover makan fungsi kode css yang ada kode hovernya akan aktif dan memberikan efek langsung.
Demikian beberapa informasi dari saya semoga dapat bermanfaat buat teman -teman. Terima Kasih
0 Response to "Cara Membuat Navigasi Bar NavBar Dropdown Transparan HTML CSS Sederhana "
Post a Comment