Menu Horisontal Drop Down Part 1
Para Pembaca yang setia.... setelah sekian lama membuat coretan baru kali ini saya gunakan kata-kata Para pembaca..biasanya Blogger mania..he..he.. kali aja ada yang bukan Blogger mania
Ocre..langsung masuk ke TKP..alias Tambah Koleksi Pikirannya dilanjut dengan membahas beberapa pengguna Blogger mania yang menginginkan menu Drop Down versi Horisontal dengan setting gambar yang bisa diupload dan diganti sesuai keinginan..
maka anda dapat melihat link gambar yang telah saya upload...nah kalo anda ahli gambar pake Photoshop silahkan disesuaikan dengan keinginan anda.
Pada Menu ini cocoknya digunakan pada template putih..karena mempunyai efek samping background putih
berikut menu CSSnya taruh diatas kode ]]></b:skin>
.Kyiper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;
}
.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}
.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
.content-bottom {
width: 710px;
background: transparent url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/content_bottom.png) no-repeat;
height: 13px;
float: left;
}
dan
untuk tambah kegetnya eh Gadgetnya
silahkan di Isi Link dan nama Linknya
caranya masuk ke blogger
Tambah Gadget - HTML Java Script
copy culu script ini ke notepad kemudian edit link dan namanya
setelah cukup dan sesuai paste pada blog anda
Selamat mencoba !!
No comments: