Cara membuat dropdown menu menggunakan css dan jquery dengan aksi klik

Selamat pagi sahabat blogger, kali ini saya akan berikan tutorial mengenai css dan jquery. Saya akan memberikan tutorial cara membuat dropdown menu menggunakan css dan jquery, yang memiliki aksi klik. Berikut saya akan berikan scriptnya.

1. Buat fiel index.html

<link rel="stylesheet" media="screen" type="text/css" href="layout.css">

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<div class="example">

    <div class="menu">

        <span>

            <ul style="left:20px;" id="nav">

                <li style="background-color:#09F;" ><a href="#"><img src="home.jpg" height="19" width="19"></a></li>

                <li style="margin-left:2px;"><a href="#">Tutorials</a>

                    <div class="subs">

                        <div>

                            <ul>

                                <li><ul>

                                        <li><a href="#">Link 1</a></li>

                                        <li><a href="#">Link 2</a></li>

                                        <li><a href="#">Link 3</a></li>

                                        <li><a href="#">Link 4</a></li>

                                        <li><a href="#">Link 5</a></li>

                                    </ul>

                                </li>

                                <li><h3>&nbsp;</h3>

                                    <ul>

                                        <li><a href="#">Link 6</a></li>

                                        <li><a href="#">Link 7</a></li>

                                        <li><a href="#">Link 8</a></li>

                                    </ul>

                                </li>

                                <li><h3>&nbsp;</h3>

                                    <ul>

                                        <li><a href="#">Link 9</a></li>

                                        <li><a href="#">Link 10</a></li>

                                    </ul>

                                </li>

                            </ul>

                        </div>

                    </div>

                </li>

                <li><a href="http://webs21.blogspot.com/">Go Back To The Tutorial</a></li>

                 <li><input type="text" name="cari" class="search" placeholder="Cari disini..." /><input type="submit" value="Search" class="submit" /></li>

            </ul>

        </span>

    </div>

</div>

Silahkan copas script diatas, lalu copas juga script yang ke dua.

2. Buat file bernama menus.css

body {

                margin:0;

                padding:0;

}

/* main menu styles */

.menu {

    background-color:#000;

    width:100%;

                position:fixed;

                border-bottom:4px solid #09F ;

}

.menu > span {

    display:inline-block;

    margin-left:0 auto;

}

#nav {

    display:inline;

    text-align:left;

    position:relative;

    list-style-type:none;

}

#nav > li {

    float:left;

    padding:0;

    position:relative;

}

#nav > li > a {

                font-weight:bold;

    color:#CCC;

    display:block;

    font:16px Tahoma, Geneva, sans-serif;

                padding:13px 20px;

    position:relative;

    text-decoration:none;

}

#nav > li > a:hover {

                color:#fff;

                background:#09F;

}

#nav > li.selected  > a {

    background-color:#09F;

    z-index:2;

                color:#fff;

}

#nav li div {

    position:relative;

}

#nav li div div {

    box-shadow:0 0 1px 1px rgba(0,0,0,0.5);

                -webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.5);

                -moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.5);

                border-bottom-left-radius:4px;

                border-bottom-right-radius:4px;

    background-color:#FFFFFF;

    border:1px solid #999999;

    padding:1px 0;

    display:none;

    font-size:14px;

    margin:0;

    position:absolute;

    z-index:1;

    width:180px;

}

#nav li div div.wrp2 {

    width:380px;

}

#nav .sep {

    left:180px;

    border-left:1px solid #E3E3E3;

    bottom:0;

    height:auto;

    margin:15px 0;

    position:absolute;

    top:0;

    width:1px;

}

#nav li div ul {

    padding-left:0px;

    padding-right:0px;

    position:relative;

    width:180px;

    float:left;

    list-style-type:none;

}

#nav li div ul li {

    margin:0;

    padding:0;

}

#nav li div ul li h3 {

    border-bottom:1px solid #E3E3E3;

    color:#4F4F4F;

    margin:-1px;

    font-size:14px

    padding:0px;

}

#nav li ul ul li {

    margin:0;

    padding:0;

}

#nav li ul ul li a {

    color:#0060A6;

    display:block;

    margin-bottom:1px;

    padding:5px 10px;

    text-decoration:none;

    font-size:14px;

}

#nav li ul ul li a:hover{

    background-color:#09F;

    color:#fff;

                padding:5px 10px;

}

/*Tombol cari*/

.search {

                margin-top:6px;

                float:right;

                margin-right:-700px;

                border-radius:40px 0 0 40px;

                height:30px;

                padding:12px;

}

.submit {

                background-color:#999;

                height:30px;

                padding:0px;

                width:70px;

                margin-top:6px;

                float:right;

                margin-right:-757px;

                border-radius:0 40px 40px 0;

}

.submit:hover {

                background-color:#CCC;

}

Sampai disini dulu tutorial yang akan saya berikan, untuk mendapatkan script lengkapnya. Silahkan klik link download dibawah.

  DOWNLOAD

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Abdul Sopyan, Published at 20.50 and have 0 komentar