Tutorial membuat menu/submenu drop down css jquery dan source code

Tutorial kali ini membahas tentang cara membuat menu atau submenu drop down dengan css dan jquery, setelah saya mencoba dengan css dan jquery akhir nya memperoleh hasil yang lumayan menarik,.,hehe,. sebelum mengikuti langkah-langkah dari ebook/tutorial ini sebaiknya mengetahu tentang penjelasan css dan jquery, okay langsung saja mengenai css singkatan dari (Cascading Style Sheet) merupakan cara mempercantik tampilan website yang diruba pada bagian Background, Text, Fonts, Links, Lists, dan Tables serta tag-tag yang lain. kemudian penjelasan jquery yaitu sebuah framework javascript yang sangat membatu dalam pembuatan website yang menarik dan anggun dilihat oleh mata, jquery selain berguna bagi seorang programmer web juga sangatlah berguna bagi para desainer web karena dapat membentu mereka membuat sebuah desain web yang interaktif dan menarik. nah.. kalau sudah paham mengenai css dan jquery maka langsung saja menuju ke TKP..hehe

Pertama Buat file menu.html kira-kira sepeti ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS3 Menu - Impressionist UI - by Valeriu Timbuc for Design Modo</title>
    <link rel="stylesheet" href="style.css" media="screen">
    <style type="text/css">
        html, body { margin: 0;    padding: 0; }
        ul.menu { margin: 250px auto 0 auto; }
    </style>
</head>
<body>
<ul><li><a href="#">Views</a>
      <ul>
          <li><a href="#">Documents</a></li>
          <li><a href="#">Messages</a></li>
          <li><a href="#">Sign Out</a></li>
      </ul>
    </li>
</ul> 
<!-- end .menu -->
</body>
</html>

Kedua Buat File css nya dengan nama style.css kira-kira seperti ini :

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Menu */
.menu {    
    height: 40px;
    width: 505px;

    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}

/* Links */

.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;

    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;

    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;

    opacity: 0;

    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;

    border: none;
    border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

/* Icons */

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Setelah selesai semua tinggal jalankan dengan cara klik file nama.html lihat hasil nya
ini contoh yang sudah saya tambahkan beberapa fitur..hehe klik here

Untuk Download Souce Code nya Silahkan Klik Here

4 thoughts on “Tutorial membuat menu/submenu drop down css jquery dan source code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s