Drop down menu HTML dengan Anylink CSS Menu

Variasi untuk drop down menu yang kompleks adalah dengan menyajikan kode HTML saat suatu menu disorot. Berikut akan dijelaskan membuat drop down menu HTML dengan menggunakan Anylink CSS Menu.

Langkah-langkahnya adalah :

Download source codenya di http://www.dynamicdrive.com/dynamicindex1/anylinkcssmenu.css dan http://www.dynamicdrive.com/dynamicindex1/anylinkcssmenu.js .
Include filenya dengan pola seperti berikut ini:
<link rel=”stylesheet” type=”text/css” href=”./anylink/anylinkcssmenu.css” />
<script type=”text/javascript” src=”./anylink/anylinkcssmenu.js”>

/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>

<script type=”text/javascript”>
anylinkcssmenu.init(“anchorclass”);
</script>
Pada contoh di atas menu anchornya diberi class anchorclass. Sebagai contoh :
<div id=”datar”>
Ini datar
    <ul>
        <li class=”anchorclass” rel=”menu_teknologi” rev=”ud”><a href=”teknologi.html” >Teknologi</a></li>
        <li class=”anchorclass” rel=”menu_kuliner” rev=”ud”><a href=”kuliner.html”>Kuliner</a></li>
    </ul>
</div>
Pada langkah di atas terdapat rel=”menu_teknologi” ini berarti bahwa saat disorot (hover) akan menampilkan id menu_teknologi.
Misalnya isi dari menu_teknologi adalah:
<div id=”menu_teknologi” class=”anylinkcss”>
    <table border=”1″>
    <tr>
        <td><strong>Hardware</strong></td>
        <td><strong>Software</strong></td>
        <td><strong>Mobile</strong></td>
    </tr>
    <tr>
        <td valign=”top”><a href=”komputer.html”>Komputer</a>
                <br/><a href=”router.html”>Router</a>
        </td>
        <td valign=”top”><a href=”windows.html”>Windows</a>
                <br/><a href=”linux.html”>Linux</a>
                <br/><a href=”mac.html”>Mac</a>
        </td>
        <td valign=”top”><a href=”handphone.html”>Handphone</a>
                <br/><a href=”tablet.html”>Tablet</a>
        </td>
    </tr>
    </table>
</div>
Hasilnya akan seperti gambar di bawah ini:
Pada langkah ke 3 perhatikan rel=”ud”. Attribute ini akan menentukan mode tampilan. Jika diisi “ud” maka akan ditampilkan di bawahnya, jika “lr” akan ditampikan di sebelah kanan.
Contoh jika diisi lr adalah :
Coding lengkapnya adalah :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Drop Down HTML dengan Anylink CSS Menu</title>
<style type=”text/css”>
#datar ul li
{
    float: left;
    margin-left: 20px;
}
#tegak
{
    margin-top: 100px;
}

#tegak ul li
{
    width: 100px;
    background-color: #eeeeee;
}
.clear
{
    clear: both;
}
</style>
<link rel=”stylesheet” type=”text/css” href=”./anylink/anylinkcssmenu.css” />

<script type=”text/javascript” src=”./anylink/anylinkcssmenu.js”>

/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>

<script type=”text/javascript”>
anylinkcssmenu.init(“anchorclass”);
</script>
</head>
<body>
<div id=”datar”>
Ini datar
    <ul>
        <li class=”anchorclass” rel=”menu_teknologi” rev=”ud”><a href=”teknologi.html” >Teknologi</a></li>
        <li class=”anchorclass” rel=”menu_kuliner” rev=”ud”><a href=”kuliner.html”>Kuliner</a></li>
    </ul>
</div>

<div class=”clear”>
</div>

<div id=”tegak”>
Ini tegak
    <ul>
        <li class=”anchorclass” rel=”menu_teknologi” rev=”lr”><a href=”teknologi.html”>Teknologi</a></li>
        <li class=”anchorclass” rel=”menu_kuliner” rev=”lr”><a href=”kuliner.html”>Kuliner</a></li>
    </ul>
</div>

<div id=”menu_teknologi” class=”anylinkcss”>
    <table border=”1″>
    <tr>
        <td><strong>Hardware</strong></td>
        <td><strong>Software</strong></td>
        <td><strong>Mobile</strong></td>
    </tr>
    <tr>
        <td valign=”top”><a href=”komputer.html”>Komputer</a>
                <br/><a href=”router.html”>Router</a>
        </td>
        <td valign=”top”><a href=”windows.html”>Windows</a>
                <br/><a href=”linux.html”>Linux</a>
                <br/><a href=”mac.html”>Mac</a>
        </td>
        <td valign=”top”><a href=”handphone.html”>Handphone</a>
                <br/><a href=”tablet.html”>Tablet</a>
        </td>
    </tr>
    </table>
</div>

<div id=”menu_kuliner” class=”anylinkcss”>
    <table border=”1″>
    <tr>
        <td><strong>Restorant</strong></td>
        <td><strong>Saung</strong></td>
        <td><strong>Tradisional</strong></td>
    </tr>
    <tr>
        <td valign=”top”><a href=”kfc.html”>KFC</a>
                <br/><a href=”aw.html”>AW</a>
        </td>
        <td valign=”top”><a href=”kampung_air.html”>Kampung Air</a>
                <br/><a href=”nirwana.html”>Kampung Nirwana</a>
        </td>
        <td valign=”top”><a href=”gudeg.html”>Gudeg</a>
                <br/><a href=”soto.html”>Soto</a>
        </td>
    </tr>
    </table>
</div>

</body>
</html>
Demo bisa dilihat di http://aris.proweb.asia/anylink.html .
Pada contoh di atas pada file anylinkcssmenu.css ada perubahan di .anylinkcss pada
width: auto; /* default width for menu */
Informasi lebih lanjut silahkan mengunjungi http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Drop down menu HTML dengan Anylink CSS Menu