Step 1:

To register custom menu you need to go to your functions.php file. You need to call the register_nav_menus function inside your custom function oleez_register_my_menus and hook it to the init hook.

function oleez_register_my_menus() {
	register_nav_menus(
		array(
			'header-menu' => __( 'Header Menu' ),
			'header-secondary-menu' => __( 'Header Secondary Menu' ),
			'extra-menu'  => __( 'Extra Menu' )
		)
	);
}

add_action( 'init', 'oleez_register_my_menus' );

Here, we are registering three custom menus:

  1. Header menu with menu name as header-menu,
  2. Header Secondary with menu name as header-secondary-menu
  3. Extra Menu with menu name as extra-menu .

You can either add these in you functions.php file directly or you can make a new file and add the path in you function.php.

Step 2:

You need to login into you WordPress Dashboard and check for the registered menu. It might look something as shown below.

Once you into your WordPress Dashboard go to Appearance > Menus. Create a new menu and make sure to spell the name correctly. The name is Header Secondary Menu. Then add the pages you want to display. Make sure to check the box for Header Secondary Menu and hit save 😉

Now create a function called oleez_get_menu_id get the menu id . Remember that the value of $location in our case will be for example header-secondary-menu

/**
 * Get the menu id by menu location.
 *
 * @param string $location
 *
 * @return integer
 */
function oleez_get_menu_id( $location ) {

	// Get all locations
	$locations = get_nav_menu_locations();

	// Get object id by location.
	$menu_id = $locations[$location];

	return ! empty( $menu_id ) ? $menu_id : '';

}

Now you need to go to your header.php file or where ever you want the menu to be registered or you can create a new file and add call the above created function oleez_get_menu_id by passing the menu location to get the menu id.

We then call the WordPress function wp_get_nav_menu_items to get the menu items as an array and then loop through those menu items to display the menu using HTML markup .

<?php

$header_menu_id = oleez_get_menu_id( 'header-secondary-menu' );
$header_secondary_menu = wp_get_nav_menu_items( $header_menu_id );
?>

<div class="header-secondary-menu-items-wrap">
	<div>
		<button class="close-secondary-menu">X</button>
	</div>
	<?php
		if ( ! empty( $header_secondary_menu ) && is_array( $header_secondary_menu ) ) {
			?>
			<ul class="header-secondary-menu-items">
				<?php
					foreach ( $header_secondary_menu as $menu_item ) {
						?>
						<li>
							<a class="header-secondary-menu-link" href="<?php echo esc_url( $menu_item->url ); ?>">
								<?php echo esc_html( $menu_item->title ); ?>
							</a>
						</li>
						<?php
					}
				?>
			</ul>
			<?php
		}
	?>
</div>

Notice that we are checking two conditions here. First if the header_secondary_menu is not empty and its an array. Then we will loop through the menu items. So all i had to do was add the menu items in the foreach loop. Make sure to add the link. Coz unless you add the link its not gonna take you anywhere.

You can use any class name, however it’s better to keep it semantic. Its always good to keep things organised. Make you you add the correct path of the folders you create. You can include the file by using get_template_parts () . Now if you will check on the front-end and menu items would be displayed. Yay! 👏

Step 3:

Now our first functionality is done. Now the next part we have to proceed with is CSS.

.menu-btns {
	display: flex;
	align-items: center;
	padding-right: 12px;

	.burger-menu-icon {
		display: block;
		@media screen and (min-width: $tablet) {
			display: none;
		}
	}
}

.header-secondary-menu-icon-wrap {
	margin-right: 12px;
	.header-secondary-menu-icon {
		width: 16px;
		height: 16px;
	}
}

.header-secondary-menu-items-wrap {
	position: absolute;
	top: 0;
	right: 0;
	background-color: $black;
	height: 100vh;
	width: 270px;
	z-index: 1;
	transform: translateX(100%);
	transition: 0.3s ease-in all;

	&.open {
		transform: translateX(0);
	}

	.header-secondary-menu-items {
		height: 100%;
		padding: 86px;
	}

	.header-secondary-menu-link {
		color: $yellow;
		font-size: 25px;
		line-height: 1;
		font-weight: 700;
		padding-top: 15px;
		padding-bottom: 15px;
		display: inline-block;
	}
}

You can choose the color and the with according to your requirement. And you can also decide if you want to give it a complete height or any chosen height. We have also used animation in our css.

Below is a Screenshot of what the Header Secondary Menu will look like after styling.

Step 4:

Now the next step is to add javascript to your Header secondary menu. So go to you javascript folder and create a new folder called menu and add an index.js file. Make sure to add the path of your new file to your main javascript file.

const secondaryMenuBtn = document.querySelector( '.header-secondary-menu-icon-wrap' );
const secondaryMenu = document.querySelector( '.header-secondary-menu-items-wrap' );
const closeSecondaryMenuBtn = document.querySelector( '.close-secondary-menu' );

if ( secondaryMenuBtn ) {
	secondaryMenuBtn.addEventListener( 'click', () => {
    if ( secondaryMenu.classList.contains('open') ) {
      secondaryMenu.classList.remove( 'open' );
    } else {
      secondaryMenu.classList.add( 'open' );
    }
  } )
}

if ( closeSecondaryMenuBtn ) {
  closeSecondaryMenuBtn.addEventListener( 'click', () => {
    if ( secondaryMenu ) {
      secondaryMenu.classList.remove( 'open' );
    }
  } )
}

So what we are doing here is grabbing the menu open button, menu container and menu close button and storing them into variables secondaryMenuBtn, secondaryMenu, closeSecondaryMenuBtn

We have added a JavaScript function addEventListener and when we are instructing is: hey javascript! listen, on the click of an event open the secondaryMenu and if its already open on the click of an event remove the open class so that we close the secondaryMenu and we are doing it with the help of an if else loop. Basically we its a way to toggle in between two events.