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

Tutorial tentang cara membuat menu atau submenu drop down dengan css dan jquery pada website atau blog, setelah saya mencoba dengan css dan jquery akhir nya memperoleh hasil yang lumayan menarik,.,hehe,. sebelum mengikuti langkah-langkah dari ebook atau tutorial ini sebaiknya mengetahu tentang penjelasan css dan jquery, ok 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>Percobaan Submenu</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

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

4/ 5

Oleh Anas Turmudzi

Anas Turmudzi 23:41 3 Komentar