Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Cara Membuat Menu Roda CSS3

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Tidak ada cara yang lebih baik untuk belajar CSS3 daripada membuat tangan Anda kotor pada proyek yang sebenarnya dan itulah yang akan kita lakukan. Saya akan mengajari Anda cara membuat menu roda CSS3 yang luar biasa dan berlapis menggunakan beberapa teknik CSS pemula dan lanjutan. Jadi pisahkan editor teks atau IDE favorit Anda dan mari mulai dengan beberapa keajaiban CSS3!

Hari ini Anda akan belajar cara membuat permen tongkat dari berbagai gaya dan variasi warna yang tersedia. Anda akan menerima semua variasi dalam file sumber. Juga sebagai bonus tambahan, saya telah menambahkan sedikit Javascript opsional sehingga Anda dapat memutar gambar Anda tergantung pada hovered menu item. File sumber bahkan dilengkapi dengan dokumentasinya sendiri!

Catatan: Dukungan untuk IE terbatas saat ini. Kita sebagian besar akan melalui ini dengan tujuan mendorong amplop dengan apa yang bisa dilakukan pada CSS3... tetapi seperti semua hal di ujung kepraktisan, itu berarti mengorbankan sedikit stabilitas. Kita akan membahas topik IE di akhir tutorialnya!


Tutorial Video

Kami menawarkan tutorial ini dalam dua format berbeda hari ini: Video serta tutorial tertulis lengkap di bawah ini. Ikuti bersama dengan metode pembelajaran mana pun yang Anda sukai (atau keduanya!) Dan kita akan membuat Anda sampai akhir dalam waktu singkat!


Tutorial Tertulis

Langkah demi langkah tutorial tertulis di bawah ini. Pastikan juga untuk mengambil sumber yang dapat diunduh sepenuhnya!


Langkah 1: Layers

Hal pertama yang ingin dilakukan adalah membuat beberapa layer yang akan saling tumpang tindih dan tetap di tempatnya sambil menggunakan kode sesedikit mungkin. Sangat penting untuk tidak mengisi kode Anda dengan banyak mengasapi dan tidak membuat banyak
elemen mengapung yang tidak perlu atau diposisikan mutlak, jadi kita akan mencoba untuk tetap relatif sebanyak mungkin.

Kode

Seperti yang Anda lihat, kode ini cukup mudah. Kita pada dasarnya telah menumpuk satu layer di atas yang lain dan dengan cara ini mereka akan dapat menahan posisi mereka.

Selanjutnya kita ingin menambahkan gambar ke tengah roda, atau tetesan air mata dalam kasus ini. Untuk melakukan itu kita cukup menambahkan kode berikut di antara kelas wrap4 dan kelas pelengkap. Ini akan mengunci gambar di tengah kanvas. Kita hanya akan menggunakan gambar Rockable untuk yang satu ini karena sangat mengagumkan!

Sekarang kita ingin menambahkan beberapa gaya ke setiap layer satu per satu.

#menu-wrap:

Ini akan menjadi wadah utama untuk menu roda Anda. Ini juga mengandung font universal dan ukuran font yang mempengaruhi apa pun yang ada di dalam div id="menu-wrap".

Kita akan melanjutkan dan memastikan bahwa gambar tengah kita ditata dengan benar dengan menempatkannya di tengah roda menggunakan margin, menambahkan beberapa dimensi ke dalamnya dan perbatasan.

Semua wrappers: Kita ingin membuat beberapa gaya yang berlaku untuk semua wrappers utama dengan menambahkan jari-jari perbatasan universal, menempatkan semuanya di tengah, menambahkan posisi relatif sehingga semuanya tetap terkandung dan mendorongnya ke bawah untuk mendapatkan efek yang rata.

.wrap1:

