mega menu example is not working

Question

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

Krasimir · Accepted Answer · 2013-10-30T07:10:18.327

0

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'
});

edited Oct 30 '13 at 07:10

answered Oct 30 '13 at 06:42

Krasimir

13,306
3
40
55

There is an missing library in the jsfiddle. Please include the menu plugin properly. Check the console and you will see *Uncaught TypeError: Object [object Object] has no method 'dcMegaMenu'* – Krasimir Oct 30 '13 at 06:58
Check my answer again. I found what was the problem. – Krasimir Oct 30 '13 at 07:10
There is a problem with your CSS somewhere. If you remove it the menu works as expected. – Krasimir Oct 30 '13 at 08:20

mega menu example is not working

1 Answers1