Horizontal Glosy Menu With Sliding Top Efect - Kembali menghadirkan sebuah tutorial pilihan dalam membuat sebuah menu . Kali ini kita akan memanfaatkan linear-gradient sebagai background . linear-gradient kurang lebih dalam maksudnya adalah dua atau lebih macam warna gradasi , efect dari linear-gradient terkesan datar namun lembut dalam penampakannya. Struktur CSS sebagai dasar dalam pembuatan menu kali ini yang ditambah efect top ketika kursor menyentuhnya semakin membuat menu terlihat OK " sorry lebay he " . Silahkan nikmati penampakannya dengan mengklik demo dibawah ini
KUSTOMISASI
Untuk pemasangan menu kali ini seperti biasa masuk pada Edit HTML
- Cari kode ]]></b:skin> atau </style>
- Masukan kode CSS dibawah ini dantempatkan diatas kode ]]></b:skin> atau </style>
/===CSS===\Sekarang kita panggil menunya dengan kode HTML dibawah ini
nav {
margin : 50px auto;
width : 100%;
}
menu {
border-radius : 3px;
}
menu:after , menu:before {
display : block;
content : ' ';
}
menu:after {
clear : both;
}
li {
list-style-type : none;
background : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
float : left;
cursor : pointer;
padding : 3px 10px;
border-top : 2px solid rgba(200,200,255,0.5);
border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
border-radius : 5px 0 0 5px;
}
li:last-child {
border-radius : 0 5px 5px 0;
}
a {
display : block;
padding : 10px 13px;
font-size : 26px;
text-decoration : none;
border-radius : 5px;
position : relative;
top : 0;
color : #FFF; transition : all .4s;
}
li:hover a {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
li a:after {
display : block;
content : '';
position : absolute;
top : 100%;
left : 42%;
border-style : solid;
border-color : transparent;
border-width : 5px 5px 0 5px;
transition : all .4s;
}
li:hover a:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
/*************************************/
.menu2 {
width : 100%;
}
.menu2 a {
font-family : georgia;
font-size : 14px;
font-style : italic;
text-transform : capitalize;
}
.menu2 li {
border-right : 1px solid rgba(200,200,255,0.5);
border-left : 1px solid rgba(40,40,40,0.2);
}
.selected {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.selected:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
<nav>Simple saya tawarkan pada menu kali ini , jadi silahkan kreasikan untuk hasil yang lebih maksimal .
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
<menu>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ACTION</a></li>
<li><a href="#">NEWBIE</a></li>
<li><a href="#">SLOW</a></li>
</menu>
</nav>
Keeeyyeenn kang.... :-bd :-bd jadi kabita hadeueeuhhh :D
BalasHapuslumayan kang sekedar buat koleksi hehe
Hapusbiasa aja kaleee....gak gitu jg kaleeee...lebe deh ah, eh lebay
HapusEmng ku aong atuh master ben teh ,,hehe
HapusMantap mas sangat kreatif nanti sy coba
BalasHapusMonggo silahkan sob ...
Hapusjago manipulasi menunya nih Kang Ruly, haduh ituloh background nya yg bikin greget. :D
BalasHapussama sob blur background terkesan gimana gitu hhe
Hapussaya coba gann , , ,
BalasHapuskeren infonya . . .
mmpir di http://nawayhac.blogspot.com
Silahkan sob ...
Hapusabis liat penampakannya memang oke.. hehe keyenn juga pas hover kang
BalasHapusitu kelebihan menu kali ini mas ...
Hapusnyimak saja dulu sambil dipelajari, klu lihat demonya bagus yah.
BalasHapussilahkan sob ...
Hapusmantaaap kang, mun ameng ka blog Kang Rully teh abdi sok jadi hoyong ganti Template ... supaya tiasa nyoba Tutorialna hehehe.... hayu ah ngopi kang ... :)
BalasHapushayu lah siap ngopi kang ....
Hapusmangstab euy kang,,,,,,
BalasHapuslumayan kang hehe
HapusJudul postingnya..matching sama hasil nya kang...TOP Be Ge Te...hehe :)
BalasHapusHahaha .. lumayan mas bud buat sandaran koleksi
Hapuswah keren banget! *smile
BalasHapusthx sob
Hapus