Drop Down Menu Metro Ui Awesome - Setelah sebelumnya saya pernah share artikel tentang Menu metro ui modal dialog dan widget menu metro ui drop down sliding yang masih menggunakan gambar sebagai icon, namun kali ini saya mencoba menyempurnakan tampilannya dengan kombinasi menu metro ui dan font awesome. Karena saya lebih suka tampilan gambar yang relatif sedikit pada halaman blog, agar konsep blog metro ui style lebih maksimal. Untuk panduan cara kostumisasi font icon awesome versi 403
Sebagai gambarannya seperti dibawah ini :
CSS
.samsury-tab1{background:#ea6153;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
position:relative;
background:none;
width:500px;
height:90px;
border:none;
margin:20px auto;
padding:20px;
float:left;
}
ul.navi {
position:relative;
z-index:100;
padding:0;
margin:0 0 0 60px;
list-style:none;
width:auto;
height:30px;
}
ul.navi > li {
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
ul.navi a {
display:block;
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
line-height:30px;
text-align:center;
text-decoration:none;
}
ul.navi a img {
border:0;
}
ul.navi a span {
position:relative;
top:30%;
font: 14px Segoe UI, Helvetica, Arial, sans-serif;
color:#fff;
}
ul.navi:hover {
height:200px;}
ul.navi:hover li#n1 {
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
-webkit-transform: translatex(0px);
transform: translatex(0px);
}
ul.navi:hover li#n2 {
-moz-transform: translatex(90px);
-ms-transform: translatex(90px);
-o-transform: translatex(90px);
-webkit-transform: translatex(90px);
transform: translatex(90px);
}
ul.navi:hover li#n3 {
-moz-transform: translatex(180px);
-ms-transform: translatex(180px);
-o-transform: translatex(180px);
-webkit-transform: translatex(180px);
transform: translatex(180px);
}
ul.navi:hover li#n4 {
-moz-transform: translatex(270px);
-ms-transform: translatex(270px);
-o-transform: translatex(270px);
-webkit-transform: translatex(270px);
transform: translatex(270px);
}
ul.sub {
padding:0;
margin:0;
list-style:none;
width:100%;
height:200px auto;
position:absolute;
left:0;
top:0;
z-index:-1;
opacity:0;
-moz-transition: opacity 0s linear 1s;
-ms-transition: opacity 0s linear 1s;
-o-transition: opacity 0s linear 1s;
-webkit-transition: opacity 0s linear 1s;
transition: opacity 0s linear 1s;
}
ul.sub li {
width:80px auto;
height:80px;
position:absolute;
left:0;
top:0;
z-index:-1;
-moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
-ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
-o-transition: -o-transform 0.5s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out 0.5s;
}
ul.navi > li:hover ul {
opacity:1;
-moz-transition: opacity 0s linear 0.5s;
-ms-transition: opacity 0s linear 0.5s;
-o-transition: opacity 0s linear 0.5s;
-webkit-transition: opacity 0s linear 0.5s;
transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
-moz-transform: translatex(-70px) translatey(90px);
-ms-transform: translatex(-70px) translatey(90px);
-o-transform: translatex(-70px) translatey(90px);
-webkit-transform: translatex(-70px) translatey(90px);
transform: translatex(-70px) translatey(90px);
}
ul.navi li:hover ul li.c {
-moz-transform: translatex(2px) translatey(90px);
-ms-transform: translatex(2px) translatey(90px);
-o-transform: translatex(2px) translatey(90px);
-webkit-transform: translatex(2px) translatey(90px);
transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
-moz-transform: translatex(74px) translatey(90px);
-ms-transform: translatex(74px) translatey(90px);
-o-transform: translatex(74px) translatey(90px);
-webkit-transform: translatex(74px) translatey(90px);
transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
-moz-transform: translatex(146px) translatey(90px);
-ms-transform: translatex(146px) translatey(90px);
-o-transform: translatex(146px) translatey(90px);
-webkit-transform: translatex(146px) translatey(90px);
transform: translatex(146px) translatey(90px);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:36px;color:#fff;padding-top:15px;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
position:relative;
background:none;
width:500px;
height:90px;
border:none;
margin:20px auto;
padding:20px;
float:left;
}
ul.navi {
position:relative;
z-index:100;
padding:0;
margin:0 0 0 60px;
list-style:none;
width:auto;
height:30px;
}
ul.navi > li {
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
ul.navi a {
display:block;
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
line-height:30px;
text-align:center;
text-decoration:none;
}
ul.navi a img {
border:0;
}
ul.navi a span {
position:relative;
top:30%;
font: 14px Segoe UI, Helvetica, Arial, sans-serif;
color:#fff;
}
ul.navi:hover {
height:200px;}
ul.navi:hover li#n1 {
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
-webkit-transform: translatex(0px);
transform: translatex(0px);
}
ul.navi:hover li#n2 {
-moz-transform: translatex(90px);
-ms-transform: translatex(90px);
-o-transform: translatex(90px);
-webkit-transform: translatex(90px);
transform: translatex(90px);
}
ul.navi:hover li#n3 {
-moz-transform: translatex(180px);
-ms-transform: translatex(180px);
-o-transform: translatex(180px);
-webkit-transform: translatex(180px);
transform: translatex(180px);
}
ul.navi:hover li#n4 {
-moz-transform: translatex(270px);
-ms-transform: translatex(270px);
-o-transform: translatex(270px);
-webkit-transform: translatex(270px);
transform: translatex(270px);
}
ul.sub {
padding:0;
margin:0;
list-style:none;
width:100%;
height:200px auto;
position:absolute;
left:0;
top:0;
z-index:-1;
opacity:0;
-moz-transition: opacity 0s linear 1s;
-ms-transition: opacity 0s linear 1s;
-o-transition: opacity 0s linear 1s;
-webkit-transition: opacity 0s linear 1s;
transition: opacity 0s linear 1s;
}
ul.sub li {
width:80px auto;
height:80px;
position:absolute;
left:0;
top:0;
z-index:-1;
-moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
-ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
-o-transition: -o-transform 0.5s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out 0.5s;
}
ul.navi > li:hover ul {
opacity:1;
-moz-transition: opacity 0s linear 0.5s;
-ms-transition: opacity 0s linear 0.5s;
-o-transition: opacity 0s linear 0.5s;
-webkit-transition: opacity 0s linear 0.5s;
transition: opacity 0s linear 0.5s;
}
ul.navi li:hover ul li.l {
-moz-transform: translatex(-70px) translatey(90px);
-ms-transform: translatex(-70px) translatey(90px);
-o-transform: translatex(-70px) translatey(90px);
-webkit-transform: translatex(-70px) translatey(90px);
transform: translatex(-70px) translatey(90px);
}
ul.navi li:hover ul li.c {
-moz-transform: translatex(2px) translatey(90px);
-ms-transform: translatex(2px) translatey(90px);
-o-transform: translatex(2px) translatey(90px);
-webkit-transform: translatex(2px) translatey(90px);
transform: translatex(2px) translatey(90px);
}
ul.navi li:hover ul li.r {
-moz-transform: translatex(74px) translatey(90px);
-ms-transform: translatex(74px) translatey(90px);
-o-transform: translatex(74px) translatey(90px);
-webkit-transform: translatex(74px) translatey(90px);
transform: translatex(74px) translatey(90px);
}
ul.navi li:hover ul li.r1 {
-moz-transform: translatex(146px) translatey(90px);
-ms-transform: translatex(146px) translatey(90px);
-o-transform: translatex(146px) translatey(90px);
-webkit-transform: translatex(146px) translatey(90px);
transform: translatex(146px) translatey(90px);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:36px;color:#fff;padding-top:15px;}
HTML
<div class="samsury-metro-menu">
<ul class="navi">
<li id="n1"><a class="samsury-tab1" href="#" > <i class="fa fa-th-large"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-fb" href="#"><i class="fa fa-facebook"></i></a></li>
<li class="c"><a class="samsury-tw" href="#"><i class="fa fa-twitter"></i></a></li>
<li class="r"><a class="samsury-g" href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="r1"><a class="samsury-in" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" ><i class="fa fa-download"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><i class="fa fa-file-o"></i></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><i class="fa fa-music"></i></a></li>
<li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><i class="fa fa-picture-o"></i></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#"><i class="fa fa-cogs"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><i class="fa fa-wrench"></i></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><i class="fa fa-volume-up"></i></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><i class="fa fa-power-off"></i></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#"><i class="fa fa-list"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><i class="fa fa-random"></i></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><i class="fa fa-sitemap"></i></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>
<ul class="navi">
<li id="n1"><a class="samsury-tab1" href="#" > <i class="fa fa-th-large"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-fb" href="#"><i class="fa fa-facebook"></i></a></li>
<li class="c"><a class="samsury-tw" href="#"><i class="fa fa-twitter"></i></a></li>
<li class="r"><a class="samsury-g" href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="r1"><a class="samsury-in" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" ><i class="fa fa-download"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1"><i class="fa fa-file-o"></i></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><i class="fa fa-music"></i></a></li>
<li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><i class="fa fa-picture-o"></i></a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#"><i class="fa fa-cogs"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#"><i class="fa fa-wrench"></i></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><i class="fa fa-volume-up"></i></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><i class="fa fa-power-off"></i></a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#"><i class="fa fa-list"></i></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#"><i class="fa fa-random"></i></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><i class="fa fa-sitemap"></i></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>
</div>
Anda cukup mengganti tanda # dengan url yang ingin di tampilkan, dan untuk font icon selengkapnya bisa anda kunjungi Font Icon Awesome V 4.0.3
Like THIS :
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku
Belum ada komentar untuk "Drop Down Menu Metro Ui Awesome"
Posting Komentar