If you’re creating your own theme and use adding a menu using the standard WordPress function wp_nav_menu(), you will have to style it using CSS in order to make it like the usual navigation menu. This function will return a list of menus you defined or added in Appearance -> Menus.

This looks fine if you will place it on the sidebar and you might just want to change font styles, colors, etc. However, if you want top place it at the header or footer, you surely want a vertical navigation menu.

In order to achieve the desired vertical navigation menu, you will need to add css codes. Don’t forget to consider the sub menus which should be hidden by default and will only be displayed once it’s parent menu item is hovered. It must also be responsive.

Well, this task isn’t that complex and you can use css and jquery to achieve the desired output.

However, since I’m using this function often, I feel like rewriting the same codes for each navigation menu is a bit time consuming. So, I created a jquery function that I can add to my theme/plugin files, and just call it.

Here it is:

jQuery.fn.odMenu = (function($params /*, ... */){
    $ = jQuery;
    $id = $(this).attr('id');
    //alert($( window ).width());
    $(this).wrap('<div id="menu-box-' + $id + '" class="od-menu-box"></div>');
    $(this).addClass('od-menu');
    $(this).parents('.od-menu-box').prepend('<div class="responsive-tab"><a href="#" class="responsive-menu-link">Navigation</a></div>');
    
    $(this).parents('.od-menu-box').find('.responsive-menu-link').live('mouseover', function(){
        $(this).parents('.od-menu-box').removeClass('hidden').addClass('shown').addClass('responsive');
        return false;
    });
    
    $(this).parents('.od-menu-box').find('.responsive-menu-link').live('mouseout', function(){
        $(this).parents('.od-menu-box').removeClass('shown').addClass('hidden');
        return false;
    });
    
    $(this).live('mouseover', function(){
        $(this).parents('.od-menu-box.responsive').removeClass('hidden').addClass('shown');
        return false;
    });
    
    $(this).live('mouseout', function(){
        $(this).parents('.od-menu-box.responsive').removeClass('shown').addClass('hidden');
        return false;
    });    

    $submenu_width = (!$params['submenu_width']) ? 150 : $params['submenu_width'];
    $submenu_bg = (!$params['submenu_bg']) ? 'rgba(0,0,0,.5)' : $params['submenu_bg'];
    
    $submenu_item_padding = (!$params['submenu_item_padding']) ? 2 : $params['submenu_item_padding'];
    $responsive_tab_position = (!$params['responsive_tab_position']) ? 'center' : $params['responsive_tab_position'];
    $responsive_menu_width = (!$params['responsive_menu_width']) ? '100%' : $params['responsive_menu_width'] + 'px';
    
    $css = '<style type="text/css">ul.od-menu > li { float: none; display: inline-block; }';   
    $css += '@media (min-width: 604px) {';
    $css += '.od-menu-box .responsive-tab {display: none}';
    $css += 'ul.od-menu > li > .sub-menu {position: absolute; display: none; }';
    $css += 'ul.od-menu > li:hover > .sub-menu { display: block; }';
    $css += 'ul.od-menu > li > .sub-menu > li { position: relative; width: ' + $submenu_width + 'px }';
    $css += 'ul.od-menu > li > .sub-menu > li > .sub-menu{ display: none; border: solid gray 1px; position: absolute; margin-left: ' + $submenu_width + 'px; /*must be the same as the width of ul.od-menu > li > .sub-menu > li*/ top:0; }';
    $css += 'ul.od-menu > li > .sub-menu > li:hover > .sub-menu { display: block; }';
    $css += 'ul.od-menu > li > a { display: inline-block}';
    $css += 'ul.od-menu .sub-menu {background: ' + $submenu_bg + '}';
    $css += 'ul.od-menu .sub-menu a { padding: ' + $submenu_item_padding + 'px; display: block}';
    $css += '}';

    // responsive css
    $css += '@media (max-width: 603px) {';
    $css += '.od-menu-box { width: ' + $responsive_menu_width + '}';

    if($params['responsive_menu_position'] === 'right') {
        $css += '.od-menu-box { margin: 0 0 0 auto; }';
    }
    else if($params['responsive_menu_position'] === 'left') {
        $css += '.od-menu-box { margin-left: 0; }';
    }
    else {
        $css += '.od-menu-box { margin: 0 auto; }';
    }

    $css += '.od-menu-box ul.od-menu {display: none; }';
    $css += '.od-menu-box.shown ul.od-menu {display: block; }';
    $css += '.od-menu-box {position: relative; }';
    $css += '.od-menu-box .responsive-tab { text-align: ' + $responsive_tab_position + '}';
    
    if($params['responsive_tab_position'] === 'full') {
        $css += '.od-menu-box .responsive-tab a {display: block; text-align: center; }';
    }    
    
    $css += '.od-menu-box .od-menu { position:absolute; width: 100%; }';
    $css += 'ul.od-menu li {display: block; }';
    $css += 'ul.od-menu li a {display: block; }';
    $css += 'ul.od-menu > li .sub-menu { position: static; display: block; padding-left: 10px;}';
    $css += '}';

    $css += '</style>';
    $('body').append($css);
});

$jx = jQuery.noConflict();

$jx(document).ready(function(){
    $options = new Array();       
    // for normal menu options
    $options['submenu_width'] = 130;
    $options['submenu_item_padding'] = 5;
    
    // for responsive menu options
    $options['responsive_menu'] = 'default'; //raw, simple, ...
    $options['responsive_menu_position'] = 'center'; //right, center, left
    $options['responsive_menu_width'] = 150;    
    $options['responsive_tab_position'] = 'full'; //right, center, full    
    
    $jx('#menu-top-menu').odMenu($options);
});

The output of this functon is vertical navigation menu and accepts submenus. It’s also mobile responsive.

You can now add styling such as color, background, font styles, etc. in order to match it with the rest of the website.