Setelah didownload dan untuk melihat kemampuannya langsung dicoba dengan cara berikut ini :
- Ekstrak file superfish yang telah didownload dan buka folder superfish
- Kemudian anda dapat melihat contohnya di example.html dan bisa juga edit file example.html dengan dreamweaver atau notepad
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>A very basic Superfish menu example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<ul class="sf-menu">
<li class="current">
<a href="#a">Tutorial</a>
<ul>
<li>
<a href="#aa">J Query</a>
</li>
<li class="current">
<a href="#ab">CSS3</a>
<ul>
<li class="current"><a href="#">Menu Dropdown</a></li>
<li><a href="#aba">Desain Web</a></li>
<li><a href="#abb">Desain Gratis</a></li>
<li><a href="#abc">Blog</a></li>
<li><a href="#abd">Blogger</a></li>
</ul>
</li>
<li>
<a href="#">Artikel</a>
<ul>
<li><a href="#">Komputer</a></li>
<li><a href="#">Seni</a></li>
<li><a href="#">Kesehatan</a></li>
<li><a href="#">Novel</a></li>
<li><a href="#">Hoby</a></li>
</ul>
</li>
<li>
<a href="#">Download</a>
<ul>
<li><a href="#">Software</a></li>
<li><a href="#">Ebook</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Emagazine</a></li>
<li><a href="#">Source code</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
</ul>
</body>
</html>
bisa juga anda rubah sesuai keinginan :D
Tidak ada komentar:
Posting Komentar
tolong tinggalkan komentar ya! selamat membaca :D