Rabu, 04 April 2012

Jquery Dropdown dengan Superfish

Membuat menu dropdown sangat mudah dengan Superfish dan dapat anda download gratis di alamat berikut ini http://users.tpg.com.au/j_birch/plugins/superfish/#download
Setelah didownload dan untuk melihat kemampuannya langsung dicoba dengan cara berikut ini :






    1. Ekstrak file superfish yang telah didownload dan buka folder superfish
    2. 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