File yang harus ada:

  1. jquery.min.js
  2. ddsmoothmenu.js
  3. ddsmoothmenu.css
  4. ddsmoothmenu-v.css
  5. 2 images:

JAVASCRIPT
<script type=”text/javascript”>
ddsmoothmenu.init({
    mainmenuid: “smoothmenu1”,
    orientation: ‘h’,
    classname: ‘ddsmoothmenu’,
    contentsource: “markup”
})
</script>

CSS
<style>
    h1{font-size:24px; color: #06C;}
</style>

HTML
<h1>Multilevel Pulldown Menu</h1>

<div id=”smoothmenu1″ class=”ddsmoothmenu”>
<ul>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
  <ul>
  <li><a href=”#”>Sub Menu 2.1</a></li>
  <li><a href=”#”>Sub Menu 2.2</a></li>
  <li><a href=”#”>Sub Menu 2.3</a></li>
  <li><a href=”#”>Sub Menu 2.4</a></li>
  <li><a href=”#”>Sub Menu 2.2</a></li>
  <li><a href=”#”>Sub Menu 2.3</a></li>
  <li><a href=”#”>Sub Menu 2.4</a></li>
  </ul>
</li>
<li><a href=”#”>Menu 3</a>
  <ul>
  <li><a href=”#”>Sub Menu 3.1</a></li>
  <li><a href=”#”>Sub Menu 3.2</a></li>
  <li><a href=”#”>Sub Menu 3.3</a></li>
  <li><a href=”#”>Sub Menu 3.4</a></li>
  <li><a href=”#”>Sub Menu 3.2</a></li>
  <li><a href=”#”>Sub Menu 3.3</a></li>
  <li><a href=”#”>Sub Menu 3.4</a></li>
  </ul>
</li>
<li><a href=”#”>Menu 4</a></li>
<li><a href=”#”>Menu 5</a>
  <ul>
  <li><a href=”#”>Sub Menu 5.1</a></li>
  <li><a href=”#”>Sub Menu 5.2</a>
    <ul>
    <li><a href=”#”>Sub Menu 5.2.1</a></li>
    <li><a href=”#”>Sub Menu 5.2.2</a></li>
    <li><a href=”#”>Sub Menu 5.2.3</a>
        <ul>
            <li><a href=”#”>Sub Menu 5.2.3.1</a></li>
            <li><a href=”#”>Sub Menu 5.2.3.2</a></li>
            <li><a href=”#”>Sub Menu 5.2.3.3</a></li>
            <li><a href=”#”>Sub Menu 5.2.3.4</a></li>
            <li><a href=”#”>Sub Menu 5.2.3.5</a></li>
        </ul>
    </li>
    <li><a href=”#”>Sub Menu 5.2.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href=”#”>Menu 6</a></li>
</ul>
</div>

DEMO

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

Multilevel pulldown menu