Menu keren
Iseng iseng.. biasa.. kegiatan sehari hari.. online sambil serching untuk coba coba sesuatu yg menarik mata.. pas lagi searching.. nemu tutorial tentang membuat style sebuah menu.. lumayan menarik mata la buat dicoba.. :D
berikut tampilan dari menu yg berhasil saya buat..
kerenkan..?? hehehhehehe...
cara buatnya gimna boss..?? tenang saya kasi juga source codenya... ini dia..
1. Untuk kode Html'ny ::
2. kemudian untuk kode Style css'ny ::
body{ margin: auto; height: 1000px; padding: 0; } #formconten{ background: -moz-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); background: -webkit-linear-gradient(top, C8FF7A 0%, FFFF8C 100%); background: -o-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); padding-top: 14px; padding-left: 25px; padding-right: 25px; margin: auto; width: 900px; height: 470px; box-shadow:0px 0px 30px #FF2323; border-left: 1px solid darkgrey; border-right:1px solid darkgrey; } #jarakconten{ height: 5px; } #bagian_isi{ padding-top: 10px; height: 700px; background-color: darkgray; border-top: 3px solid yellow; } header{ height:100px; width: 99.7%; border: 2px solid #e0e0e0; padding-top: -3px; background: -moz-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); background: -webkit-linear-gradient(top, C8FF7A 0%, FFFF8C 100%); background: -o-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); } nav{ height: 35px; position:relative; background-color: 8CFF60; box-shadow:0 5px 7px #FF2323; border-bottom: 3px solid #e0e0e0; } nav ul{ margin:0; padding:0 } nav ul li{ float:left; list-style:none; position:relative; padding-left: 25px; box-shadow:5px 5px 10px #FF2323; } nav ul li a{ display:block; color:#404040; text-decoration:none; padding:5px; } nav ul li a:hover{ background:#404040; color:#fefefe } nav ul li ul{ position:absolute; display:none; width:150px; background:#fefefe; box-shadow:0 1px 4px #e0e0e0; -webkit-box-shadow:0 1px 4px #e0e0e0; -moz-box-shadow:0 1px 4px #e0e0e0; border:1px solid #e0e0e0; margin:0 auto } nav ul ul ul{ display:none; position:absolute; right:-100px; top:0 } nav li:hover > ul,nav ul ul li:hover > ul{ display:block } nav ul li.clear,nav ul ul li{ float:none } section{ background-color: white; height: 350px; float: left; border: 1px solid #e0e0e0; width: 530px; padding-left: 10px; padding-top: 20px; padding-left: 20px; box-shadow:0px 2px 10px black; /* border-top: 5px solid #e0e0e0; border-bottom: 5px solid #e0e0e0; border-left: 7px solid #e0e0e0; border-radius: 1px 4px 4px 1px; */ } footer{ padding-top: 15px; border: 2px solid darkslategray; border-right: 0 ;border-left: 0 ; border-bottom: 0; background: yellow; background: -moz-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); background: -webkit-linear-gradient(top, C8FF7A 0%, FFFF8C 100%); background: -o-linear-gradient(top, #C8FF7A 0%, #FFFF8C 100%); box-shadow:0 1px 4px #e0e0e0; height: 70px; } .fontheader{ color: FF2323; font-style: oblique; font-weight:bold; } .tanggal{ color: red; size:20 ; font-weight:bold ;} .tabelheader{ width: 70%; margin: auto; height: 15%; margin-top: 14px; } .tabelmenu{ width: 71.5%; margin: auto; } #tb_matakuliah{ padding: 20px; background-color: whitesmoke; height: 700px; float: left; border: 1px solid #e0e0e0; width: 73.7%; border-bottom:2px solid #e0e0e0; } #conten_bawah{ margin: auto; height: 680px; width: 1200px; border: 1px solid #e0e0e0; box-shadow:0 1px 10px #e0e0e0; } #stylee{ margin:auto; margin-top: -100px; margin-bottom: -150px; height: 850px; width: 1000px; border: 1px solid #e0e0e0; box-shadow:0 1px 40px #e0e0e0; }
Simpan simpan style menu dengan nama "Stylemenu.css" kemudaian pada head kode HTML sebelumnya link kan kode style css tersebut.. Gampang banget bukan..?? :D Hhehehehe...
Selamat Mencoba.. Semoga Bermanfaat..
Semangat Koding...!!! :D
gak bisa di jalan menunya, bisa gak dikirim projectnya ke email saya hery.pc34@yahoo.com
ReplyDeleteTerima kasih
sudah saya kirim file.ny mass.. atau download disini
Deletehttp://www.4shared.com/rar/0khYguN8ba/menu_keren.html