Cara Membuat Menu Roda CSS3

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

<!-- the layers !-->
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4"> 
<!-- center image goes here !-->
<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- this space will be used for the menu !-->

</div><!-- nav holder !-->
</div><!-- wrap5 !-->
</div><!-- wrap4 !-->
</div><!-- wrap3 !-->
</div><!-- wrap2 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->

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!

<span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08" /></span>

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".

#menu-wrap{
  background:#e7e7e7; /* This isn't needed */
	height:600px; /* This is important and keeps the wheel in place when hovering over elements */
	font-family:sans-serif, Franklin Gothic Medium,Helvetica, Arial; /* If not using Franklin, it will automatically go to the next font in the family */ 
	font-size:14px; /* Establishes the global font size */
	letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
	}

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.

#menu-wrap .orbit{
	height: 210px;
    margin: 32px; /* Pushes the images in the display to the center */
    position: absolute; 
	width: 210px;
	}
	
#menu-wrap .orbit-frame{
	border:2px solid #999; /* Creates a division between the image and wrap5 */
	}

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, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{  /* styles all of the wheel containers */
	-moz-border-radius: 220px 0 200px 220px;  /* firefox */
	-webkit-border-radius: 220px 0 200px 220px; /* webkit */
	border-radius: 220px 0 200px 220px;   /* opera */
 	margin:0 auto; /* centers all the wrappers relative to each other */
	position:relative !important;  /* Do not touch unless you know what you are doing */ 
	top:20px;
	}

.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.

.wrap1{ 
	background: #FF0000; /* old browsers */
	background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/
	height:394px; 
	width:394px;
	}

.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.

.wrap2{ 
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCBE8F)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCBE8F',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*IE fix using Pie*/
 	height:354px; 
	width:354px;
	-moz-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	-webkit-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	}

.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.

.wrap3{ 
	background: #FF0000; /* old browsers */
	background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/
 	height:314px; 
	width:314px;
	}

.wrap4{ 
	border: 2px solid #FF0000;
	background: #990000; /* old browsers */
	background: -moz-linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(55%,#CC0000), color-stop(57%,#FF0000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#FF0000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*IE fix using Pie*/
	-moz-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
	-webkit-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
	box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
 	height:274px; 
	width:274px;
	}

.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.

.wrap5{
	-moz-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
	box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
    border: 20px solid #FFF;  /* creates the wrap to see the image behind it */
    height: 214px;
    top: 10px;  /* center the element */
    width: 214px;
	}
    
.nav-holder{
	background: none repeat scroll 0 0 transparent;
    border-color: #121212;  /***  The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */
    border-style: solid hidden solid double;
    border-width: 73px medium 73px 73px;
    height: 252px;
    margin: -92px;  /*  centers the object on relative elements */
    top: 0;
    width: 324px;
	}

"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.

.completer, .completer2{ /** absolute elements to hide the border of images **/
	-moz-border-radius: 0 120px 0 113px;  /* firefox */
	-webkit-border-radius: 0 120px 0 113px; /* webkit */
	border-radius: 0 120px 0 113px; /* opera */
    -moz-transform: rotate(-20deg); /* firefox */
	-webkit-transform: rotate(-21deg); /* webkit */
	-o-transform: rotate(-20deg); /* opera */
	-ms-transform: rotate(-20deg); /* ie9 and future versions */
	transform: rotate(-20deg); /* older browsers */
    background-color: #121212;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    height: 135px;
    position: absolute;
    right: -24px;
    top: -56px;
    width: 130px;
    }
	
.completer{
	display:none;
    }
	
.completer2{
	-moz-transform: rotate(110deg); /* firefox */
 	-webkit-transform: rotate(111deg); /* webkit */
	-o-transform: rotate(110deg); /* opera */
	-ms-transform: rotate(110deg); /* ie9 and future versions */
	transform: rotate(110deg); /* older browsers */
    top: 195px;
	}

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.

ul.menuBuild, ul.menuBuild ul {
  	width: 80px;                 /* sets the size of the menu blocks */
  	background: rgb(0, 0, 0);
	/* RGBa with 0.01 opacity */
	background: rgba(0, 0, 0, 0.01); /* - a bg-color MUST be included for IE to work properly! */
  	padding-left: 0px;           /* stops the usual indent from ul */
  	margin-left: 76px;            /* Opera 7 final's margin and margin-box model cause problems */
	}

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.

ul.menuBuild li {
  	list-style-type: none;       /* removes the bullet points */
  	position: relative;
  	-webkit-border-radius: 0px 20px 20px 0px; /* webkit browsers */
  	-moz-border-radius: 0px 20px 20px 0px;  /* firefox */
  	border-radius: 0px 20px 20px 0px; /* opera */
  	background: none repeat scroll 0 0 #464646;
  	height: 14px;
  	left: -177px;
  	padding: 8px; 
  	margin: 6px 0 0;
  	width:140px; 
  	text-indent:5px;  /* How far the text is from the left edge of the menu */       
  	color: #fff; /* sets the default font colour to white */
	}

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.

ul.menuBuild ul.submenu li{
	background: #f2f2f2; /* old browsers */
	background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */
	background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */
	color:#464646; 
	position:relative; 
	left:296px; /* This is how the menu ends up on the other side of the wheel */
	-webkit-box-shadow: -2px 3px 12px -7px #161616;  /* webkit browsers */
	box-shadow: 16px 0 10px -8px #464646 inset; /* opera */
	-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */
	}

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.

ul.menuBuild ul.submenu li.first{
	margin-left: -12px;
	opacity: 0.70;
	}
	
ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third{	margin-left:-12px;
	opacity: 0.85;
	}
	
ul.menuBuild ul.submenu li.last{
	margin-left:55px;
	opacity: 0.70;
	}

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].

