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
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger
TOP