Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

CSS3 Menu Navigasi dengan Efek Hover Transisi

Simple Menu Navigasi 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

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

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 :
Dengan efek Lavalamp jQuery :

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!!!

Artikel Terkait Lainnya:
Click here for comments

7 komentar

thank's info'y gan...
izin sedooott....

REPLY

@Keiruchan Agatha, @Risalahati
thanks semua:)
semoga dapat bermanfaat gan

REPLY

masukin linknya gimana gan ?? maap msh newbie

REPLY

untuk memberi link tinggal tambahin tag <a href='#'> contoh:
<li><a href='http://problogiz.blogspot.com/'> <h2>Home</h2></a> <p>Welcome to proBlogiz</p> </li>

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|