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 .

<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>.

Baca juga : Membuat tampilan web sederhana menggunakan HTML

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> .

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

.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;
}

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

Silahkan berkomentar Sob tapi untuk beberapa komentar yang tidak sesuai seperti link aktif dan hal-hal yang tidak baik tidak akan ditampilkan !. Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel