Dalam pembuatan sajian pada sebuah website ada banyak model, salah satu nya ialah sajian Dropdown. Menu dropdown ini ialah sajian navigasi yang sangat terkenal dipakai oleh pembuat web, dalam pembuatan sajian dropdown kita sanggup memakai HTML dan CSS, cara pembuatan nya sangat mudah, pada dasar nya sajian dropdown di buat dengan HTML dari tag ordered list atau unordered list, yang lalu di olah dengan sentuhan CSS sehingga menjadi sangat berbeda dari yang asal nya hanya list. Berikut ini ialah pola sajian dropdown yang akan kita buat :
 |
| Hasil dari tutorial Cara gampang menciptakan sajian dropdown |
Gambar diatas hasil dari tutorial yang kita buat ini, gimana teman-teman tertarik untuk mencar ilmu dan menciptakan nyan.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Menu dengan HTML dan CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Konsep Dasar</a></li>
<li>
<a href="">Website Programing</a>
<ul>
<li><a href="">HTML & CSS</a></li>
<li><a href="">Pemograman PHP</a></li>
<li><a href="">Pemograman Javascript</a></li>
</ul>
</li>
<li><a href="">Web Desain</a></li>
<li><a href="">Database</a></li>
<li><a href="">Boosttrap</a></li>
</ul>
</nav>
</body>
</html>
Simpan file html tersebut dengan index.html atau terserah anda dan jalankan pada browser untuk melihat hasil pembuatan list sajian tersebut.
 |
| Hasil list HTML sebelum penambahan CSS |
Nah kalau dilihat dari hasil pada browser sajian tersebut sudah tersedia akan tetapi tampilan nya kurang menarik, untuk mempercatik tampilan dari sajian tersebut kita sanggup memakai CSS.
<style type="text/css">
nav ul{
list-style:none;
width:900px;
height:50px;
}
nav ul a{
text-decoration:none;
}
nav ul li ul{
position: relative;
margin-left: -27%;
padding-top: 16px;
width: 150px;
visibility: hidden;
}
nav ul li:hover ul{
visibility:visible;
}
nav ul li:hover{
background:#16A085;
border-right: 4px solid #b0ca93;
}
nav ul li{
float:left;
width:150px;
height:35px;
background:#075d55;
text-align:center;
padding-top:15px;
}
nav a{
color:#fff;
font-family:sans-serif;
font-size:11pt;
}
</style>
nav ul{
list-style:none;
width:900px;
height:50px;
}
nav ul a{
text-decoration:none;
}
nav ul li ul{
position: relative;
margin-left: -27%;
padding-top: 16px;
width: 150px;
visibility: hidden;
}
nav ul li:hover ul{
visibility:visible;
}
nav ul li:hover{
background:#16A085;
border-right: 4px solid #b0ca93;
}
nav ul li{
float:left;
width:150px;
height:35px;
background:#075d55;
text-align:center;
padding-top:15px;
}
nav a{
color:#fff;
font-family:sans-serif;
font-size:11pt;
}
</style>
Untuk menggabungkan file css diatas kedalam html, kita sanggup memakai cara Internal Style. Silahkan teman-teman copy code css diatas dan tempatkan pada file html yang telah teman-teman buat, letakkan diantara pembuka tag <head> dan epilog tag </head>, lalu jalankan pada web browser. Sekian tutorial Cara Praktis Membuat Menu Dropdown ini agar sanggup membantu teman-teman dalam mempelajari dan menciptakan website.
No comments:
Post a Comment