Cara Membuat Menu Horizontal dan Menu Dropdown Pada Web

Posted by TEKNIK INFORMATIKA on Saturday, 18 April 2015



Kali ini saya akan membuat menu Horizontal dan Menu Dropdown menggunakan HTML dan CSS.          


1. Pertama buat file menu.html dan buatlah kodenya seperti di bawah ini :



      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Membuat Menu Horizontal dan Menu Dropdown</title>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
        <nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Beranda</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
                                        <li><a href="#">banuaril10.blogspot.com</a></li>
</ul>
</li>
</ul>
</nav> </body>
</html>
 2. Lalu Buatlah file menu.css untuk membuat desain tampilan pada menu :
      nav ul ul {
display: none;
margin: 0px auto;
padding: 15px;
}
nav ul li:hover > ul {
 display: block;
}
nav ul {
 background: linear-gradient(#687587, #404853);
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
}
nav ul li {
 float: left;
color: white;
}
nav ul li:hover {
 background: #4b545f;
}
nav ul li:hover a {
 color: #fff;
}
nav ul li a {
 display: block;
padding: 25px 40px;
 color: white; text-decoration: none;
}
nav ul ul {
 background: #5f6975; border-radius: 0px; padding: 0;
 position: absolute; top: 100%;
}
nav ul ul li {
 float: none;
 border-top: 1px solid #6b727c;
 border-bottom: 1px solid #575f6a;
 position: relative;
}
nav ul ul li a {
 padding: 25px 40px;
 color: #fff;
}
nav ul ul li a:hover {
 background: #4b545f;
}
nav ul ul ul {
 position: absolute; left: 100%; top:0;
}

3.  Link file menu.css ke file menu.html dengan menambahkan coding berikut diantara <head> </head>,  sbb :
   <link href="menu.css"       rel="stylesheet"           type="text/css">

    simpan kedua file html dan css di folder yang sama, lalu jalankan file menu.html dan lihat hasilnya :) 

       Selamat Mencoba :)

Blog, Updated at: 06:44

0 komentar:

Post a Comment

Search This Blog

Follow This Blog

Total Pageviews