Horizontal Glosy Menu With Sliding Top Efect
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>