Menu merupakan sebuah Navigasi yang terdapat pada website digunakan untuk membantu pengguna dalam menampilkan sesuai halaman yang akan diperlukan. Tentunya sebuah website Navigasi sangat diperlukan agar pengguna lebih mudah menggunakan website itu sendiri, jika sebuah navigasi menyulitkan tentu akan jarang sekali pengguna mengunjungi website tersebut. Dalam kesempatan kali ini saya akan memberikan tutorial tentang cara membuat rotasi menu dengan HTML CSS, Baiklah agar tidak binggung kita lanjutkan cara pembuatannya coba disimak langkah-langkah berikut ini:
Pertama yang perlu disiapkan buatlah struktur HTML-nya seperti 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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> </head> <body> <div class="navbar">MENU <ul class="menu"> <li><a href="" class="fab fa-facebook-f"></a></li> <li><a href="" class="fab fa-instagram"></a></li> <li><a href="" class="fab fa-linkedin-in"></a></li> <li><a href="" class="fab fa-google-plus-g"></a></li> <li><a href="" class="fab fa-twitter"></a></li> <li><a href="" class="fab fa-github"></a></li> <li><a href="" class="fab fa-skype"></a></li> <li><a href="" class="fab fa-google-drive"></a></li> <li><a href="" class="fas fa-cloud"></a></li> <li><a href="" class="fas fa-rss"></a></li> </ul> </div> </body> </html> |
dalam struktur HTML diatas saya menggunakan sebuah Icon untuk menu-menu yang akan ditampilkan dan tentunya icon tersebut saya pakai Fontawesome agar lebih mudah digunakan, plugin fontawesome dipakai secara online jadi harus terkoneksi dengan internet, jika ingin menggunakan secara offline silahkan download link disini.
Langkah berikutnya tambahkan style CSS agar terlihat manis tampilan dan menarik tentunya.
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
<style> body{ background-color: #f1ff00; font-family: sans-serif; overflow: hidden; } .navbar{ width:200px; height: 200px; line-height: 200px; border-radius: 50%; background: #518cf3; margin:190px auto; position: relative; cursor: pointer; text-align: center; font-size: 2.75em; font-weight: bold; color:#f1ff00; transition: 0.24s 0.2s; } .navbar .menu{ list-style: none; padding:0; margin:0; position: absolute; top:-65px; left:-65px; border:150px solid transparent; cursor: default; border-radius: 50%; transform:scale(0); transition: transform 1.4s 0.07s; z-index: -1; } .navbar:hover .menu{ transition: transform 0.4s 0.08s, z-index 0s 0.5s; transform: scale(1); z-index: 1; } .navbar .menu li{ position: absolute; top:-95px; left:-95px; transform-origin:110px 110px; transition: all 0.5s 0.1s; } .navbar:hover .menu li{ transition: all 0.7s; } .navbar .menu li a{ width:45px; height:45px; line-height:45px; border-radius:50%; background:#518cf3; position: absolute; font-size: 59%; color:#f1ff00; transition: 0.7s; text-decoration: none; } .navbar:hover .menu li:nth-child(1){ transition-delay: 0.02s; transform: rotate(75deg); } .navbar:hover .menu li:nth-child(1) a{ transition-delay: 0.04s; transform: rotate(645deg); } .navbar:hover .menu li:nth-child(2){ transition-delay: 0.04s; transform: rotate(110deg); } .navbar:hover .menu li:nth-child(2) a{ transition-delay: 0.08s; transform: rotate(610deg); } .navbar:hover .menu li:nth-child(3){ transition-delay: 0.06s; transform: rotate(145deg); } .navbar:hover .menu li:nth-child(3) a{ transition-delay: 0.08s; transform: rotate(575deg); } .navbar:hover .menu li:nth-child(4){ transition-delay: 0.08s; transform: rotate(180deg); } .navbar:hover .menu li:nth-child(4) a{ transition-delay: 0.16s; transform: rotate(540deg); } .navbar:hover .menu li:nth-child(5){ transition-delay: 0.1s; transform: rotate(215deg); } .navbar:hover .menu li:nth-child(5) a{ transition-delay: 0.2s; transform: rotate(515deg); } .navbar:hover .menu li:nth-child(6){ transition-delay: 0.12s; transform: rotate(250deg); } .navbar:hover .menu li:nth-child(6) a{ transition-delay: 0.24s; transform: rotate(470deg); } .navbar:hover .menu li:nth-child(7){ transition-delay: 0.14s; transform: rotate(285deg); } .navbar:hover .menu li:nth-child(7) a{ transition-delay: 0.28s; transform: rotate(435deg); } .navbar:hover .menu li:nth-child(8){ transition-delay: 0.16s; transform: rotate(320deg); } .navbar:hover .menu li:nth-child(8) a{ transition-delay: 0.32s; transform: rotate(400deg); } .navbar:hover .menu li:nth-child(9){ transition-delay: 0.18s; transform: rotate(357deg); } .navbar:hover .menu li:nth-child(9) a{ transition-delay: 0.36s; transform: rotate(365deg); } .navbar:hover .menu li:nth-child(10){ transition-delay: 0.2s; transform: rotate(395deg); } .navbar:hover .menu li:nth-child(10) a{ transition-delay: 0.4s; transform: rotate(280deg); } </style> |
coba sekarang simpan kedua file HTML dan CSS ,jalankan pada browser lalu lihat hasilnya apakah seperti berikut in tampilannyai:
Demikian pembahasan artikel kali ini tentang cara membuat rotasi menu dengan HTML CSS, selamat mencoba dan semoga bermanfaat. Sampai jumpa pada artikel selanjutnya tetap semangat serta jangan lupa explore terus kemampuan sahabat semua.
Terima kasih