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. jQuery Social Media Share and Bookmark Plugin: jsShare
3. jQuery Sliding Content Bar Plugin: PushUp Content Bar
4. XML Driven Breadcrumb Navigation with jQuery: Smart Breadcrumb
5. jQuery Content Slider :jsCarousel