Halo, jumpa lagi dengan Kami Kursus Web Design Grogol , Kali ini kami akan bagikan referensi dan tutorial mengenai Cara Membuat Menu Vertical Slide Dengan CSS3, Nah buat kalian yang bingung mau buat tampilan menu seperti apa, tidak ada salahnya untuk mencoba menu berikut, simak langkah-langkahnya dibawah ini.
Langsung saja dan ikuti apa yang kami kursus web design grogol ajarkan yah, silahkan kalian ketikan kode HTML berikut.
1 2 3 4 5 6 7 8 9 |
<nav> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> |
Setelah itu, kita percantik tampilan dengan CSS3 berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
body { background: #666; font-family: 'Lato', sans-serif; } nav { width: 15%; min-width: 200px; margin: 80px 42.5%; background: #eee; } nav ul { list-style: none; padding: 0px; } nav li { float: none; width: 100%; } nav li a { display: block; padding: 20px; position: relative; z-index: 2; text-decoration: none; color: #444; } nav li a:hover { border-bottom: 0px; color: #fff; } nav li:first-child a { border-left: 10px solid #BAC358; } nav li:nth-child(2) a { border-left: 10px solid #62BDCF; } nav li:nth-child(3) a { border-left: 10px solid #E05735; } nav li:nth-child(4) a { border-left: 10px solid #af821b; } nav li:last-child a { border-left: 10px solid #837D63; } nav li a:after { content: ""; height: 100%; left: 0; top: 0; width: 0px; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: -1; } nav li a:hover:after { width: 100%; } nav li:first-child a:after { background: #BAC358; } nav li:nth-child(2) a:after { background: #62BDCF; } nav li:nth-child(3) a:after { background: #E05735; } nav li:nth-child(4) a:after { background: #af821b; } nav li:last-child a:after { background: #837D63; } |
Kalo sudah semua diketikan, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai
Cukup mudah bukan ? Baik sampai disini tutorial dari kami kursus web design grogol mengenai Cara Membuat Menu Vertical Slide Dengan CSS3, semoga bermanfaat, amin.
Selamat mencoba 🙂