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: “smoothmenu2”,
    orientation: ‘v’,
    classname: ‘ddsmoothmenu-v’,
    contentsource: “markup”
})
</script>

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

HTML
<h1>Multilevel Pulldown Menu</h1>

<div id=”smoothmenu2″ class=”ddsmoothmenu-v”>
<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>
<br style=”clear: left” />
</div>

DEMO

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

 

 

 

Vertical pulldown menu