Home > iNove > Change iNove default menu with one in pure CSS

Change iNove default menu with one in pure CSS

Last edited by on 10 December 2013 at 14:33

Tired of the slow menu in javascript, I wanted a menu in pure CSS.

First rename the menu.js to

[cce]/wp-content/themes/inove/js/menu.js.backup[/cce]

From

[cce]/wp-content/themes/inove/header.php[/cce]

Remove the menu.js definition

[cce_php]    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>[/cce]

You will have a definition like this

[cce_php]    <!-- script START -->
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/base.js"></script>
    <!-- script END -->[/cce]

In

[cce]/wp-content/themes/inove/templates/header.php[/cce]

change the menu definition from

[cce_php]    <!-- menus START -->
    <ul id="menus">
        <li><a title="<?php _e('Home', 'inove'); ?>" href="<?php echo get_settings('home'); ?>/"><?php _e('Home', 'inove'); ?></a></li>
        <?php 
            if($options['menu_type'] == 'categories') {
                wp_list_categories('title_li=0&orderby=name&show_count=0');
            } else {
                // wp_list_pages('title_li=0&sort_column=menu_order');
                wp_nav_menu(array( 'container' => '', 'container_class' => '', 'menu_id' => 'menus'));
            }
        ?>
        <li><a href="javascript:void(0);"></a></li>
    </ul>
    <!-- menus END -->[/cce]

to

[cce_php]    <!-- menus START -->
    <?php wp_nav_menu(); ?>
    <!-- menus END -->[/cce]

This way I’m going to use all defaults of wp_nav_menu()
Reference: Function Reference – wp_nav_menu

Now add the style in style.css.

First remove everything that begins with #menu like

[cce_css]#menus li {
  display:inline;
  list-style:none;
}
#menus li a {
  background:transparent url(img/menu.gif) no-repeat;
  display:block;
  color:#382E1F;
  height:31px;
  line-height:31px;
  padding:0 20px;
  margin-left:-10px;
  text-decoration:none;
  font-size:11px;
  float:left;
  z-index:1;
}
#menus li a:hover, 
#menus li a.current {
  background-position:0 -31px;
}
#menus li.current_page_item a, 
#menus li.current-cat a {
  background-position:0 -62px;
}
#menus li a.home {
  background-position:0 -93px;
  width:45px;
  padding:0;
  margin-left:0;
  text-indent:-999em;
}
#menus li a.home:hover {
  background-position:0 -124px;
}
#menus li.current_page_item a.home {
  background-position:0 -155px;
}
#menus li a.lastmenu:hover {
  background-position:0 0;
  cursor:default;
}[/cce]

and

[cce_css]
/* submenu START */
#menus li ul {
  display:none;
  background:#F4F5F7;
  border:solid #A6A6A6;
  border-width:1px 1px 0;
  line-height:0;
  position:absolute;
  z-index:1;
}
#menus li li {
  float:none;
  margin:0;
  padding:0;
  list-style:none;
}
#menus li li a {
  float:none;
  padding:7px 18px 7px 10px;
  text-decoration:none;
  border-bottom:1px solid #DDD;
  margin:0;
  background-image:none;
  height:auto;
  line-height:145%;
  color:#999;
  display:block;
  width:175px;
}
#menus li li a.last {
  border-color:#A6A6A6;
}
#menus li li a:hover, 
#menus li li a.current {
  background-color:#EDEFF0;
  color:#382E1F;
}
#menus li li a.subtitle, 
#menus li li a.subtitle:hover {
  background-image:url(img/arrow.gif);
  background-position:right;
  background-repeat:no-repeat;
}
/* submenu END */[/cce]

Add our style, copied and modified from Twenty Thirteen theme

[cce_css]
/* Menu by Spike */

ul.menu,
div.menu > ul {
  margin: 0;
  padding: 0 40px 0 0;
}

.menu li {
  display: inline-block;
  position: relative;
  float: left;
}

