Menu navigasi dengan submenu dengan memanfaatkan CSS3 transitions sehingga penggunaan Jquery bisa dikurangi

CSS3 Drop Down Menu - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Menu navigasi dengan submenu dengan memanfaatkan CSS3 transitions sehingga penggunaan Jquery bisa dikurangi

CSS3 Drop Down Menu

CSS3 Drop Down Menu
Salah satu hal yang dilakukan untuk membantu dalam memudahkan pengunjung blog dalam menjelajahi blog yang kita buat yaitu adanya menu navigasi. Menu navigasi pada umumnya diletak disidebar atau di bagian atas blog. Setelah meletakkan menunavigasi terkandang kita tidak puas dengan tampilannya ataupun efek pada menu navigasi tersebut. Dan kebanyakan efek pada menu navigasi menggunakan Jquery misalnya pada efek dropdown jika menu navigasi yang kita gunakan mempunyai sub menu. Tapi tahukah kalian bahwa efek dropdown tersebut dapat dibuat tanpa menggunakan Jquery. Salah satunya dengan memanfaatkan fitur transisi yang ada pada CSS3. Kali ini saya akan membagikan satu contoh menu navigasi dropdown dengan sub menu.

HTML

Struktur HTML dari menu navigasi ini dapat dilihat dibawah. Strukturnya mudah untuk dipahami. dan terdapat class pada menu dan sub menunya.



<div id="top">
 <nav id="topmenu">
     <ul>
      <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Portfolio<span class="arrow">More Link</span></a>
             <ul class="sublist">
                <li><a href="#">Sub link</a></li>
                <li><a href="#">Sub link</a></li>
                <li><a href="#">Sub link<span class="arrow-right">More Link</span></a>
                 <ul class="subsublist">
                    <li><a href="#">Sub Sub link</a></li>
                    <li><a href="#">Sub Sub link</a></li>
                    <li><a href="#">Sub Sub link</a></li>
                    </ul>
                    </li>
                </ul>
                </li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Tutorials <span class="arrow">More Link</span></a>
             <ul class="sublist">
                    <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                     <ul class="subsublist">
                         <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                        </ul>
                    </li>
                    <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                     <ul class="subsublist">
                         <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                        </ul>
                    </li>
                    <li><a href="">Sub Link</a></li>
                    <li><a href="">Sub Link</a></li>
                    <li><a href="">Sub Link<span class="arrow-right">More Link</span></a>
                     <ul class="subsublist">
                         <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                            <li><a href="">Sub Sub Link</a></li>
                        </ul>
                        </li>
             </ul>
            </li>
            <li><a href="">Resource</a></li>
            <li><a href="">Submit</a></li>
            <li><a href="">Advertise</a></li>
            <li><a href="">FAQ</a></li>
            
     </ul>
    </nav>
</div>

CSS dan CSS3 Transitions

Dibawah ini merupakan kode CSS yang digunakan untuk membuat efek dropdown. CSS3 yang digunakan untuk memberikan efek tersebut yaitu dengan menggunakan transisi yang bertingkat. yaitu opacity dan visibility, margin. Pada visibility digunakan untuk menyembunyikan submenu. Untuk lebih jelasnya perhatikan kode dibawah dan cobalah untuk menghapus bagian yang ada visibility dan lihat bagaimana perbedaannya.

#top a{
-moz-transition:color 0.3s ease-out;
 -webkit-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 transition:color 0.3s ease-out;}

#top {
 background:#222;
 float:left;
 height:30px;
 line-height:30px;
 width:100%;font-size: 10px;
font-family: "Open Sans", serif;
}

nav#topmenu {
 margin:0 auto;
 padding:0 15px;
 position:relative;
 width:960px;
}
nav#topmenu ul {
 margin:0;
 padding:0;
}