Ini adalah layer terbesar Anda yang berada di belakang yang lain. Kita akan membuat Background merah gradien dan menggunakan fallback merah solid untuk browser lama. Kita juga akan menggunakan CSSpie untuk memberi tahu IE bahwa boleh saja menggunakan gaya ini. Setelah itu yang perlu kita lakukan hanyalah menambahkan lebar dan tinggi dan selesai. Anda ingin memastikan lebar dan tinggi lebih besar dari semua layer lainnya sehingga terlihat di belakangnya.

.wrap2:

Sekarang untuk wrap 2 kita akan melakukan hal yang sama persis hanya kita akan menggunakan variasi putih sebagai gradien, dan menambahkan bayangan kotak luar dan dalam untuk membuat efek sedikit miring ditambah bayangan latar belakang. Maka kita perlu membuat lebar dan tinggi sekitar 40px lebih kecil dari layer utama untuk membuatnya bagus dan rata.

.wrap3 & 4:

Kita sekarang akan mengulangi proses untuk semua pembungkus lain menggunakan gradien berwarna yang berbeda dan membuat setiap layer 40px lebih kecil dari yang terakhir.

.wrap5 & .nav-holder:

Sekarang kita dapat style wrap5 dan nav-holder yang akan menahan semua item menu di tempatnya dan untuk gaya candycane, kita akan membuatnya hitam untuk menambahkan kontras netral yang bagus sementara wrap5 akan berwarna putih dan akan berfungsi sebagai wadah untuk gambar tengah. Apa yang dilakukan di sini adalah memotong background sehingga Anda dapat melihat melalui wrap5 dan nav-holder, membuat layer lain muncul di belakangnya serta gambar tengah. Setelah membuatnya transparan kita akan menambahkan perbatasan hitam ke nav-holder dan perbatasan putih ke wrap5. Perbatasan nav-holder harus disembunyikan di sisi kanan (untuk sub-menu), dua kali lipat di sisi kiri (untuk menu utama) dan solid untuk sisanya menciptakan efek yang bagus dan mudah sambil meminimalkan jumlah layer yang kita miliki menambahkan. Secara tradisional dengan efek ini Anda dapat menambahkan hingga 5 atau 6 layer baru, ini menghemat banyak kode.

Kali ini lebar dan tinggi wrap5 akan kurang dari 60px dari layer lain untuk membuatnya lebih bagus dan lebih lagi. Dorongan 10px lainnya di bagian atas akan membantu menyelaraskan layer dan bayangan kotak bagian dalam akan memberi kita perspektif jarak yang bagus antara wrap5 dan gambar tengah.

Menambahkan bagian atas 0 ke nav-holder akan secara otomatis menyelaraskan layer dengan yang lain. Kita juga akan menggunakan margin negatif untuk perataan kiri atas lebih lanjut dan membuat tinggi/lebar proporsional untuk membuatnya pas di atas layer lainnya.

"Nav-holder's border disembunyikan di sisi kanan (untuk sub-menu), dua kali lipat di sisi kiri (untuk menu utama) dan solid untuk sisanya menciptakan efek yang bagus dan mudah sambil meminimalkan jumlah layer yang harus ditambahkan. "

Yah itu cukup mudah. Jadi setelah Anda menyelesaikan semua itu, mudah-mudahan Anda telah mempelajari sesuatu yang baru untuk ditambahkan ke set keterampilan Anda. Namun, sejauh ini yang Anda ciptakan seharusnya terlihat. Jika tidak terlihat seperti ini, silakan periksa kembali kode dan lihat apakah Anda mungkin melewatkan sesuatu... jangan khawatir, itu mungkin sesuatu yang sangat kecil.

Completers: Hmm... apakah ini terlihat tidak lengkap untuk Anda? Kita perlu melengkapinya dengan beberapa layer yang saya dipelengkap sehingga kita dapat menyembunyikan bagian-bagian dari gambar tengah dan membawa nav-holder lebih jauh di sekitar layer lain menciptakan efek bulat yang bagus dan menutupnya.