.menu li a {
  color: #382E1F;
  display: block;
  font-size: 11px;
  line-height: 30px;
  padding: 0px 20px;
  text-decoration: none;
  border-left: 1px solid #D7D7D7;
}

.menu li:hover > a,
.menu li a:hover {
  background-color: #F4F5F7;
}

.menu li.last-menu-item a {
  border-right: 1px solid #D7D7D7;
}

.menu .sub-menu {
  background-color: #F4F5F7;
  display: none;
  padding: 0;
  position: absolute;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #A6A6A6;
}

.menu .sub-menu ul {
  left: 100%;
  top: 0;
}

ul.menu ul a,
.menu ul ul a {
  color: #382E1F;
  margin: 0;
  width: 200px;
  border-bottom: 1px solid #A6A6A6;
  border-left: none;
  border-right: none;
}

ul.menu ul li.first-menu-item a,
ul.menu ul li.last-menu-item a {
  border-right: none;
}

ul.menu ul a:hover,
.menu ul ul a:hover {
  background-color: #EDEFF0;
}

ul.menu li:hover > ul,
.menu ul li:hover > ul {
  display: block;
}

.menu .current-menu-ancestor > a {
  background-color: #EDEFF0;
}

/* End menu by Spike */[/cce]

Now we need to add a function in

[cce]/wp-content/themes/inove/functions.php[/cce]

that help us to identify the first and the last element of the menu.

References: Stack Exchange – Adding first last css classes to menusThomas Griffin Media – How to Easily Add Custom Classes to Your First and Last Menu Items in WordPress

After

[cce_php]// register functions
add_action('admin_menu', array('iNoveOptions', 'add'));[/cce]

add

[cce_php]add_theme_support( 'menus' );

add_filter( 'wp_nav_menu_objects', 'tgm_filter_menu_class', 10, 2 );
/**
 * Filters the first and last nav menu objects in your menus
 * to add custom classes.
 *
 * This also supports nested menus.
 *
 * @since 1.0.0
 *
 * @param array $objects An array of nav menu objects
 * @param object $args Nav menu object args
 * @return object $objects Amended array of nav menu objects with new class
 */
function tgm_filter_menu_class( $objects, $args ) {

    // Add first/last classes to nested menu items
    $ids        = array();
    $parent_ids = array();
    $top_ids    = array();
    foreach ( $objects as $i => $object ) {
        // If there is no menu item parent, store the ID and skip over the object
        if ( 0 == $object->menu_item_parent ) {
            $top_ids[$i] = $object;
            continue;
        }

        // Add first item class to nested menus
        if ( ! in_array( $object->menu_item_parent, $ids ) ) {
            $objects[$i]->classes[] = 'first-menu-item';
            $ids[]          = $object->menu_item_parent;
        }

        // If we have just added the first menu item class, skip over adding the ID
        if ( in_array( 'first-menu-item', $object->classes ) )
            continue;

        // Store the menu parent IDs in an array
        $parent_ids[$i] = $object->menu_item_parent;
    }

    // Remove any duplicate values and pull out the last menu item
    $sanitized_parent_ids = array_unique( array_reverse( $parent_ids, true ) );

    // Loop through the IDs and add the last menu item class to the appropriate objects
    foreach ( $sanitized_parent_ids as $i => $id )
        $objects[$i]->classes[] = 'last-menu-item';

    // Finish it off by adding classes to the top level menu items
    $objects[1]->classes[] = 'first-menu-item'; // We can be assured 1 will be the first item in the menu :-)
    $objects[end( array_keys( $top_ids ) )]->classes[] = 'last-menu-item';

    // Return the menu objects
    return $objects;

}[/cce]

The add_theme_support( ‘menus’ ); add the function to use custom menu in iNove theme.
References: WordPress Codex: wp_nav_menu
Wordpress Codex: add_theme_support
Wordpress support forum: update to support wp 3 menu

As we have removed the Home icon from the navigation bar, just add the Home link from the backend.

 

 

 

Enjoy 🙂

 

Categories: Wordpress, iNove
  1. No comments yet.
  1. No trackbacks yet.