Pure.CSS is a popular css framework but the challenge is to integrate into wordpress. I will show you how to convert a wordpress navi menu into pureCSS multi level type menu (http://purecss.io/menus/).
In PureCSS you can create a dropdown multilevel simple menu using this html code. You have to add this line to kickstart pure css
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
</ul>
</li>
</ul>
</div>
We have to convert our wordpress navi menu code into purecss code. How to do it? We will see here.
We will add purecss class to UL, LI, A elements, including for the sub-menu UL children
nav or div ->pure-menu pure-menu-horizontalUL ->pure-menu-list UL -> pure-menu-children (if has submenus) LI ->pure-menu-item pure-menu-selected A href -> pure-menu-item
First lets declare a wp navi menu in the theme. The below wordpress code generates necessary classes for UL, LI and A tags. The final walker_nav_menu() adds the class UL children.
<nav>
<?php wp_nav_menu(array('theme_location' =>'primary-menu',
'menu_class' => 'pure-menu-list',
'container_class' => 'pure-menu pure-menu-horizontal',
'walker' => new th_walker_nav_menu()
)); ?>
</nav>
We declare these functions in functions.php
1. We add ‘pure-menu-item’ to LI tags
// Add custom class to li of wp_navi_menu()
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
$classes[] = "pure-menu-item";
return $classes;
}
2. We add ‘pure-menu-link’ to the a href item in the menus using the filter. This will add a class to the links.
// Add class to a href
function add_menuclass($ulclass) {
return preg_replace('/<a /', '<a class="pure-menu-link" ', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');
3. We add the classes to LI if has children and hover property
// LI Submenu parent class
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'pure-menu-item pure-menu-has-children pure-menu-allow-hover';
}
}
return $items;
}
4. Finally we setup classes for UL ‘pure-menu-children’, only possible through the walker hook.
// Add class to ul submenu
class th_walker_nav_menu extends Walker_Nav_Menu {
// add classes to ul sub-menus
function start_lvl( &$output, $depth = 0, $args = array() ) {
// depth dependent classes
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
$display_depth = ( $depth + 1); // because it counts the first submenu as 0
$classes = array(
'sub-menu pure-menu-children',
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),
( $display_depth >=2 ? 'sub-sub-menu' : '' ),
'menu-depth-' . $display_depth
);
$class_names = implode( ' ', $classes );
// build html
$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}
}
After this our wordpress pure.CSS navigation menu will be up and running like show below
