CSS3 Metal menu with icons

Posted by : Stiker Jalingkut

Pada Kesempatan Kali Ini Kami Mau Berbagi Tutorial
Dengan Css3. Mungkin Ada Heran Ternyata Css3 Mempunyai Kelebihan
Membuat CSS3 Metal menu with icons.
Dalam tutorial baru kita akan membuat menu CSS3 indah dengan ikon dalam gaya logam. Ini akan cukup standar UL LI-menu bertingkat.
Berikut adalah hasil akhir (apa yang kita akan menciptakan):

Sobat Bisa Lihat Gambar Yang Di Atas Itulah Yang Kami Sebut
CSS3 Metal menu with icons. Ini Pribadi Kami Sob
Kalu Mau Pasang Tutorial Sebelum Lihat Hasilnya
Kayak Nya Kurang Yakin. Nah Sobat Bisa Lihat Hasilnya
Kaya Apa CSS3 Metal menu with icons
Lihat Disini Dulu Genk Hasilnya Demo

Mari Kita Pada Topi Yang Kita Bicarakan Kali Ini Genk
Dan Ikuti Langkah2 Nya

Langkah 1. HTML

Seperti biasa, kita mulai dengan HTML. Berikut adalah kode html penuh menu kami. Seperti yang Anda lihat - ini adalah menu bertingkat. Seluruh menu dibangun di UL LI-elemen.
index.html

Langkah 2. CSS

Berikut adalah gaya CSS dari menu kami. Mungkin Anda telah melihat - bahwa dalam html kami - saya memiliki dua file CSS: layout.css dan menu.css. File pertama (layout.css) berisi gaya halaman pengujian kami. Kami tidak akan mempublikasikan gaya ini dalam artikel ini, tetapi jika Anda ingin - Anda dapat menemukan gaya dalam paket.
css / menu.css

001 ul#nav { 002 display:block; 003 float:left; 004 font-family:Trebuchet MS,sans-serif; 005 font-size:0; 006 padding:5px 5px 5px 0; 007 008 background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */ 009 background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */ 010 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */ 011 background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */ 012 background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */ 013 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */ 014 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */ 015 background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 016 } 017 ul#nav,ul#nav ul { 018 list-style:none; 019 margin:0; 020 } 021 ul#nav,ul#nav .subs { 022 background-color:#444; 023 border:1px solid #454545; 024 025 border-radius:9px; 026 -moz-border-radius:9px; 027 -webkit-border-radius:9px; 028 } 029 ul#nav .subs { 030 background-color:#fff; 031 border:2px solid #222; 032 display:none; 033 float:left; 034 left:0; 035 padding:0 6px 6px; 036 position:absolute; 037 top:100%; 038 width:300px; 039 040 border-radius:7px; 041 -moz-border-radius:7px; 042 -webkit-border-radius:7px; 043 } 044 ul#nav li:hover>* { 045 display:block; 046 } 047 ul#nav li:hover { 048 position:relative; 049 } 050 ul#nav ul .subs { 051 left:100%; 052 position:absolute; 053 top:0; 054 } 055 ul#nav ul { 056 padding:0 5px 5px; 057 } 058 ul#nav .col { 059 float:left; 060 width:50%; 061 } 062 ul#nav li { 063 display:block; 064 float:left; 065 font-size:0; 066 white-space:nowrap; 067 } 068 ul#nav>li,ul#nav li { 069 margin:0 0 0 5px; 070 } 071 ul#nav ul>li { 072 margin:5px 0 0; 073 } 074 ul#nav a:active,ul#nav a:focus { 075 outline-style:none; 076 } 077 ul#nav a { 078 border-style:none; 079 border-width:0; 080 color:#181818; 081 cursor:pointer; 082 display:block; 083 font-size:13px; 084 font-weight:bold; 085 padding:8px 18px; 086 text-align:left; 087 text-decoration:none; 088 text-shadow:#fff 0 1px 1px; 089 vertical-align:middle; 090 } 091 ul#nav ul li { 092 float:none; 093 margin:6px 0 0; 094 } 095 ul#nav ul a { 096 background-color:#fff; 097 border-color:#efefef; 098 border-style:solid; 099 border-width:0 0 1px; 100 color:#000; 101 font-size:11px; 102 padding:4px; 103 text-align:left; 104 text-decoration:none; 105 text-shadow:#fff 0 0 0; 106 107 border-radius:0; 108 -moz-border-radius:0; 109 -webkit-border-radius:0; 110 } 111 ul#nav li:hover>a { 112 border-style:none; 113 color:#fff; 114 font-size:13px; 115 font-weight:bold; 116 text-decoration:none; 117 text-shadow:#181818 0 1px 1px; 118 } 119 ul#nav img { 120 border:none; 121 margin-right:8px; 122 vertical-align:middle; 123 } 124 ul#nav span { 125 background-position:right center; 126 background-repeat:no-repeat; 127 display:block; 128 overflow:visible; 129 padding-right:0; 130 } 131 ul#nav ul span { 132 background-image:url("../images/arrow.png"); 133 padding-right:20px; 134 } 135 ul#nav ul li:hover>a { 136 border-color:#444; 137 border-style:solid; 138 color:#444; 139 font-size:11px; 140 text-decoration:none; 141 text-shadow:#fff 0 0 0; 142 } 143 ul#nav > li >a { 144 background-color:transpa; 145 height:25px; 146 line-height:25px; 147 148 border-radius:11px; 149 -moz-border-radius:11px; 150 -webkit-border-radius:11px; 151 } 152 ul#nav > li:hover > a { 153 background-color:#313638; 154 line-height:25px; 155 }

