As your website grows, so does the need for better navigation and sometimes the navigation becomes the driving force for better user experience. jQSimpleMenu is a multi-level hierarchical jQuery drop down menu that helps you add drop down menu in your website without writing a single line of code.

Using jQSimpleMenu

In your HTML file add the following in the head section.

• Add a reference to latest jQuery script
• Add a reference to jqsimplemenu.js file
• Add a reference to jqsimplemenu.css file

Add the HTML markup for your menu with in the body of HTML document, assign some id or class to main UL and call jQSimplemenu initializer function.

  <ul class="jq-menu">
        <li><a href="http://www.egrappler.com">Home</a></li>
        <li><a href="http://www.egrappler.com/about">About</a></li>
        <li><a href="#">Services </a>
            <ul>
                <li><a href="#">Sofware Development</a>
                    <ul>
                        <li><a href="#">Web Apps</a></li>
                        <li><a href="#">Widgets</a>
                            <ul>
                                <li><a href="#">jQuery Plugins</a></li>
                                <li><a href="#">Asp.NET Controls</a></li>
                                <li><a href="#">Salesforce Integration</a> </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Interface Design</a></li>
                <li><a href="#">Technical Writing</a></li>
                <li><a href="#">Resume Writing</a></li>
            </ul>
        </li>
        <li><a href="#">Portfolio</a>
            <ul>
                <li><a href="#">Web Appliations</a></li>
                <li><a href="#">SaaS</a></li>
                <li><a href="#">Windows Applications</a></li>
                <li><a href="#">Mobile Applications</a></li>
                <li><a href="#">Server Applications</a> </li>
            </ul>
        </li>
        <li><a href="http://www.egrappler.com">Blog</a></li>
        <li><a href="http://www.egrappler.com">Contact</a></li>
    </ul>

<script type="text/javascript">
        $(document).ready(function() {
            $('.jq-menu').jqsimplemenu();
        });
</script>

Related posts:

1. Free Multi-Node Range and Data Slider: JQ Slider
2. XML Driven Breadcrumb Navigation with jQuery: Smart Breadcrumb
3. jQuery Pagination Plugin: Smart Paginator
4. jQuery Content/Thumbnail Slider V2.0: jsCarousel V2.0
5. jQuery Strong Password Plugin: Power PWChecker