Cara Membuat Menu Navigasi Dropdown Simple Tanpa Edit Html

Cara Buat Menu Navigasi Dropdown Tanpa Edit Html - Menu navigasi mempunyai peran penting sebagai alat untuk mempermudah bagi pengunjung website/blog mengakses halaman-halaman penting dan informasi-informasi penting yang tidak semuanya bisa ditampilkan pada halaman depan website/blog.

Kali ini saya ingin berbagi cara membuat menu navigasi dropdown simple. Script ini saya dapatkan dari sumber tutorial w3schools.com. Sebelum saya share di sini, saya telah berusaha memahami script ini secara otodidak. Karena memang saya tidak mempunyai basic pendidikan formal yang terkait.

Contoh tampilan menu navigasi dropdown :

Langsung saja, berikut script Menu Navigasi Dropdown Simple tanpa edit Html :

<style>

.navbar {
    overflow: hidden;
    background-color: #f1f1f1;
    font-family: Arial;
}

.navbar a {
    float: left;
    font-size: 14px;
    color: #555;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 14px;   
    border: none;
    outline: none;
    color: #555;
    padding: 11px 16px;
    background-color: inherit;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: green;color:white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: green;
}

.dropdown:hover .dropdown-content {
    display: block;
}

</style>

<div class="navbar">
<a href="">Home</a>
<a href="">Menu 1</a>
<a href="">Menu 2</a>

<div class="dropdown">
     <button class="dropbtn" >Menu 3
          <i class="fa fa-caret-down"></i>
     </button>
         <div class="dropdown-content">
               <a href="">SubMenu 3-1</a>
               <a href="">SubMenu 3-2</a>
               <a href="">SubMenu 3-3</a>
        </div>
</div>
</div>


Source : 
https://www.w3schools.com/
 

Demikian artikel mengenai Cara Membuat Menu Navigasi Dropdown Simple tanpa edit Html yang bisa saya bagikan kepada sobat blogger yang mungkin masih ada yang membutuhkan. "Semoga bermanfaat"