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> </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> </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.
