Cara Membuat Dropdown Menu

Ini adalah hal yang pasti bahwa fitur CSS3 seperti transisi, animasi dan transformasi dapat menambahkan bumbu tambahan untuk desain Anda.

Dalam artikel ini Anda akan melihat bagaimana Anda bisa membangun sebuah menu dropdown animasi CSS3 mengagumkan dengan beberapa fitur keren.

Sementara ini masih versi up-to-date, saya hanya ingin membiarkan Anda tahu saya membuat versi perbaikan dan animasi menu CSS3 ini. Anda mungkin ingin memeriksa yang pertama kali.

Hari ini Anda akan belajar cara membuat menu dropdown CSS3 Anda sendiri, tanpa kode Javascript tambahan. Tidak ada gambar yang digunakan dan, seperti biasa, minimal markup HTML. Mari kita lihat bagaimana dibuat:

Struktur HTML 

Seperti yang Anda lihat di baris berikut, struktur HTML tidak mengandung lebih dari yang kita butuhkan, itu adalah salah satu yang minimal dan mudah dimengerti.

Code

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Satu hal lagi, juga sangat penting, ini adalah HTML semantik. Ini adalah struktur logis dan memiliki arti yang benar, bahkan jika styling benar-benar hilang pada saat ini:

Bersih dan dapat diakses struktur HTML

Dalam contoh saya, "Kategori" bagian adalah satu-satunya yang mengandung sub-daftar, tetapi Anda dapat mudah menambahkan sub-daftar untuk setiap item.

Code

/* Main */
#menu {
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 50px;
    box-shadow: 0 2px 1px #9c9c9c;
}
#menu li {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}
#menu a {
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
    color: #fafafa;
}
*html #menu li a:hover { /* IE6 */
    color: #fafafa;
}
#menu li:hover > ul {
    display: block;
}
/* Sub-menu */
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;  
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;  
    background-color: #444;  
    background-image: linear-gradient(#444, #111);  
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    box-shadow: 0 1px 0 #111111,
                0 2px 0 #777777;
}
#menu ul li:last-child {
    box-shadow: none;  
}
#menu ul a {  
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
*html #menu ul a { /* IE6 */  
    height: 10px;
    width: 150px;
}
*:first-child+html #menu ul a { /* IE7 */  
    height: 10px;
    width: 150px;
}
#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a {
    border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
}
#menu ul li:last-child a {
    border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Sub-menu ditampilkan ketika melayang pada elemen li. Seperti yang Anda sudah tahu, IE6 tidak mendukung melayang pada elemen non-jangkar.

Meskipun, pada awal artikel ini saya berkata "tanpa Javascript", dalam rangka menjaga aksesibilitas juga untuk IE6, perkenankan saya untuk menambahkan beberapa kode scripting:

Code

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').show();
            }).mouseout(function(){
            $(this).children('ul').hide();
            })
      }
    });      
</script>

Anda dapat mengabaikan bahwa, sebagai IE6 akan turun. Hitungan mundur akhir dimulai!

Solusi atas membutuhkan Jquery. Juga, saya pikir ini seharusnya tidak menjadi masalah sama sekali, sementara, saat ini Jquery hampir "default" ketika berbicara tentang situs web modern.

Menargetkan IE6 & IE7

browser Selain mundur Jquery ini, CSS di atas mencakup beberapa baris khusus untuk IE6 dan IE7:

Code

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Ada juga hacks IE lain yang tidak akan lulus validasi file CSS ... Jika Anda tidak suka dengan cara ini, hanya menggunakan komentar bersyarat!

Ini Dia

• Home
• Categories
  • CSS
    • Item 11
    • Item 12
    • Item 13
    • Item 14
  • Graphic design
    • Item 21
    • Item 22
    • Item 23
    • Item 24
  • Development tools
    • Item 31
    • Item 32
    • Item 33
    • Item 34
  • Web design
    • Item 41
    • Item 42
    • Item 43
    • Item 44
• Work
  • Work 1
    • Work 11
      • Work 111
      • Work 112
      • Work 113
    • Work 12
      • Work 121
      • Work 122
      • Work 123
    • Work 13
      • Work 131
      • Work 132
      • Work 133
  • Work 2
    • Work 21
      • Work 211
      • Work 212
      • Work 213
    • Work 22
      • Work 221
      • Work 222
      • Work 223
    • Work 23
      • Work 231
      • Work 232
      • Work 233
  • Work 3
    • Work 31
      • Work 311
      • Work 312
      • Work 313
    • Work 32
      • Work 321
      • Work 322
      • Work 323
    • Work 33
      • Work 331
      • Work 332
      • Work 333
• About
• Contact

Harap Anda menikmati tutorial ini, jangan lupa untuk memberikan komentar!