Menu Navigasi dengan Efek Hover Transisi CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Selasa, 25 Februari 2014 0 komentar
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 :
Dark Theme Menu Navigasi
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 :
Light Theme Menu Navigasi

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
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Menu Navigasi dengan Efek Hover Transisi CSS3
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2014/02/menu-navigasi-dengan-efek-hover-transisi-css3.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam