Selasa, 06 Maret 2018

Membuat Dropdown Hidangan Dengan Css

Diterbitkan Maret 06, 2018

Pada artikel kali ini aku ingin mencontohkan menciptakan dropdown sajian dengan css.
Fungsi dari dropdown sajian sendiri ialah untuk menghemat ruang pada web kita alasannya ialah terlalu banyaknya link atau teks yang ditampilkan di halaman web.
Langsung saja aku suka memberi teladan daripada bertele-tele dengan tulisan.
Lihat teladan dibawah ini bila perlu praktekkan sendiri :

Persiapan, aku akan menciptakan 2 file yaitu terdiri dari file index.html. Untuk file css nya akan terpisah dengan nama file style.css.

Untuk file index.html berikut scriptnya :

<html> <html> <head> <title> Dropdown Menu </title> <link rel="stylesheet" type="text/css" href="dropdown.css"> </head> <body> <div id="wrapper"> <div id="navMenu"> <ul> <li><a href="#"> Menu </a> <ul> <li><a href="#">Sub Menu</a></li> <li><a href="#">Sub Menu</a></li> <li><a href="#">Sub Menu</a></li> <li><a href="#">Sub Menu</a></li> <li><a href="#">Sub Menu</a></li> </ul> <li> </ul> </div> </div> <body> </html>

Untuk file style.css berikut scriptnya :

body { background:black;} #navMenu{ margin:0; padding:0; width:180px; height:30px; cursor:pointer; background-color:red; color:#ffffff; font:normal 20px/100% Georgia,Serif; text-decoration:none; outline:none; vertical-align:middle; float:left; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); vertical-align: baseline; border-radius:10px; } #navMenu:hover{ background: #d57ea5; background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); background: -moz-linear-gradient(top, #f4aacb, #e86ca4); border-radius:10px; } #navMenu ul{ margin:0; padding:0; line-height:30px; } #navMenu li{ margin:0; padding:0; list-style:none; float:left; position:relative; } #navMenu ul li a { text-align:center; font-family:"Comic Sans"; text-decoration:none; height:30px; width:180px; display:block; color:#404040; } #navMenu ul li a:hover { background: #d57ea5; background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); background: -moz-linear-gradient(top, #f4aacb, #e86ca4); border-radius:10px; } #navMenu ul li ul{ width:180px; height:auto; background:pink; box-shadow:0 1px 4px #e0e0e0; -webkit-box-shadow:0 1px 4px #e0e0e0; -moz-box-shadow:0 1px 4px #e0e0e0; border:1px solid #e0e0e0; } #navMenu ul ul{ position:absolute; visibility:hidden; } #navMenu ul li:hover ul{ visibility:visible; }

Untuk hasil, simpan kedua file tersebut kedalam satu folder. Jalankan index.html pada browser kesayangan anda. Tampilannya menyerupai berikut ini :

Pada artikel kali ini aku ingin mencontohkan menciptakan dropdown sajian dengan css Membuat Dropdown Menu Dengan CSS

File style.css hanya memperlihatkan dampak warna supaya tampilan dari dropdown sajian supaya lebih menarik.
Jika anda mungkin malas mencoba file diatas berikut aku akan berikan file index.html dan style.css secara gratis.

DOWNLOAD FILE DROPDOWN MENU CSS

Sumber http://creativitywhitoutlimits.blogspot.com