ul.menuBuild li > ul{          /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */
  	display: none;         /* make child blocks hover without leaving space for them */
  	top: -169px;
  	position: absolute;
    right: -86px;
	color:#565656; 
    width: 160px;
	-webkit-border-radius: 0 4px 4px 0; /* webkit */
	-moz-border-radius: 0 4px 4px 0;  /* firefox */
	border-radius: 0 4px 4px 0; /* opera */
	padding:50px;
    height: 24px;	
	background: rgb(255, 255, 255);  /* Fallback for web browsers that don't support RGBa */
	background: rgba(255, 255, 255, 0.00);   /* RGBa with 0.01 opacity */
}

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:.

ul.menuBuild li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */
  	display: block;   /* makes the child block visible - one of the most important declarations */
  	position:absolute; 
  	left:0; 
  	width:400px; 
  	height:200px; 
	}

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.

ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4{
	-webkit-border-radius: 20px 0 0 20px;  /* webkit */
	-moz-border-radius: 20px 0 0 20px;  /* firefox */
	border-radius: 20px 0 0 20px;  /* opera */
	-webkit-box-shadow:-2px 7px 8px -7px #161616;   /* webkit */
	-moz-box-shadow:-2px 7px 8px -7px #161616;  /* firefox */
	box-shadow:-16px 0 8px -7px #222222 inset;  /* opera */
	background: #F0000F; /* old browsers */
	background: -moz-linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(52%,#F0000F), color-stop(60%,#CC0000), color-stop(84%,#990000), color-stop(84%,#FFF), color-stop(85%,#464646), color-stop(92%,#363636), color-stop(100%,#121212)); 		/* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0000F', endColorstr='#121212',GradientType=1 ); /* ie */
	background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*IE fix using Pie*/
    height: 18px;
    padding: 8px;
    position: absolute; 
	margin-top:100px; 
	width:138px; 
	}

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.

ul.menuBuild li#menu2{
	-webkit-transform:rotate(-10deg); /* webkit */
	-moz-transform:rotate(-10deg);  /* firefox */
	-o-transform:rotate(-10deg); /* opera */
	-ms-transform: rotate(-10deg); /* ie9 and future versions */
	transform: rotate(-10deg); /* older browsers */
    margin-top: 141px; 
	margin-left:5px;
	}

