Simple Menu Navigasi Efek Hover Transisi

proBlogiz

---

CSS3 Menu Navigasi dengan Efek Hover Transisi

Ada banyak sekali style menu navigasi baik horizontal maupun vertikal, ada yang hanya meggunakan kode CSS3 bahkan yang memakai Javascript dan jQuery efek. Jika itu semua membuat Anda bingung dan ribet, kini saatnya pakai simple menu navigasi yang gak rumit, fast loading, no javascript, semua hanya dengan CSS3. Walaupun sederhana hanya menggunakan  Efek Hover Transisi ( CSS) tampilan menu navigasi ini tidak kalah Sob, dengan efek-efek yang dibuat dengan script jQuery atau Javascript yang rumit itu. 

Mau tahu tampilan Simple Menu Navigasi dengan Efek Hover Transisi?
Langsung aja  klik  Preview Design Tool untuk DEMO LIVE-nya

Cara menggunakan Preview Design Tool :

Klik tombol Clear pada area kode dan CSS, kemudian copy salah satu kode Menu Nav dibawah dan paste-kan di area kode tersebut. Selanjutnya klik Preview untuk melihat hasil atau tampilan menu navigasi.

Untuk membuat Menu Navigasi dengan Efek Hover Transisi, tidak sulit hanya ber-eksperimen dengan kode-kode CSS saja dengan menambahkan kode HTML untuk ekskusinya. Kali ini saya sediakan dua theme menu navigasi horizontal Efek Hover Transisi, Dark Theme Menu Nav dan Light Theme Menu Nav.

Pemasangan Simple Menu Navigasi Efek Hover Transisi di blog, sangat mudah copy semua kode menu nav yang Anda pilih dan tambahkan sebagai widget ( cara pemasangan menu nav pada widget baca DISINI ).

Selanjutnya Anda bisa tempatkan menu nav ini tepat di bawah Header Blog Title ( Judul Blog ).

Dark Theme Menu Navigasi

source code :

<ul class="navigation">
 <li>
  <h2>Home</h2>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <h2>Tutorial</h2>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <h2>About</h2>
  <p>Who we are</p>
 </li>
 <li>
  <h2>Contact</h2>
  <p>Let me know about you</p>
 </li>
</ul>

<style>
* {margin: 0; padding: 0;}

body {
 font-family: 'Lucida Grande', helvetica, arial, sans-serif;
 font-size: 12px;color: #fff;
}

.navigation {
 margin: 200px 20px;
 background: #000000;
 overflow: hidden;
 width: 760px;
 
 box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
 width: 120px; border-left: 5px solid #666;
 float: left;
 cursor: pointer;
 list-style-type: none;
 
 padding: 10px 50px 10px 15px;
 
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}

.navigation li h2 {
 font-family: georgia;
 font-weight: normal;
 font-style: italic;
 font-size: 14px;
 margin-bottom: 5px;
 line-height: 16px;
}

.navigation li p{
 font-size: 11px;
 color: #999;
 
 -webkit-transition: all 0.1s ease-in;
 -moz-transition: all 0.1s ease-in;
 -o-transition: all 0.1s ease-in;
}

.navigation li:hover {
 background: #fff;
 border-left: 5px solid #000;
}

.navigation li:hover h2 {
 font-weight: bold;
 color: #000;
}

.navigation li:hover p {
 color: #000;
 padding-left: 5px;
}
</style>

Light Theme Menu Navigasi

source code :

<ul class="navigation">
 <li>
  <h2>Home</h2>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <h2>Tutorial</h2>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <h2>About</h2>
  <p>Who we are</p>
 </li>
 <li>
  <h2>Contact</h2>
  <p>Let me know about you</p>
 </li>
</ul>
<style>
* {margin: 0; padding: 0;}

body {
 font-family: 'Lucida Grande', helvetica, arial, sans-serif;
 font-size: 12px;
}

.navigation {
 margin: 200px 20px;
 background: #fff;
 overflow: hidden;
 width: 760px;
 
 box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
 width: 120px; border-left: 5px solid #666;
 float: left;
 cursor: pointer;
 list-style-type: none;
 
 padding: 10px 50px 10px 15px;
 
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}

.navigation li h2 {
 font-family: georgia;
 font-weight: normal;
 font-style: italic;
 font-size: 14px;
 margin-bottom: 5px;
 line-height: 16px;
}

.navigation li p{
 font-size: 11px;
 color: #999;
 
 -webkit-transition: all 0.1s ease-in;
 -moz-transition: all 0.1s ease-in;
 -o-transition: all 0.1s ease-in;
}

.navigation li:hover {
 background: #333;
 border-left: 5px solid #000;
}

.navigation li:hover h2 {
 font-weight: bold;
 color: #fff;
}

.navigation li:hover p {
 color: #ccc;
 padding-left: 5px;
}
</style>

Untuk membuat link pada menu diatas, tambahkan tag <a href='#'> seperti contoh berikut:

<ul class="navigation">
 <li>
  <a href='#'><h2>Home</h2></a>
  <p>Welcome to proBlogiz</p>
 </li>
 <li>
  <a href='#'><h2>Tutorial</h2></a>
  <p>CSS/Javascript/jQuery</p>
 </li>
 <li>
  <a href='#'><h2>About</h2></a>
  <p>Who we are</p>
 </li>
 <li>
  <a href='#'><h2>Contact</h2></a>
  <p>Let me know about you</p>
 </li>
</ul>

Untuk menambahkan atau mengurangi item menu cukup edit bagian HTML berikut :

         <li>
        <a href='#'><h2>Nama Menu</h2></a>
         <p>keterangan menu</p>
        </li>

Tambahkan kode HTML diatas sebelum </ul> untuk menambah item menu.
Hapus jika Anda ingin menguranginya, edit nama item menu tesebut sesuai keperluan Anda.

Untuk pilihan Menu Navigasi Horizontal maupun Drop Down Menu dengan CSS yang telah proBlogiz sharing sebelumnya :

• 10 Menu Drop Down Keren Pure CSS
• Koleksi Menu Navigasi Horizontal Keren Untuk Blogger
• Koleksi Menu Navigasi Horizontal Keren Bag. II
• Koleksi Menu Navigasi Horizontal Keren Bag. III

Dengan efek Lavalamp jQuery :

• Menu Navigasi Horizontal Efek Lavalamp ( jQuery Gooey )

Ok Sob, dengan beberapa pilihan menu navigasi untuk Blogger, semoga ada yang dapat berguna atau salah satu menu nav yang Anda cari selama ini.

Thanks....keep share!!!