Tutorial Membuat Menu Dropdown Dengan Tampilan CSS

Teknotes.idMenu adalah menu yang mempunyai anak, yang berisikan menu-menu lain yang saling berhubungan dengan menu utama yang ditampilkan menurun ke bawah.

Jika menu utama didekati atau diklik maka menu yang berada di dalam menu utama akan muncul. Menu dropdown sangat berfungsi untuk mengurangi banyaknya menu atau meminimalisir space yang ditampilkan dimain menu.

Situs-situs besar biasanya menggunakan menu ini, karena menu ini sangat populer pada website. Berikut ini adalah artikel tentang Tutorial Membuat Menu Dropdown Dengan Tampilan CSS

Daftar Isi

1. Index.html

Copy paste script dibawah ini lalu simpan dengan nama index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Membuat Menu Dropdown - EKNotes | Teknotes.id</title>

        <!---================Assets=====================-->
    <link href="style.css" rel="stylesheet" >
        <!---================End Assets=====================-->
</head>
<body>
<nav id="menu">
     <ul>
        <div id="heading"><br>
            <a href="index.html"><img src="logo.png" width="170" height="60" ><i></i></a></li> 
        </div>
        <li><a href="#"> Menu 1</a></li>
    <li class="dropdown"><a href="#">Menu 2</a>
      <ul class="isi-dropdown">
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
      </ul>
    </li>
    <li><a href="#"> Menu 3</a></li>
        <li><a href="#"> Menu 4</a></li>
    <li class="dropdown"><a href="#"<Menu 5</a>
      <ul class="isi-dropdown"?
        <li><a href="#"<Sub Menu 1</a></li>
        <li><a href="#"<Sub Menu 2</a></li>
        <li><a href="#"<Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
      </ul>
    </li>
    </ul>
</nav>
</body>

</html>

 

2. Style CSS

Copy paste script di bawah ini kemudian simpan dengan nama style.css

*{
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 14px;
    font-family: verdana;

}
#heading{
    float: left;
    width: 640px;
}
#heading a {
    line-height: 65px;
    text-decoration: none;
    padding-left: 60px;
    color:#0000FF;
    font-family: aardvark cafe;
    font-size: 40px;
}
#menu {
    background:#C0C0C0;
    width: 100%;
    height: 65px;
    margin: 0px;
    padding: 0px;
    
}
#menu ul {
    list-style: none;

}
#menu ul li {
    float: left;
    line-height: 65px
}
#menu ul li a {
    float:left; 
    width:100px; 
    display:block; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
}
#menu ul ul {
    display:none; 
    list-style:none; 
    position:absolute; 
    background-color:#26C4C2;
    float: none;
    top:65px; 
    width:190px;
}
#menu ul li a:hover {
    background-color:#2E9EA2; 
    display:block;
}
#menu ul li:hover ul {
    display:block;
}
#menu ul ul li a {
    display:block;
    padding-left:30px; 
    text-align:left; 
    width:160px;
    height: 60px;
    line-height: 60px;
}
#menu ul ul li a:hover {
    color:#fff;
}

3. Tampilan

Tutorial Membuat Menu Dropdown Dengan Tampilan CSS

Kesimpulan

Untuk gambar kamu bisa menggunakan gambar kamu sendiri. Demikian artikel tentang Tutorial Membuat Menu Dropdown Dengan Tampilan CSS. Jika ada saran silahkan komentar. Semoga Bermanfaat

by Mr M
Hi! I am Owner and Writer at Teknotes.id. I love WordPress, Graphic Designer, Technology, Blogging, and Programming. I will help you making some technically being easy to understand :)

Tinggalkan komentar