ul.menuBuild li#menu3{ 
	-webkit-transform:rotate(-21deg);  /* webkit */
	-moz-transform:rotate(-21deg); /* firefox */
	-o-transform:rotate(-21deg); /* opera */
	-ms-transform: rotate(-21deg); /* ie9 and future versions */
	transform: rotate(-21deg); /* older browsers */
    margin-top: 181px;
	margin-left:18px;
	}
	
ul.menuBuild li#menu4{
	-moz-transform: rotate(-32deg); /* firefox */
	-ms-transform: rotate(-32deg); /* ie9 and future versions */
	transform: rotate(-32deg); /* older browsers */
	-webkit-transform: rotate(-32deg); /* webkit */
	-o-transform: rotate(-32deg); /* opera */
    margin-top: 218px; 
	margin-left:38px;
	}

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.

ul.menuBuild li#menu1 > ul{
	margin-top:0; 
	left:20px;
	}
	
ul.menuBuild li#menu2 > ul{
	-webkit-transform:rotate(10deg); /* webkit */
	-moz-transform:rotate(10deg); /* firefox */
	-o-transform:rotate(10deg); /* opera */
	-ms-transform: rotate(-10deg); /* ie9 and future versions */
	transform: rotate(-10deg); /* older browsers */
	left: 24px;
    margin-top: 6px;
	}
	
ul.menuBuild li#menu3 > ul{
	-webkit-transform:rotate(21deg); /* webkit */
	-moz-transform:rotate(21deg); /* firefox */
	-o-transform:rotate(21deg); /* opera */
	-ms-transform: rotate(-21deg); /* ie9 and future versions */
	transform: rotate(-21deg); /* older browsers */
	left: 27px;
    margin-top: 16px;
	}
	
ul.menuBuild li#menu4 > ul{
	-webkit-transform:rotate(32deg); /* webkit */
	-moz-transform:rotate(32deg); /* firefox */
	-o-transform:rotate(32deg); /* opera */
	-ms-transform: rotate(32deg); /* ie9 and future versions */
	transform: rotate(32deg); /* older browsers */
	left: 28px;
    margin-top: 27px;
	}

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.

ul.menuBuild ul.submenu li a{ 
	color:#464646;  /* the color of submenu fonts */
	opacity:0.65;  /* This blends the font in with the background */
	filter:alpha(opacity=65);
	}
	
ul.menuBuild ul.submenu li a:hover{
	opacity:1.0;   /* and this brings the font opacity back to 100% */
	filter:alpha(opacity=100)
	}
	
ul.menuBuild li a {  /* for the main menu links */
	color: #FFBE8F;
	display: block; 
	width: 100%; 
	}
	
ul.menuBuild li:hover > a { 
	color: #fff; 
	border-left:double 5px #880000;  /* the indicator for when an item is hovered over */
	} /* do not use display: block; */

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

.sub1, .sub2, .sub3, .sub4{
	}

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...

ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul.menuBuild li > ul, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2 > ul, ul.menuBuild li#menu3 > ul, ul.menuBuild li#menu4 > ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder, .completer, 
.completer2{behavior: url(styles/csspie/PIE.php); } /* CSS3 IE fix - Supports 'border-radius', 'box-shadow', 'border-image', -pie-background', liinear-gradients', 'RGBA' */

Beberapa perbaikan IE lainnya berjalan seperti ini...

ul.menuBuild ul.submenu li{filter:alpha(opacity=70);} /* IE has too many problems for gradual opacity so we'll just use 70 for all submenus*/

.completer, .completer2{display:none;} /* transform doesn't work properly so we'll just hide the completers */

.nav-holder{ border-bottom-style:none; height:0px;}

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!