Langsung ke konten utama

Metro UI Navigation

Siang All
Setelah kemaren membahas tentang web / blog spam dan tehnik cloacking membuat sedikit mumet juga neh kepala ( iyalah kepala masa dengkul hehe ) . Biar gak terlalu serius nge-blognya , kali ini saya akan memberikan tutorial yang cukup menarik , bagi sobat yang ingin tampilan menu di blognya sedikit berwarna Metro UI Navigation bisa jadi alternative.
Screenshot


 DEMO 

Untuk pemasangannya
-Masuk ke Rancangan
-Cari ]]></bskin>
-Dan pastekan kode dibawah ini tepat di atas ]]></bskin>

/*===MBL METRO UI Menu==*/
body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

Save Template.
Selanjutnya sobat simpan kode dibawah ini dimana sobat suka







<!-- mblmetromenu -->

<div class="mblmetromenu"><div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh949tpCYxJekoojq1Phl8MTZYzdNXIZPHeqsMzUnpT_PwdW_P5DnNiihhygv5wTvEVsg3e4MRqtqHvO5ujTodOTmcHto0R0-gO7E3FmG031k_MwlIkg8pgRiytw1upLceYffBnlMM0HZ0/s1600/home.png" alt="" />

<span class="light-text">Homepage</span>

</a>

</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_T8bT86nHIgefj7WaME_OeQHGaV1zM5KmCuJDX9u_osX9Ar0n7FfOiouF3rMkcI73uxRNjb86l_l4L_ywsFPRAIyoX_9kEGJLCsofjelladxGsOFG00vRfKXNhwBuurYf8ldM4PsCBxI/s1600/messanger.png" alt="" />

<span class="light-text">About US</span>

</a>

</div>
    
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HVvyspLzvMPFtYfRBhuKyHm3ebgKMEq55S9z1OanzAA_-rDW1chyphenhyphenpktUOmmhmg-xQECIyVJVyd-pxmlnhfgOgh-S3feAxsJtXLP3uX9r-vfQZoHbqMD9ljP8A-_4PIcViQ3JKPALs_E/s1600/rss.png" alt="" />

<span class="light-text">Rss Feeds</span>

</a>

</div>
   
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4TqDatQrKEvdVYzFIkj86mlc0SAMJvPaEdWVUaPfIEk9XZi2hWlqwXGtDMT7GksYe1b0wfGsLIyLsM6aCumgU_ZsKENyM0V0aku67z6v5hyphenhyphenRXiddO4fVajF2RrcBNkMUJ72yYivPkGg/s1600/search.png" alt="" />

<span class="light-text">Search</span>

</a>

</div>
     
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-5GOnogK0fWDKEt3H-YOuHWI9l4sStw6vBW9tyv6s0p78BqrWZg3GQqsDXycA7wwCoIXotX6Pkl_94LeAJprJAv-h1esXiAwnJzkh8KRTnVcAYKM5Q37kpblq_nvYh3KPD5tq6DJLVc/s1600/mail.png" alt="" />

<span class="light-text">Contact US</span>

</a>

</div>
     
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFp7rsKku1cELhavJxzGLVcHtVeWV1cdMOrvau47wjMEtMykInsiv7yhRdDh7ztmJu3WyWYdVfmWEgrV4xIyjduaF1YHrsMhdE7T257AmG1aodhXmLvJHwYdpF8p2ZM2ZzYAI9tVTuM48/s1600/help.pn" alt="" />

 <span class="light-text">Get HELP</span>

</a>

 </div>
     
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgloONLn9eJSdyvRmsYVBlMqhLwC0SzhmYUpasPOeEBsdWpYrykK_5E3g2V5RL0BewVGDKp_lyw5fbQfe914EIt7Wt3xTIMYp7CthGrGUkeXdetTxkp6g18Cy6b-O3lSM2Nqtap03IprBw/s1600/youtbe.png" alt="" />

<span class="light-text">YouTube</span>

</a>

</div>
     
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho0qIWR-0XCDaUSsLCXb1IzqFU1Le5ygts-QWQeuTBoAJ37ixYuPM_b3uaOA2bz4dwli8vm4kahoEdWizCQBX08T_erS1mhYRdZ1UjHigitMJqba4evq03hC5ge2I-0zMkRoaPhr-CVvI/s1600/face.png" alt="" />

<span class="light-text">Facebook</span>

</a>

</div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCCXg59pe0wg7j9ZVtZ2LCQaRVOuHw5T8khGJW0_ApX_JjZ8lOkdqhUWoRL9AyX27UfIHAK7fTiBxwhfWm-5OwGOyvDs2MKeFVcHNOj3fRdD0WYAGsmM77AwP6SZkIVo_lGaT7ONmAuhg/s1600/photo.png" alt="" />

<span class="light-text">Photos</span>

</a>

</div>
      
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">

<a href="#" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrM_0PjF6wmNt_M5jmBcVeWKZG0X0QNgabW7SMy63p4UqS09llv4NPKa0d0khgaokAQ6u3KsGGB_Spxb0bjEKQcFLox1qcjFKHrWbXQJyCex4Yyi-YWe30EoiwWM7tjegpdOuI6P2WJ0/s1600/music.png" alt="" />

<span class="light-text">Music</span>

</a>

 </div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">

<a href="http://www.mybloggerlab.com" class="gradient">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZvZq84vfun3jlFxQbjV7TUgXe8UvXuz5WdxSVQxZr-lm0Er7BSGqzXTnlPWuSMGYgxdYyCuC03bZADv5V0M0kdE7MJ0suUACnbndwjojPuxXoYYR4Bl3Twx-PffL040VXx9YoK51BvE/s1600/MBL.png" alt="" />

<span class="light-text">MyBloggerLab</span>

</a>

</div>

        <!-- End MblMetroMenu -->

  </div>

<!-- END mblmetromenu -->
Dan sekarang lihat hasilnya 
Label:

Komentar

  1. AnonimMinggu, Mei 26, 2013

    makasih mas..tutorial yang bagus

    BalasHapus
  2. UnknownMinggu, Mei 26, 2013

    scriptnya panjang banget mas, apa ndak berat di loading tuh?

    BalasHapus
  3. AnonimSenin, Mei 27, 2013

    makasih mas, nice info..

    BalasHapus
  4. dedetea66Senin, Mei 27, 2013

    waduuuuhhh meni puanjang kitu scriptna,,,,,,ngaruh teu kana loading kANG BRO,,

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 28, 2013

      tidak kang .. masih tetep cepet loadingnya ...

      Hapus
  5. AnonimSenin, Mei 27, 2013

    cantik nih menarik menunya mas.. terimakasih tutorialnya.

    BalasHapus
  6. MANG YONOSelasa, Mei 28, 2013

    mau coba pasang tapi waduh panjang pisan euy kodena... bisa separo ndak kang

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 28, 2013

      pan amang mah sok suka nu panjang atuh hehe
      moal tiasa mang engke hasilna sapotong atuh

      Hapus
  7. UnknownJumat, Mei 31, 2013

    nambah berapa kb nih templatenya??.. banyak banget.

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya