Fork me on GitHub
Post Format

Multi Level Hierarchical jQuery Menu: jQSimpleMenu

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.

Multi-Level Hierarchical jQuery Menu: jQsimplemenu

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. jQuery Sliding Content Bar Plugin: PushUp Content Bar
  2. jQuery Broken Link Checker Plugin: jsLink
  3. jQuery Content Slider :jsCarousel
  4. jQuery Social Media Share and Bookmark Plugin: jsShare
  5. jQuery Credit Card Validation Plugin: Smart Validate

17 comments

  1. Pingback: 转载-30个漂亮的jquery效果欣赏-爱果果 | iluther-专注web技术

  2. Pingback: 2012年30个新鲜和杰出的jQuery的效果摘要 | 我们爱网页设计

  3. Pingback: 40个新鲜出炉的 jQuery 插件和免费教程 | 异度小站

  4. Pingback: 40 Fresh jQuery Plugins And Tutorials Available For Free | pixelpush design

  5. Pingback: Leveraging jQuery scripts and CSS3 in your Online Help #techcomm | Ed Marsh dot com

  6. Pingback: Hiệu ứng jQuery nổi bật năm 2012 « share2vn

  7. Pingback: Fast and Simple Links Box Navigation Menu: BoxyMenu | TEKNQ

  8. Pingback: Multi Level Hierarchical jQuery Menu: jQSimpleMenu | TEKNQ

  9. Pingback: Novos Plugins jQuery úteis e Tutoriais | Site para Empresas – Blog sobre Internet e Criação de Site

  10. Pingback: jQSimple Menu – Çoklu Açılır Menü | Sedat Kumcu

  11. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials | StevenCodes

  12. Pingback: Membuat Menu Bertingkat dengan JQuery jQSimpleMenu dari Achmatim.Net

  13. Pingback: All About jQuery: Fresh and Useful jQuery Plugins and Tutorials

  14. Pingback: Fast and Simple Links Box Navigation Menu: BoxyMenu | EGrappler

  15. I have a problem with that plugin. There is a problem with animation and background-color. If the menu has background color set animation is not working. how can i fix it?

    Reply

Leave a Reply

Required fields are marked *.


nine − 4 =