nav#topmenu ul li {
 float:left;
 position:relative;
 font-size:10px;
 list-style:none;
 margin:0;
 padding:0;
 width:90px;
 text-align:center;
 text-transform:uppercase;
 border-right:1px solid #ccc; 
}
nav#topmenu ul li:first-child {
 border-left:1px solid #ccc;
}
nav#topmenu ul li a {
 color:rgba(255,255,255,0.6);
 text-decoration:none;
 display:block;
}
nav#topmenu ul li a:hover {
 color:#fff;
}
nav#topmenu ul li:hover > a { /* Ini aktif jika mouse ada diatas link */
 color:#fff;
}
nav#topmenu ul li span { 
 background:url(http://1.bp.blogspot.com/-r4qDdjTQdPo/UCULASeK9rI/AAAAAAAAEU0/lEdySAH_52o/s1600/arrow.png) center no-repeat;
 height:10px;
 position:absolute;
 text-indent:-9999px;
 top:10px;
 right:5px;
 width:10px;
}
nav#topmenu ul li span.arrow {
 background-position:0 2px;
}
nav#topmenu ul li span.arrow-right {
 background-position:-10px 2px;
}
nav#topmenu ul li ul.sublist { /* Style untuk sub menu pertama */
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 left:0px;
 top:31px;
 background:#222;
 width:90px;
 opacity:0;
 visibility:hidden; /* menghilang jika diselect bahkan dengan opacity 0 */
        
        /* CSS3 Transitions bertingkat */

 -moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
 -webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
 -o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
 transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li {
 border:none;
 border-bottom:1px solid #ccc;
 clear:both;
 margin-top:-15px;
 padding:0;
 width:90px;
 -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

nav#topmenu ul li ul.sublist li a {
 color:rgba(255,255,255,0);
}
nav#topmenu ul li:hover ul.sublist {
 opacity:1;
 visibility:visible;
}
nav#topmenu ul li:hover ul.sublist li {
 margin-top:0;
 opacity:1;
}
nav#topmenu ul li:hover ul.sublist li a {
 color:rgba(255,255,255,0.6); 
 -moz-transition:color 0.1s ease-out;
 -webkit-transition:color 0.1s ease-out;
 -o-transition:color 0.1s ease-out;
 transition:color 0.1s ease-out;
}
nav#topmenu ul li:hover ul.sublist li a:hover {
 color:rgba(255,255,255,1); 
 -moz-transition:color 0.3s ease-out;
 -webkit-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 transition:color 0.3s ease-out;
}
hnav#topmenu ul li:hover ul.sublist li:hover > a { 
        /* Akan aktif jika mouse berada diatas submenu */
 color:#fff;
}
/* Style Sub Sub menu */
nav#topmenu ul li ul.sublist li ul.subsublist {
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 left:61px;
 top:0px;
 background:#222;
 width:90px;
 opacity:0;
 visibility:hidden;
 -moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 -webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 -o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li ul.subsublist li{
 border:none;
 border-bottom:1px solid #ccc;
 clear:both;
 margin:0;
 padding:0;
 width:90px;
 opacity:1;
}
nav#topmenu ul li ul.sublist li:hover ul.subsublist {
 opacity:1;
 left:91px;
 visibility:visible;
}


Penggunaan CSS3 transitions masih memiliki sedikit kekurangan yaitu pada browser internet explore efek ini tidak dapat terlihat karena IE belum mendukung penggunaan transitions jadi pada browser IE hanya terlihat efek hover yang biasa. Sekian untuk kali ini semoga bermanfaat.

Sumber : Alessioatzeni Dropdown menu
SatankMKR
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

6 comments:

  1. Sobat, saya lihat-lihat tampilan blog Anda mirip dengan under-88.blogspot.com.

    Klian temanan yah?

    BalasHapus
    Balasan
    1. Klo dari konsepnya memang agak mirip...
      Temanan sesama blogger..
      :)

      Hapus
    2. makanya mirip2 gimana gitu :Q

      Hapus
  2. mas MKR bisa pesan template gak ? 8-)
    kalau di bayar 100 RB mau gak $-)
    hehe mudah mudahan bisa ya
    kunjungi blog saya yg pakai mxfluity keren banget saya pengen
    http://sora-no-ao-fansubs.blogspot.com/
    ok gan kalau setuju kirimi saya email
    google
    rajieb471@gmail.com
    yahoo
    rajiebadilfie@yahoo.co.id
    facebook
    https://www.facebook.com/rajieb.adilfie
    ok
    sekali lagi terimakasih banyak templatenya

    BalasHapus
  3. Tanks Master saya nyari2 tutor eeeh dape di sini. ini blogger pendatang baru dari palangka raya. kalo boleh minta masukan ?? gimana agar blog saya bisa lebih baik... biar kaya blogger beneran gituuuuuuuuh!! ni alamat bog saya http://portnews21.blogspot.com/ . tolong masukan saran dan bimbingannya yeeeaaah. terimakasih sebelumnya

    BalasHapus
  4. sip mbah... mohon kunjungan ke blog saya mbah satank... tolong di kritik biar kasih saran, soalnya saya pake template bikinan anda.. makasih

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP