Simple Horizontal Menu Pure CSS3

Menu navigasi ini tampilannya sederhana, menggunakan kode CSS3 untuk mempercepat pemuatan konten. Efek transisi cukup mempermanis tampilan menu horizontal ini. Adapun langkah-langkah installasinya cukup mudah. Silahkan ikuti tutorial di bawah ini.

Simple Horizontal Menu Pure CSS3

DEMO 1 | DEMO 2

Membuat Template Cadangan

Masuk ke Blogger.com » Template » Cadangkan/Pulihkan » Unduh Template Lengkap. Tujuannya sebagai langkah antisipasi jika nanti terjadi kesalahan

Menyisipkan Kode HTML

Dari halaman template sekarang masuk ke Edit HTML. Sebelumnya pastikan terlebih dahulu di mana menu ini akan dipasang. Di atas header atau di atas main-wrapper? Ok, sekarang kita akan mencoba memasangnya di atas header. Cari kode yang dihighlight berikut ini.

<header>
     <div class='header-outer'>
     <div class='header-cap-top cap-top'>
   .........
       </div>
     </div>
   </header>

Setiap template mempunyai susunan kode yang berbeda-beda, kode di atas hanyalah sebagai contoh semata

Jika sudah ketemu salin dan tempel kode berikut tepat di atas kode <header>

<ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About TheCompany</a></li>   
      <li><a href="#">History</a>     
      <ul>
   <li><a href="#"class="history">History</a></li>
   <li><a href="#" class="present">Present</a></li>     
   <li><a href="#" class="employees">Employees</a></li>           
      </ul>
      </li>
      <li><a href="#">Cases</a>
      <ul>
   <li><a href="#" class="app">iPhone app</a></li>     
   <li><a href="#" class="website">Website</a></li>     
   <li><a href="#" class="theme">Free theme</a>
      </li>
      </ul>
      </li>
      <li><a href="#">Contact Us</a></li>   
      <li><a href="#">Policy</a>   
</ul>

Modifikasi kode di atas sesuai dengan link yang ingin Anda tempatkan pada menu navigasi

Menambahkan Kode CSS

Sekarang kita akan menambahkan kode CSS3, salin kemudian tempel kode CSS berikut di atas kode ]]></b:skin>

/*
 Name: CSS3 Dropdown Menu
 Created in: March 2013
 Description: Basic CSS3 Dropdown Menu with simple animation
 Version: 1.0
 Author: Christian Vasile
 Author URL: http://christianvasile.com
----------------------------------------------- */


/* Reset
----------------------------------------------- */
.menu,
.menu ul,
.menu li,
.menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

/* Menu
----------------------------------------------- */
.menu {
 height: 40px;
 width: 590px;
 
 background: #4c4e5a;
 
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 
 background: linear-gradient(top, #535562 0%, #202023 100%);
 background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
 background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);  
 background: -ms-linear-gradient(top, #535562 0%, #202023 100%); 
}

.menu li {
 list-style: none;
 float: left;
 display: block;
 height: 40px;
 position: relative;
}

/* Links
----------------------------------------------- */
.menu li a {
 display: block;
 text-decoration: none;
 font-weight: bold;
 color: #FFF;
 font-size: 15px;
 padding: 0 15px;
 margin: 5px 0;
 line-height: 30px;
 border-left: 1px solid #393942;
 border-right: 1px solid #393942;
 
 transition: color .3s ease;
 -moz-transition: color .3s ease;
 -webkit-transition: color .3s ease;
 -ms-transition: color .3s ease;   
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

.menu li:hover > a { color: #b94861; }

/* Sub menu
----------------------------------------------- */

.menu ul {
 position: absolute;
 opacity: 0;
 background: #575a62;
 
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px; 
  
 transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -webkit-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;    
}

.menu li:hover > ul {
 opacity: 1;
}

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
     
}

.menu li:hover > ul li {
 height: auto;
 overflow: visible;
     }

.menu ul li a {
 width: 100px;
 margin: 0;
 padding: 5px 15px;
 border: none;
 border-bottom: 1px solid #353539; 
}

.menu ul li:last-child a { border: none; }

Anda bebas memodifikasi kode di atas supaya lebih sesuai dengan tampilan blog Anda

Simpan Pengaturan Template

Simpan pengaturan template Anda dan previes hasilnya. Semoga bermanfaat.

sumber kode: http://www.1stwebdesigner.com/

Tweet

Postingan terkait:

Ditulis EM — Wednesday, 8 May 2013 — 4 Comments — Blogger Hacks, CSS3, Navigation Menu