I am trying Mega menu example for that i have included various js files. and trying to get mega menu. My code is below. Code is simply printing my list itms. It is not showing menu.

Please see what is the problem with following code.

  <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type='text/javascript' src='js/jquery-1.9.1.js'></script>
            <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
            <script type='text/javascript' src='js/jquery.dcmegamenu.1.2.js'></script>
            <link href="css/megamenu.css" rel="stylesheet" type="text/css" />
            <title>JSP Page</title>
            <script>
                $('#mega-menu').dcMegaMenu({
                    rowItems: '1',
                    speed: 'fast'
                });
            </script>
        </head>
        <body>
            <ul id="mega-menu">
                <li><a href="dashboard">Dashboard</a></li>
                <li> <a href="ShowProduct">Product</a> </li>
                <li><a href="ShowColors">Colors</a></li>
                <li> <a href="ShowSizes">Sizes</a> </li>
                <li><a href="ShowPModelNO">Product Model No</a></li>
                <li><a href="ShowProductType">Product Types</a> </li>
                <li> <a href="ShowSupplier">Supplier</a>  </li>
                <li><a href="ShowCustomer">Customer</a> </li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Mobile Phones &#038; Accessories</a>
                            <ul>
                                <li><a href="#">Product 1</a></li>
                                <li><a href="#">Product 2</a></li>
                                <li><a href="#">Product 3</a></li>

                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>

EDIT: This is demo

有帮助吗?

解决方案

You actually added the wrong files. Please checkout this jsfiddle:

http://jsfiddle.net/Jd5PS/1/

The code is still the same, but the files which I use are different:

$('#mega-menu').dcMegaMenu({
    rowItems: '1',
    speed: 'fast'
});
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top