Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Using Navgoco as a Vertical Multi-Level Menu in a WordPress Genesis Theme

June 12, 2014 Leave a Comment

Looking for a expandable/contractable Vertical Multi-Level Slide Menu in regular WordPress or Genesis themes, Navgoco has you covered.

Create Your Menu

Set up your custom menu as normal in WordPress Dashboard with multi levels and place into position via a widget area or simply use HTML mark up on a post or page, this example uses a course menu with sub courses as sub-levels.

vertical-menu-sub-level

The sub-levels are highlighted yellow and by default if place in a sidebar vertical will display flat in structure with a small indent to indicate the sub-level.

Get your CSS Menu ID

vertical-menu-sub-level-css-id

Use your browser web inspector tools to get the CSS ID value.

Create Javascript to Fire on Menu

With your unique CSS ID, you can create the code that fires just for that particular menu, create a file named what you like “custom-menu.js” for example and file it in you javascript folder of your theme /js

    jQuery(document).ready(function() {
        jQuery('#your-menu-ID-here').navgoco(); //swap in your Menu CSS ID
    });

 

Get Navgoco

Download the Navgoco CSS and Javascript files .

Register and Enqueue the Files

In your functions.php of your child theme add in the needed files:

//Navgoco Scripts and Styles Registered and Enqueued, scripts first - then styles
function themprefix_navgoco_scripts_styles() {
	wp_register_script ('navgoco', get_stylesheet_directory_uri() .'/js/jquery.navgoco.min.js', array( 'jquery' ),'0.2.0',false);
	wp_register_script ('navgococookie', get_stylesheet_directory_uri() . '/js/jquery.cookie.min.js', array( 'jquery' ),'0.2.0',false);
	wp_register_script ('navgococustom', get_stylesheet_directory_uri() . '/js/custom-menu.js', array( 'jquery' ),'1',true);
	wp_register_style ('navgococss', get_stylesheet_directory_uri() .'/js/jquery.navgoco.css','', '0.2.0', 'all');
	
	wp_enqueue_script( 'navgoco' );
	wp_enqueue_script( 'navgococookie' );
	wp_enqueue_script( 'navgococustom' );
	wp_enqueue_style( 'navgococss' );
}

add_action( 'wp_enqueue_scripts', 'themprefix_navgoco_scripts_styles' );

So here their are 2 core JS and CSS files from the download which are added in as well as the custom-menu.js to target the menu, this is added in and positioned in the footer with the value of ‘true‘ set.

There is one extra file jquery.cookie.min.js which is also filed in our themes /js folder and was obtained from the main Navgoco download, it’s purpose is to remember the menu hierarchal state between the site and a users browser session which is pretty cool.

 

Setting a Caret DropDown Symbol

You can set a symbol to indicate visually to a user that the menu is a dropdown by adding a caret/arrow icon by using a span hook in the code. In the custom-menu.js  add a class into the span and then target with CSS.

 jQuery(document).ready(function() {
        jQuery('#menu-header-menu-1').navgoco({
        	caretHtml: '<i class="vert-menu"></i>',
        	accordion: true
        }); //swap in your Menu CSS ID
    });

So example above uses the key of caretHTML  and the HTML value inserted markup as <i class=”vert-menu”></i>

Then in CSS code use a Fontawesome icon:

#nav_menu-3 .vert-menu:after{
	font-family: fontawesome;
	float: right;
	content: "\f0dd";
	font-style: normal;
}

There’s not to much to do for mobile/tablets since the menu is vertical in nature, works similar to most mobile menu solutions.

Full Gist

Example below:

All Courses

  • Accounting
    • MYOB
    • Excel
    • Quicken
  • Business Administration
    • MBA
  • E-Learning
    • What is E-Learning
  • Graphic Design
    • InDesign
    • Illustrator
  • IT Solutions
    • Cloud
    • Distributed
  • Marketing Analysis
    • Statistics
  •  Microsoft
    • Word
    • PowerPoint
  • Web Design
    • Prototype
    • Photoshop
  • Web Development
    • Drupal
    • Joomla
    • WordPress

Cats: CSS, WordPress Tags: rwd

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in