Cara membuat Dropdown menu dengan Jquery dan Css
Membuat dropdown menu dengan css, menu adalah hal penting dalam sebuah website, menu yang baik akan memudahkan pengunjung dalam menjelajahi website kita, terutama ketika website kita ternyata memiliki halaman yang terdiri dari sub dan sub - sub lain.
Pada Tutorial kali ini kita akan mencoba membuat Dropdown menu dengan CSS, dan kita akan mempercantik menu yang kita buat dengan sedikit bantuan Jquery.
Struktur HTML
Disini kita perlu mempersiapkan struktur HTML terlebih dahulu, buat file dengan nama index.html , lalu tulis kode :
Sisipkan Jquery dan CSS di bagian <head> dan </head>
Sebenarnya menu ini tetap berjalan dengan baik tanpa Javascript/Jquery, namun untuk membuat efek muncul dengan perlahan kita menggunakan Jquery.
Efek seperti itu sebenarnya bisa dibuat juga dengan CSS3 Animation, ayo silahkan tunjukan kreasi sobat.
Styling
Untuk mempercantik tampilan tulisan -css berikut ini , di file style.css
Jquery
Sebenarnya sampai disini saja menu sudah Tampil Oke, untuk memperhalus munculnya sub menu, kita bisa membuat dengan Javascript/Jquery seperti dibawah ini kita juga bisa mengganti dengan Animation jika diinginkan .
Code untuk twd-menu.js
Pada Tutorial kali ini kita akan mencoba membuat Dropdown menu dengan CSS, dan kita akan mempercantik menu yang kita buat dengan sedikit bantuan Jquery.
Struktur HTML
Disini kita perlu mempersiapkan struktur HTML terlebih dahulu, buat file dengan nama index.html , lalu tulis kode :
div class="container">
<!-- Header -->
<header>
<h1>Dropdown Menu</h1>
<p>Tutorial-WebDesign.com</p>
</header>
<!-- /Header -->
<div class="content">
<nav>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Web Development</a>
<ul>
<li><a href="#">Server Side</a></li>
<li><a href="#">Client Side</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a>
<ul>
<li><a href="#">Jquery</a></li>
<li><a href="#">Mootool</a></li>
<li><a href="#">Prototipe</a></li>
</ul>
</li>
<li><a href="#">DOM</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Security</a></li>
</ul>
</li>
</ul>
</nav> <!-- /Navigation -->
</div> <!-- /Content -->
<footer>
Copyright © 2012, <a href="http://www.Tutorial-webdesign.com">Tutorial-webdesign.com</a>
</footer> <!-- /Footer -->
</div> <!-- /Container -->Sisipkan Jquery dan CSS di bagian <head> dan </head>
<title>Demo Dropdown Menu: Tutorial-Webdesign.com</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="twd-menu.js"></script>Sebenarnya menu ini tetap berjalan dengan baik tanpa Javascript/Jquery, namun untuk membuat efek muncul dengan perlahan kita menggunakan Jquery.
Efek seperti itu sebenarnya bisa dibuat juga dengan CSS3 Animation, ayo silahkan tunjukan kreasi sobat.
Styling
Untuk mempercantik tampilan tulisan -css berikut ini , di file style.css
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.container{
width: 800px;
padding:20px;
margin: 50px auto;
border-top: 5px solid orange;
background: #f4f4f4;
overflow: hidden;
}
.content{
height: 200px;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a{
display:block;
padding:5px 5px;
border:1px solid orange;
color:#fff;
text-decoration:none;
background-color:orange;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:2.3em;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
footer{
margin-top:50px;
clear: both;
}Jquery
Sebenarnya sampai disini saja menu sudah Tampil Oke, untuk memperhalus munculnya sub menu, kita bisa membuat dengan Javascript/Jquery seperti dibawah ini kita juga bisa mengganti dengan Animation jika diinginkan .
Code untuk twd-menu.js
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
0 Response to "Cara membuat Dropdown menu dengan Jquery dan Css"
Posting Komentar