Kalu Sobat Gak Mau Susah Mengedit Nya Sobat Bisa Download Di Bowah Oke.
Silakan Sob Kalu Ada Yang Berminat
layout.css Download menu.css Download

Sikian Dulu Dari Kami Sobat Semoga Berguna Buat Sobat Semuah..?

{ 23 comentários... read them below or Comment }

vlog media news23 November 2012 pukul 12.10
Trimakasih atas ilmunya genk.. Nanti akan saya coba..
BalasHapus
Balasan
Kang Muroi23 November 2012 pukul 15.00
wah panjang amat scriptnya nih, tapi makasih yah buat ilmunya, saya bungkus dulu:}
BalasHapus
Balasan
Djangkaru Bumi23 November 2012 pukul 15.29
ijin copas dulu, biar mudah untuk saya pelajarin habis layarnya sering tertutup sendiri.
BalasHapus
Balasan
Stiker Jalingkut23 November 2012 pukul 18.57
met siang genk. trmakasih knjungannya genk...
BalasHapus
Balasan
Vpie ◥TwekzLibz◤ MahaDhifa23 November 2012 pukul 20.27
.. widichhhh,, paaaaaannnjjjaaaaaaannnng banget. he..86x. namun sayang,, aq gak begitu paham dengan css. huhh ..
BalasHapus
Balasan
Anonim23 November 2012 pukul 20.36
berkunjung kemari, sambil baca artikel menarik ini :)
BalasHapus
Balasan
Unknown23 November 2012 pukul 22.16
bingung aq klo sudah edit2 ky gini,,

kunjungan siang genk
BalasHapus
Balasan
Anonim23 November 2012 pukul 22.55
Banyak juga nih kodenya,,takut memberatkan loading blog.
BalasHapus
Balasan
Andi23 November 2012 pukul 23.42
Wah klu kebanyakan kode ntr blog ane lemot sob.hikz
BalasHapus
Balasan
Beben Koben24 November 2012 pukul 02.49
itu kode2nya kok ada urutan angka2...ke bawa lagi...zz..zz.z...-____-
BalasHapus
Balasan
AZLA24 November 2012 pukul 10.19
tutorialnya sangat berguna sekali buat pembelajaran saya sobat
terima kasih sudah berbagi
salam sukses
BalasHapus
Balasan
Anonim26 November 2012 pukul 00.42
kok kodenya jadi acak gini sih mas o.O
BalasHapus
Balasan
Anonim10 Mei 2013 pukul 01.28
selain ringan keren lg komenback
BalasHapus
Balasan

Tambahkan komentar

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

CSS3 Metal menu with icons

{ 23 comentários... read them below or Comment }

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut