1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[HOWTO] Setup a stylish jQuery menu in wordpress

Discussion in 'Graphic Design' started by Schvamp, Aug 27, 2013.

  1. Schvamp

    Schvamp Power Member

    Joined:
    Feb 13, 2012
    Messages:
    684
    Likes Received:
    549
    Location:
    Hogwarts
    So I was about to help another member of this board how to set up JQuery Mega Menu Widget and tought that I can post it in public if someone else is interested aswell.
    Would you like your wordpress menu to look like this? Read on, and note: I'll only cover the basics.


    [​IMG]

    1) Download and install the plugin http://wordpress.org/plugins/jquery-mega-menu/

    As the plugin is a widget we have to replace the menu bar with a widget area.

    2) Add this code into functions.php right befor the closing "?>" at the end so that you can register the widget.
    Code:
        
    if (function_exists('register_sidebar')) {  
             register_sidebar(array(  
              'name' => '[B]Widget Menu[/B]',  
              'id'   => '[B]widget-menu[/B]',  
              'description'   => '[B]Widget Area[/B]',  
              'before_widget' => '',  
              'after_widget'  => '',  
              'before_title'  => '',  
              'after_title'   => ''  
             ));  
            }  
    
    Bold = you can name it whatever you want to

    3) Open header.php and replace the current menu with the following code:
    Code:
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('[B]Widget Menu[/B]') ) : ?>  
    <?php endif; ?>  
    
    As all themes are diffrent it's hard for me to say where in the code the current manu is placed at but it's uselly at the end and often in a div named <div class="manu-nav"> or such.
    And the actually code to call the menu do often look like this: <?php wp_nav_menu(array('theme_location' => 'fourth', 'container' => '')); ?>

    4) Head over to Appearance -> Menus in the admin area and create a menu, here's a great guide how it works: http://www.youtube.com/watch?v=0wB81jDaYD8 .

    5) Go to Widgets and drag jQuary Mega Menu into the Widget Menu widget and set it up, style and all..

    [​IMG]

    6) All done.

    The plugin can be costumized and supporting images but this guide just covers how to set it up, as it's not normal to have a widget as menu.
    I'm not affiliated with the developer of this plugin just think its pretty nice. More info at http://www.designchemical.com
     
    • Thanks Thanks x 4
  2. lietuvis002

    lietuvis002 BANNED BANNED

    Joined:
    Aug 3, 2012
    Messages:
    2,415
    Likes Received:
    2,576
    [​IMG]

    Good guy!

    Thanks :eek:
     
  3. Schvamp

    Schvamp Power Member

    Joined:
    Feb 13, 2012
    Messages:
    684
    Likes Received:
    549
    Location:
    Hogwarts
    You'r welcome dude :)
     
  4. user001

    user001 Junior Member

    Joined:
    May 26, 2011
    Messages:
    131
    Likes Received:
    37
    Location:
    BHW
    awesome guide!
     
  5. AtheriS

    AtheriS Newbie

    Joined:
    Jul 31, 2013
    Messages:
    7
    Likes Received:
    0
    Occupation:
    Web developer, designer
    Location:
    KL
    Thanks for the tutorial. I working on the same thing but on different platform, Joomla 3. Really a pain in the a55.