WordPress.org

Ready to get started?Download WordPress

Forums

JQuery Mega Menu Widget
[resolved] Dropdown doesn't work (23 posts)

  1. floris345
    Member
    Posted 1 year ago #

    Hello,

    On test.mobitel.nl the mega menu doesn't work. I guess it's a jQuery issue, can someone tell me how i can fix it?

    Regards

    http://wordpress.org/extend/plugins/jquery-mega-menu/

  2. remix4
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Check that your theme's footer.php file contains the wp_footer function

    http://www.designchemical.com/blog/index.php/faq/the-menu-appears-on-the-page-but-does-not-work/

  3. capucinegaudry
    Member
    Posted 1 year ago #

    I am having the same problem, I made the widget area in my header, pasted the code at the right spot and placed the plugin in the widget area, everything's fine except the menu won't open anymore! I have checked and I do have the wp_footer function.
    http://www.catalyseweb.com

    Thanks

  4. jasonpaulweber
    Member
    Posted 1 year ago #

    Capucinegaudry, bon jour. I went to your website, and I don't see any submenus whatsoever. I just see Emil's responsive theme. Have you constructed your own menu in your WordPress admin >> Appearance >> Menus?

  5. capucinegaudry
    Member
    Posted 1 year ago #

    Yes I have, It worked just fine (opened with the sub menu pages) before I changed to the mega menu plugin (in wich I put my own main-menu wich I constructed myself in the menus page). And that's exactly my problem, the sub-menu don't show anymore!!!

  6. jasonpaulweber
    Member
    Posted 1 year ago #

    When you create a widget area and put the jquery mega menu in that widget area ... Where it says Select Menu: ... the navigational menu you created in WP Admin >> Appearance >> Menus should be selected from the drop-down box.

    And you're saying it is selected?

    When I look at your html output, I see NO submenus anywhere. If you created submenus, are they set up properly? Is it 2 or 3 levels deep?

    Here's a screenshot of part of a menu I use on one site that has the plugin:
    Menu Example

    That results in what you see on that site: http://www.wehaveissues.org

  7. capucinegaudry
    Member
    Posted 1 year ago #

    Thank you so much for your kindness in the efforts in trying to help me with this!!!
    I do have 2 levels in my custom made menu (looks exactly like your screenshot) backend_my_menu
    Mabe this screen shot can help figure out if something is in the wrong place.
    btw Your Mega menu is exactly what I was looking to do... I so much want to figure this out!!!
    P.S. I want to congratulate you on taking a stand for what is right (or against all the bu****it that's going on) we need more people like you in the world!
    Regards,

  8. capucinegaudry
    Member
    Posted 1 year ago #

    Ah yeah... This is the widget page where I filled in the stuff:
    widget_page

  9. jasonpaulweber
    Member
    Posted 1 year ago #

    First:
    The menus in your widgets and appearance >> menus are different. In appearance >> menus you're calling on the menu titled mega. In your widgets, you've implemented the menu titled Main_menu. These should be the same -- one or the other. If you'd like to use the menu you posted as a screenshot, then change mega to Main_menu in appearance >> menus >> header menu dropdown box >> Main_menu.

    Second:
    If you're not using a skin -- and it appears that you're not -- go into your file catalyseweb.com/wp-content/plugins/jquery-mega-menu/css/dcjq-mega-menu.css

    Erase all of this (just copy and paste it into Notepad, so you have a copy of it):

    .dcjq-mega-menu ul, .dcjq-mega-menu ul li {list-style: none;}
    .dcjq-mega-menu ul.menu {position: relative; padding: 0; margin: 0;}
    .dcjq-mega-menu ul li ul {display: none;}
    .dcjq-mega-menu .sub {display: none;}
    .dcjq-mega-menu .sub ul {display: block;}

    And replace all of that with this:

    /* Reset code to remove theme inherent styling */
    .dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .dcjq-mega-menu ul.menu ul {
    display: none; /* Hides non-mega links */
    }
    .dcjq-mega-menu ul.menu .sub ul {
    display: block; /* overrides above hide */
    }

    /* Main menu styles */
    .dcjq-mega-menu ul.menu {
    background: #222 url(skins/images/bg_white.png) repeat-x 0 -80px;
    width: 100%;
    height: 40px;
    border-right: 1px solid #1B1B1B;
    border-left: 1px solid #1B1B1B;
    position: relative; /* Important - required for positioning of mega menu */
    font: normal 13px Arial, sans-serif;
    line-height: 16px;
    }
    .dcjq-mega-menu ul.menu li {
    float: left;
    font-weight: bold;
    }
    .dcjq-mega-menu ul.menu li a {
    float: left;
    display: block;
    padding: 12px 25px;
    background: url(skins/images/bg_white.png) repeat-x 100% 0;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    text-decoration: none;
    }
    .dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
    background-position: 100% -40px;
    color: #000;
    text-shadow: none;
    }

    /* Arrow tag for parent links */
    .dcjq-mega-menu ul.menu li a.dc-mega {
    padding-right: 38px; /* Additional padding for arrow */
    position: relative; /* Required for arrow positioning */
    }
    .dcjq-mega-menu ul.menu li a .dc-mega-icon {
    display: block;
    position: absolute;
    top: 18px;
    right: 15px;
    width: 8px;
    height: 6px;
    background: url(images/arrow.png) no-repeat 0 0;
    }
    .dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {
    background-position: 0 100%;
    }

    /* Mega Menu Styling */
    /* Mega Drop Down Container */
    .dcjq-mega-menu ul.menu li .sub-container {
    position: absolute; /* Required */
    background: url(images/bg_sub_left.png) no-repeat 0 100%;
    padding-left: 10px;
    margin-left: -3px;
    }
    .dcjq-mega-menu ul.menu li .sub {
    background: url(images/bg_sub.png) no-repeat 100% 100%;
    padding: 20px 20px 20px 10px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.mega .sub {
    padding: 20px 10px 0 0;
    }
    .dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
    width: 100%;
    overflow: hidden;
    clear: both;
    }
    .dcjq-mega-menu ul.menu li .sub li {
    float: none;
    font-size: 1em;
    font-weight: bold;
    }
    /* Sub-menu Headers */
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
    float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
    width: 260px;
    margin: 0 10px 20px 10px;
    border: 1px solid #ccc;
    }
    .dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
    background: none;
    border: none;
    text-shadow: none;
    color: #111;
    padding: 7px 10px;
    display: block;
    float: none;
    text-decoration: none;
    font-size: 0.9em;
    }
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
    padding: 7px 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    font-weight: bold;
    color: #000;
    background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
    }
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    color: #000;
    text-shadow: none;
    }

    /* Add the individual sub-menu backgrounds */
    .dcjq-mega-menu ul.menu li .sub li#menu-item-105 {
    background: url(images/video-insprantes.jpg) no-repeat 135px 50px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-106 {
    background: url(images/video-equitherapie.jpg) no-repeat 135px 50px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-110 {
    background: url(images/sante-equine.jpg) no-repeat 135px 50px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-111 {
    background: url(images/alimentation.jpg) no-repeat 135px 50px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-99 {
    background: url(images/references.jpg) no-repeat 135px 50px;
    }

    /* Style the 3rd level links */
    .dcjq-mega-menu ul.menu li .sub li ul li {
    margin-right: 90px;
    }
    .dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
    color: #444;
    font-weight: normal;
    padding: 3px 0 3px 25px;
    background: url(images/bullet.png) no-repeat 10px 8px;
    }
    .dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png);
    }

    /* Styling for items with only 2 levels */
    .dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
    padding: 20px 20px 20px 10px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li {
    width: 190px; /* Set the drop down width */
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
    padding: 7px 5px 7px 22px;
    background: url(images/bullet.png) no-repeat 5px 12px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png);
    }

    Finally:

    1. Ensure that bullet.png, bullet_on.png, bg_hdr.png, bg_sub.png, and arrow.png are all in that folder. If they're not, then grab 'em from the skins/images/ folder and copy and paste 'em into that folder.
    2. Make images that are a certain width and height (I just used 135 x 50 in this example). Upload them to your mega-menu/images folder -- the same folder where bullet.png, bullet_on.png, etc., are.
    3. I just put in pictures ... what you might want to use. For example, for your Video Insprantes submenu, I put a picture in there, video-insprantes.jpg ... so make a .jpg picture that is 135 x 50 (or change the dimensions in this file) and upload it to the /images/ directory ... if you want pictures.
    4. Note the menu numbers. Video Insprantes is 105. To determine where you want the pictures, just view your page source. When you right click, view page source, look for your menu html output. There, it will give you the number corresponding with your menu. That's how I knew it was 105. Everyone's is different. So if you wanted a picture for Contact, you'd use menu-item-97 ... if you wanted a picture for Accueil, you'd use menu-item-181.

    You can better reach me on Facebook if you're there .... http://fb.me/jasonpaulweber ... and if worst comes to worst, just make me a temporary wp-admin login and I'll put the custom .css in there myself. I know this sounds like a lot of work, but it should only take you 5-10 minutes, depending on how quickly you make the images. Hope you get things working; once you understand it, it's quite simple to work with!

    Jason

  10. jasonpaulweber
    Member
    Posted 1 year ago #

    Also, funny ... I'm from Detroit, but lived in St. Foy, Quebec (outside of Quebec city) for 3 months (hockey), and have played many times in Montreal, and a few times in Trois Riveres. I still own a Mario Lemieux poster that a store owner in Quebec City gave me when I was a kid ... I asked if I could buy it, and he just gave it to me -- I'll never forget it! It's in my basement wall and I'll never get rid of it!

    I also played college hockey, and a few of the guys on the team were from various parts in Quebec (and Newfoundland -- Newfies, Nova Scotia, Ontario, Saks, Alberta, etc.) ... there were only 3 or 4 of us Americans! But I still email PC Drouin, Vinnie Auger, Ryan Hughes, and many other friends from college who moved back to Quebec.

  11. rene66
    Member
    Posted 1 year ago #

    Awsom menu!!..
    Cant get it work though.. :-(
    Would be so great to have the same kind of menu that u're showing.
    But what am I doing wrong or what am I missing?

    Can you help me out?
    For a client I'm making a side: http://daydreamshotel.com/wordpress/?page_id=414.
    Look under menu jakarta..

    Would realy appriciate any help...thnks a lot!

  12. jasonpaulweber
    Member
    Posted 1 year ago #

    Page is empty, Rene66 ... can't see anything.

  13. rene66
    Member
    Posted 1 year ago #

    ja is know..:-(
    just messed up my db while trying to make a widget..cnt figure how to do that aswell..

    In a minute my db will be restored..;-) (I hope)
    thnks!

    Oh,oh..
    Never had this before!
    Guess I have a problem now.
    Will back up tomorrow..(2am here)

    thnks again..

  14. jasonpaulweber
    Member
    Posted 1 year ago #

    Okay, Rene ... you don't even have the plugin activated ... so it's impossible to see what's wrong.

  15. rene66
    Member
    Posted 1 year ago #

    I'm recovering the site.. :-(.
    Will let you know when I get stuck (again).
    Would love to have the same kind of menu that you have on your site

    Great job!

    Let you know more..

    thnks!
    btw: sent you friends request (Alias: nasigoreng);-)

  16. rene66
    Member
    Posted 1 year ago #

    @jason
    Everytime when I install the plugin, my site crashes.
    Any idea's how to prevent this issue?

  17. rene66
    Member
    Posted 1 year ago #

    http://daydreamshotel.com/wordpress/?product_cat=daydreams-hotel-vouchers

    but not working as it should..
    Also, should be as main menu..

    Can u help, Jason?

    thnks!

  18. jasonpaulweber
    Member
    Posted 1 year ago #

    Yes. In your WP-Admin, you should have Appearance >> Menus >> Theme Locations (top left corner) >> select the menu you'd like to use ... the one you created.

    Then, you need to create a new widget area. I don't know how to do this on the colorway theme. But you'll create a new widget area, or if you have one unoccupied, use that. Then drag the jquery mega menu widget into the widget box.

    In the Jquery mega menu , don't include a Title. Select Menu >> Select the same menu that you created in Apperance >> Menus.

    -----------------------------

    Then go into your http://daydreamshotel.com/wordpress/wp-content/plugins/jquery-mega-menu/css/dcjq-mega-menu.css and replace the code in that file with the code I gave Capucine ... And like I said, you can just make me a temporary wp-admin login and password, and I'll take care of things, if you'd like.

    I accepted the friend request on FB.

  19. rene66
    Member
    Posted 1 year ago #

    For the record:
    Jason, thnks for your help.
    You've been doing a great job by helping me out with this.

  20. jasonpaulweber
    Member
    Posted 1 year ago #

    My pleasure, Rene ... Mondays and Tuesdays are busy for me, but if you'd like, I can help some more, or make some more suggestions.

    Jason

  21. fd1976
    Member
    Posted 1 year ago #

    Hi Jason

    For the past 8 hours i have been battling with similar issues, and just now found this support page.

    Your guidance is remarkable!

    Thanks

    Andres

  22. jasonpaulweber
    Member
    Posted 1 year ago #

    Thanks Andres ... it's a good plugin, and easy once you get the hang of it. Good luck. If you have any questions, you can just find me on FB or email me.

  23. remix4
    Member
    Plugin Author

    Posted 1 year ago #

    @jasonpaulweber thanks for the help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.