Untuk melakukan apa yang baru saja saya sebutkan cukup sederhana. Kita dapat membuat sebagian besar gaya berlaku untuk kedua pelengkap dengan kode lebih sedikit. Mari kita tambahkan radius batas ke satu sisi untuk membuat kurva yang bagus, maka kita akan menggunakan transformasi untuk menyelaraskan pelengkap antara wrap1 dan wrap5. Menambahkan warna background sangat penting atau tidak ada yang muncul. Kita harus membuat layer ini diposisikan absolut dan memindahkannya ke kanan dan atas untuk membuatnya berbaris dengan sempurna.

.completer1 akan memiliki tampilan tidak ada untuk gaya tetesan air mata ini. Pada gaya lain seperti roda, kita telah menghapus bagian itu untuk membuatnya ditampilkan.

.completer2 memiliki rotasi lebih sedikit dan kita perlu menekannya sedikit agar pas.

Setelah Anda menambahkan pelengkap maka Anda harus memiliki sesuatu seperti ini... Sekali lagi jika Anda tidak memiliki hal yang sama seperti apa yang Anda lihat di sini, cukup periksa kode Anda dan lihat apa yang Anda lewatkan.

Sekarang kita memiliki seperangkat layer yang bagus untuk dikerjakan. Semuanya terkandung dengan baik dan memiliki efek CSS3 yang halus jadi mari kita lanjutkan dan buat baby ini bekerja!


Langkah 2: Item Menu Navigasi dan Item Sub-Menu

Sekarang kita ingin menambahkan tautan navigasi yang terlihat di balik layer yang berbeda. Di sisi kiri (di perbatasan ganda) kita ingin item menu utama dan di sisi kanan (di ruang terbuka) kita ingin item sub-menu muncul setelah item utama diletakkan. Anda akan terkejut betapa mudahnya menyelesaikan ini, jadi mari kita menggali lebih dalam.

Kode:

Ada hover block untuk menjaga menu tetap aktif saat Anda melewati roda dengan mouse Anda dan kita ingin memastikan bahwa itu mencakup seluruh roda, jadi demi kompatibilitas IE, kita akan menambahkan background dengan opacity 0.01 jika tidak, IE akan menang tidak menyadari bahwa elemen itu ada di sana.

Menggunakan margin-left: 76px memastikan bahwa Anda memiliki ruang yang cukup untuk mengarahkan kursor ke menu utama dan sub-menu serta menyeberang roda tanpa ada sesuatu yang menghilang.

Sekarang kita ingin menghapus poin-poin dari setiap item menu atau [li]. Kita juga ingin memastikan bahwa mereka relatif terhadap nav-holder.

Anda dapat menambahkan radius batas untuk sedikit gaya tambahan. Kita akan membuat background warna solid dan memindahkan item menu ke kiri sehingga mereka hampir menyentuh tepi nav-holder.

Padding, teks-indentasi dan warna adalah untuk gaya tambahan dan tidak diperlukan untuk menu berfungsi.

Sekarang mari kita tambahkan sedikit gradien ke sub-menu dan dorong ke kanan dan geserkan item sub-menu pertama hanya ke tepi wrap5.

Tambahkan bayangan kotak akan membantu kita membuat efek dari item sub-menu yang berada di bawah layer masing-masing.

Tempatkan margin pada setiap item sub-menu akan memungkinkan kita membuat lebih banyak pemisahan dan memberikan efek masing-masing di bawah layer yang berbeda.

Anda juga dapat menambahkan opacity untuk setiap item agar memudar dari atas ke tengah dan dari bawah ke tengah di mana item tengah memiliki opacity penuh.

Ok jadi Anda telah menambahkan sub-menu Anda tetapi masih menampilkan tanpa ada menu utama yang melayang. Untuk memperbaikinya kita harus cukup menambahkan tidak ada tampilan ke [ul].

