Menu navigasi drop down dengan pure CSS3

Navigasi

Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radius, box-shadow, text-shadow dan gradien linier. Menu navigasi ini tampil sempurna pada Firefox, Chrome dan juga Safari. silahkan anda gunakan jika tertarik.


Kode HTML Untuk Menu Navigation Dengan Multi Level Drop Down

<!-- Pure CSS3 Multi Level Drop Down Navigation Menu  -->

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
 <ul>
 <li><a href="#">Level 2.1</a></li>
 <li><a href="#">Level 2.2</a></li>
 <li><a href="#">Level 2.3</a></li>
 <li><a href="#">Level 2.4</a></li>

 <li><a href="#">Level 2.5</a></li>
 </ul>
</li>
<li><a href="#">Three Levels</a>
 <ul>
 <li><a href="#">Level 2.1</a></li>
 <li><a href="#">Level 2.2</a></li>
 <li><a href="#">Level 2.3</a>

  <ul>
  <li><a href="#">Level 2.3.1</a></li>
  <li><a href="#">Level 2.3.2</a></li>
  <li><a href="#">Level 2.3.3</a></li>
  <li><a href="#">Level 2.3.4</a></li>
  <li><a href="#">Level 2.3.5</a></li>

  <li><a href="#">Level 2.3.6</a></li>
  <li><a href="#">Level 2.3.7</a></li>
  </ul>
 </li>
 <li><a href="#">Level 2.4</a></li>
 <li><a href="#">Level 2.5</a></li>
 </ul>

</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<!-- Pure CSS3 Multi Level Drop Down Navigation Menu -->

CSS Kode Untuk Menu Navigation Dengan Multi Level Drop Down

/* Pure CSS3 Multi Level Drop Down Navigation Menu */

#nav {
    float: left;
    font: bold 12px Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    border-top: 1px solid #2b2e30;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#nav ul {
 margin:0;
 padding:0;
 list-style:none;
}

#nav ul li {
 float:left;
}

#nav ul li a {
    float: left;
 color:#d4d4d4;
   padding: 10px 20px;
 text-decoration:none;
    background:#3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0,0,0,0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover,
#nav ul li:hover > a {
    color: #252525;
    background:#3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #2c2c2c;
   background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-top: 1px solid #7BAED9;
    text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li ul {
     background:#3C4042;
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     border-radius: 0 0 10px 10px;
     -moz-border-radius: 0 0 10px 10px;
     -webkit-border-radius: 0 0 10px 10px;
     left: -999em;
     margin: 35px 0 0;
     position: absolute;
     width: 160px;
     z-index: 9999;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
     left: auto;
}

#nav li ul a {
     background: none;
     border: 0 none;
     margin-right: 0;
     width: 120px;
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}

#nav li li ul {
     margin: -1px 0 0 160px;
     -webkit-border-radius: 0 10px 10px 10px;
     -moz-border-radius: 0 10px 10px 10px;
     border-radius: 0 10px 10px 10px;
     visibility:hidden;
}

#nav li li:hover ul {
     visibility:visible;
}

#nav ul ul li:last-child > a {
 -moz-border-radius:0 0 10px 10px;
 -webkit-border-radius:0 0 10px 10px;
 border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
 -moz-border-radius:0 10px 0 0;
 -webkit-border-radius:0 10px 0 0;
 border-radius:0 10px 0 0;
}

Jika ingin anda bisa mendownload menu navigasi ini di [link ini]

Untuk pertanyaan silahkan sampaikan di formulir komentar, semoga bermanfaat...

Artikel Terkait

  • Link aktif di menu dengan tag conditional
    Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada …
  • Cara Membuat Metro UI Navigation Menu
    Apa menu METRO UI? Jika anda pernah membuka antarmuka Microsoft Windows 8, atau rentang baru dari Windows ponsel Smart, maka menu METRO UI ini bukanlah hal yang baru bagi mereka. Menu ini terinspirasi dari antarmuka navigasi Windows 8. Jika anda belum tahu, silahkan lihat screenshot berikut. Cara Membuat Menu Metro Windows 8 seperti dala…
  • New AJAX Navigation Menu Widget untuk Blogger
    AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded  widget ini dan menambahkan fitur disesuaikan. Demo Bagaimana kerjanya ? Nah, widget ini bekerja dengan …
  • Menu Rocking dan Rolling Rounded
    Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Demo Download Langsung saja kita lanjut untuk mengupas menu ini…
  • Menu navigasi drop down dengan pure CSS3
    Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radiu…
  • Floating Horizontal Bar Social Sharing untuk BlogSpot
    Situs Jejaring Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang ini setiap Orang akan suka Berbagi artikel bagus dengan komunitas sosial yang menguntungkan setiap orang dan tentunya para penyedia artikel. Ini penting untuk setiap blogger d…

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...