Menu Navigasi dengan Efek Hover Transisi CSS3

Menu Navigasi dengan Efek Hover Transisi CSS3 | Cara Membuat Komposisi Perubahan Transisi menu Website / Blogger (blogspot) | Anda ingin rombak ganti dan upgrade template anda ?

Contoh :
kode source :

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


Contoh :

kode source :

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



---------------------------------------------
kasih link :


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

----------------------------------------------------

Bila ingin mengasih tambahan :

klo mo pke submenu tinggal ditambah html:
<li class='has-sub '><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>


Cukup enak dan mudah dong sob, bila artikel diatas ada kesalahan segera tulis di kotak komentar di bawah ini sob. terima kasih. tulisan ini seputar Menu Navigasi dengan Efek Hover Transisi CSS3