Jadi sekarang tidak muncul sama sekali! Ok, mari kita lanjutkan dan membuatnya ditampilkan setelah item utama melayang. Dengan menggunakan li:hover > ul  kita dapat mengetahui bahwa ketika menu utama [li] berada di atas maka kita akan memperlihatkan [ul] untuk sub-menu yang sesuai dengan menggunakan blok display:.

Styling untuk setiap item menu utama.

Untuk estetika murni kita dapat menambahkan radius batas, bayangan kotak, dan background. Yang diperlukan adalah menciptakan ketinggian, lebar, posisi absolut, dan margin atas.

Margin atas memungkinkan kita untuk mendorong item menu pertama ke tempat yang kita inginkan, maka kita dapat menggunakan sedikit margin untuk menekan item lainnya.

Untuk 3 item menu yang tersisa kita akan menambahkan margin atas untuk masing-masing untuk bahkan jarak di antara mereka dan margin yang tersisa untuk menabrak mereka pada layer yang berbeda.

Selanjutnya kita perlu memastikan untuk menambahkan rotasi ke setiap item sehingga kita dapat menyesuaikan menu dengan baik.

Setelah menangani item menu utama kita akan melakukan hal yang sama untuk sub-menu kecuali untuk bukannya membuat item menu berputar-putar, kita ingin mereka menjadi lurus ke atas dan ke bawah. Untuk melakukan ini kita perlu mengkompensasi rotasi menu utama dengan menambahkan rotasi ke setiap sub-menu.

Sama seperti menu utama kita perlu menambahkan margin atas untuk meratakan jarak antara masing-masing dan mendorong setiap item sub-menu ke kanan sehingga mereka bahkan lebih dekat ke layer masing-masing.

Akhirnya kita bisa menambahkan beberapa styling opsional untuk membuat font memudar dan kemudian padatan lagi ketika mendekat. Ini akan membawa setiap item ke depan untuk pengguna ketika mereka mengarahkan kursornya.

Gaya-gaya ini tidak diperlukan agar menu berfungsi tetapi mereka menambahkan beberapa efek yang bagus dan meningkatkan kegunaan.

Jika Anda ingin lebih jauh menata setiap sub-menu, Anda dapat menggunakan kode berikut...

Setelah Anda menyelesaikan bagian terakhir, Anda harus memiliki sesuatu seperti ini... Sekali lagi jika Anda tidak terlihat seperti gambar di bawah ini jangan khawatir, kembali saja dan periksa kode Anda.

Kredit: Gambar tengah dari library aset envato.


Bagaimana dengan IE?

Nah untuk IE kita bisa menggunakan CSSPIE di stylesheet terpisah. Saya tidak akan membahas terlalu banyak karena bahkan dengan perbaikan ini, IE tidak ditampilkan dengan benar. Jika Anda mengetahui perbaikan yang lebih baik, beri tahu saya di komentar.

Dengan menggunakan jalan kita dapat memanggil file php csspie untuk memberi tahu IE bahwa gaya CSS3 boleh digunakan. Jadi, inilah cara kerjanya...

Beberapa perbaikan IE lainnya berjalan seperti ini...


Anda Sudah Selesai!

Jadi saya harap kalian menikmati tutorial ini! Ingat bahwa dukungan CSS3 terbatas dan jika Anda ingin kompatibilitas di semua browser yang pernah dibuat maka ada cara lain untuk menyelesaikan tugas yang sama seperti menggunakan gambar dan beberapa javascript. Jika Anda ingin tutorial tentang gaya menu lain, cara menggunakan versi javascript atau cara menggunakan efek CSS3 yang lebih dahsyat, beri tahu saya di komentar dan saya akan menyiapkannya untuk Anda! Tinggalkan komentar dan pertanyaan Anda di bawah ;)

Bersabarlah dan teruslah belajar dan sebelum Anda menyadarinya, Anda akan menjadi ahli dalam apa pun yang Anda lakukan!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.