Animated CSS3 Metro UI - Bagi blogger pemula dalam mendesain menu bar / dropdown menu untuk sebuah blog tentu akan sedikit mengalami sebuah kesulitan karena harus memahami kode css,javascript,html dan sebagainya nah kali ini saya akan memberikan sedikit solusi untuk brada yang sedang mencari sebuah menu bar yang cukup keren dan tidak begitu sulit dalam pemasangannya.
Kelebihan Animated CSS3 Metro UI Menu
- Pada tombol Home terdapat tombol share Facebook , Twitter , Google + dan Rss
- Tombol Tags yang bisa brada sesuaikan
- Tombol Blog Archive dengan dropdown
- Tombol Contact Tab
- Efect Sliding & fast loading
Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini.
Kustomisasi
- Masuk pada Tataletak
- Add Gadget / HTML Javascript
- Masukan kode dibawah ini
<style>/* demo page styles */
.mjn-tab1
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IYGTbz0wjBogai6ARxXPu9g4eyF26TZMaV9cm-LjwIESANxiq-M3blj-JYdHVkMBi81d0otIlSF-7osZ0Ed1sln_CRycSx6gfg8KKZLix4UbWytUxnXVYSr5suET6sO6yNl2eNm5bLM/h120/home.png) no-repeat center center #4d90fe;
}.tab1:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IYGTbz0wjBogai6ARxXPu9g4eyF26TZMaV9cm-LjwIESANxiq-M3blj-JYdHVkMBi81d0otIlSF-7osZ0Ed1sln_CRycSx6gfg8KKZLix4UbWytUxnXVYSr5suET6sO6yNl2eNm5bLM/h120/home.png) no-repeat center center #3682FC;
}.mjn-fb
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxF-8PYwLx7b5sL5pplM8Zf1kWy0b1afDImXhy_Q-TNkaLYjyo_Pmge9Vz-GzIyo3cuG_Q5sSy0gemDraFEfv4KtjJAIisGTPqELDq_ZLcwipGXLlbfb416u5JV5SmmzhdA_3lVsOszA/s1600/facebook2.png) no-repeat center center #2A82D9;
}.mjn-fb:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxF-8PYwLx7b5sL5pplM8Zf1kWy0b1afDImXhy_Q-TNkaLYjyo_Pmge9Vz-GzIyo3cuG_Q5sSy0gemDraFEfv4KtjJAIisGTPqELDq_ZLcwipGXLlbfb416u5JV5SmmzhdA_3lVsOszA/s1600/facebook2.png) no-repeat center center #1f69b3;
}.mjn-tw
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIy6ak1lQ0ZqD_ne9hbZF6ztOBnraq2G8hpSFSnCIRTSOc3tYGdRSjhjJSBWRivndjFFIwRVBCfkAIp1MyhMZu8DrTPmdI-Qw3j55LSNcckmSxsFP5SJ54EhITHgC6K82X9V7DycS0Oo/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0;
}.mjn-tw:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeIy6ak1lQ0ZqD_ne9hbZF6ztOBnraq2G8hpSFSnCIRTSOc3tYGdRSjhjJSBWRivndjFFIwRVBCfkAIp1MyhMZu8DrTPmdI-Qw3j55LSNcckmSxsFP5SJ54EhITHgC6K82X9V7DycS0Oo/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
}.mjn-g
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oRUAUbohcuMk0xX17rCBjURi07h_VuIInObBDZ79j4cedAlsjcXLnheSZ0TlGXnInW93Ua6SDohxPP2dQQOqo-UAPsM8R4aqQKhv_RQJ6V_aVyC_qmVhzwNguHNApINcXsvd0k5uYk0/s1600/google+plus2.png) no-repeat center center #DC321E;
}.mjn-g:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oRUAUbohcuMk0xX17rCBjURi07h_VuIInObBDZ79j4cedAlsjcXLnheSZ0TlGXnInW93Ua6SDohxPP2dQQOqo-UAPsM8R4aqQKhv_RQJ6V_aVyC_qmVhzwNguHNApINcXsvd0k5uYk0/s1600/google+plus2.png) no-repeat center center #c53727;
}.mjn-rss
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ9Er8vV1vVBL1R_Ep01CZdHfWpvX41pwFDby1ec3-PhyzvYhLS4mvARvFI8e2Id0YAaqFM5aafbFRc873DrS7EyZyCwYOnJ0GGriozXWESTBwIrQaZQk3Y9JiAHdhZsIKY6CDq7fmj4/s1600/feed2.png) no-repeat center center #E9A01C;
}.mjn-rss:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ9Er8vV1vVBL1R_Ep01CZdHfWpvX41pwFDby1ec3-PhyzvYhLS4mvARvFI8e2Id0YAaqFM5aafbFRc873DrS7EyZyCwYOnJ0GGriozXWESTBwIrQaZQk3Y9JiAHdhZsIKY6CDq7fmj4/s1600/feed2.png) no-repeat center center #F9A914;
}.mjn-tab2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivG8BfNUkMUGgTM7urs7OSFjRs1QsXKIEj9o_FLMpWBWiDyAggLRdLHr0CAwDzpHIRpvOcwrgw8jp8aqroMnq4PiqkVp8CcZGArS266cMVpl2G-jgOJDqg3hzfc3s11w8BaT0a752SoKk/h120/Tag.png) no-repeat center center #35aa47;
}.mjn-tab2:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivG8BfNUkMUGgTM7urs7OSFjRs1QsXKIEj9o_FLMpWBWiDyAggLRdLHr0CAwDzpHIRpvOcwrgw8jp8aqroMnq4PiqkVp8CcZGArS266cMVpl2G-jgOJDqg3hzfc3s11w8BaT0a752SoKk/h120/Tag.png) no-repeat center center #1d943b;
}.mjn-tab2sub
{background: #35aa47;
}.mjn-tab2sub:hover{
background: #1d943b;
}.mjn-tab3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyFLdaI6TMGBoxfxQ6SzPT6B39PCNvlWRLGdmXq4u5_77JPz0VhXDQ-g1BeGSiwByHt1Ifn3Z-TO9qXtO5Zzf6DU7PZWM2ZBsBj6nZXhWchSPehHoOQ5Z1qc0l-UWNXokldhCREDeutk/h120/archives.png) no-repeat center center #852b99;
}.mjn-tab3:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyFLdaI6TMGBoxfxQ6SzPT6B39PCNvlWRLGdmXq4u5_77JPz0VhXDQ-g1BeGSiwByHt1Ifn3Z-TO9qXtO5Zzf6DU7PZWM2ZBsBj6nZXhWchSPehHoOQ5Z1qc0l-UWNXokldhCREDeutk/h120/archives.png) no-repeat center center #6d1b81;
}.mjn-tab3sub
{background: #852b99;
height:70px;
}.mjn-tab3sub:hover
{background: #6d1b81;
}.mjn-tab4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9Jwznm6y4lAWq1mBHA6GxD1fkMm_RFkLhDA0K3TXNtZBy4QFwcCEx-yVzOsL9Rf6LquMz7pD9grtb1UuO9M2-cSu8_bkEx1F7N3v3oRfPbgu61JJM84bB2W0zp6wr3J3BcTgj0vEE0Q/h120/contact.png) no-repeat center center #d84a38;;
}.mjn-tab4:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9Jwznm6y4lAWq1mBHA6GxD1fkMm_RFkLhDA0K3TXNtZBy4QFwcCEx-yVzOsL9Rf6LquMz7pD9grtb1UuO9M2-cSu8_bkEx1F7N3v3oRfPbgu61JJM84bB2W0zp6wr3J3BcTgj0vEE0Q/h120/contact.png) no-repeat center center #c53727;
}.mjn-tab4sub
{background: #d84a38;;
}.mjn-tab4sub:hover{
background: #c53727;
}.mjn-tab5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvTUhM7JJMMNPrAH1C7rQmDoD0zgv-GcKttL44xnX-vkFOpMT2M0kuulZRnVYdgwAoB1a6hQ2I-k0j7bIlXBmq5lKHeDTN_1E0dFuQBkIcLpywLCfB2MT2fjvYF5YdbrO4cpCCeZQ-fo/h120/Menu.png) no-repeat center center #555;
}.mjn-tab5:hover
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvTUhM7JJMMNPrAH1C7rQmDoD0zgv-GcKttL44xnX-vkFOpMT2M0kuulZRnVYdgwAoB1a6hQ2I-k0j7bIlXBmq5lKHeDTN_1E0dFuQBkIcLpywLCfB2MT2fjvYF5YdbrO4cpCCeZQ-fo/h120/Menu.png) no-repeat center center #222;
}
body {
background:none;
margin:0;
padding:0;
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
}
.mjn-metro-menu {
position:relative;
background:none;
width:500px;
height:90px;
border:none;
margin:20px auto;
padding:20px;
float:left;
}
/* navigation menu styles - main styles */
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;
}
/* top line - hover styles */
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(160px);
-o-transform: translatex(160px);
-webkit-transform: translatex(160px);
transform: translatex(180px);
}
ul.navi:hover li#n4 {
-moz-transform: translatex(260px);
-ms-transform: translatex(270px);
-o-transform: translatex(270px);
-webkit-transform: translatex(270px);
transform: translatex(270px);
}
ul.navi:hover li#n5 {
-moz-transform: translatex(360px);
-ms-transform: translatex(360px);
-o-transform: translatex(360px);
-webkit-transform: translatex(360px);
transform: translatex(360px);
}
/* submenus - common styles */
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;
}
/* submenus - hover styles */
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);
}
</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<div class="mjn-metro-menu">
<!-- defining top menu elements -->
<ul class="navi">
<li id="n1"><a class="mjn-tab1" href="http://s2free.blogspot.com/" title="Home" ></a>
<!-- defining sub menu elements --><ul class="sub">
<li class="l"><a class="mjn-fb" href="https://www.facebook.com/yourlink" title="Like Us on Facebook"></a></li>
<li class="c"><a class="mjn-tw" href="https://www.twitter.com/yourlink" title="Follow Us on Twitter"></a></li>
<li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/123456789"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/yourlink"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://s2free.blogspot.com/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
<li class="r"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="s2free.blogspot.com/2013/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013"><span>2010</span></a></li>
</ul>
</li>
<li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="mjn-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="mjn-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="mjn-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="mjn-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>
</!doctype>
Save dan lihat hasilnya.
Selamat menjalankan ibadah puasa !!!
mas cara buat % saat mouse digerakan gimna....
BalasHapusoks nanti saya posting tutornya ...
Hapuskalau cara buat udud gimana??
HapusDi larang ngudut kang :)
HapusAne copy kode-kodenya aja.
BalasHapusSiapa tahu bisa untuk menu modifikasi drop down di situs ane.
boleh silahkan aja sob ....
Hapusparantos nu anyar deui wae rupina kang bro,,,
BalasHapusmuhun ieu teh ... mangga cobi raosan hehe
HapusNunggu waktu luang...baru sy jajal ya kang :)
BalasHapusboleh silahkan mas ... siapa takut hehe
Hapuswaw kodenya panjang banget nih sob. ^_^ thx sob.
BalasHapuskalau gak panjang gak asyk hehe ...
Hapustemplate nya cantik banget nih, btw bikin scroll back to top bagaimana ya sob? :)
BalasHapustuh banyak tinggal search aja di si mbah banyak ,, mau posting bikin back to top dah terlalu banyak sob ... atau datang kesini http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-implement-a-sticky-back-to-top-button/
HapusScript yang panjang itu untung di tempel di bagian widget yah, coba kalo dibagian dalam templatenya wah lumayan rumit tuh hehehee
BalasHapusKeren keren,,, nice blog :)
Widgetnya keren sob,,,!
BalasHapusmantap ni gan widgetnya, izin save ya...trims
BalasHapusnyimak dulu deh kang rully .. hehe makasih udh berbagi , ditunggu tutorial selanjutnya .. happy blogging kang ^_^ .. #enjoy aja ..
BalasHapuskeren" kang ,. tapi masih bingung.. hihi
BalasHapusnewbe