How does WordPress call secondary/multi-level navigation bar custom menu?

a lot ofInternet marketingpeople chooseWordpressComeBuilding website, but the navigation bar of some themes does not support secondary/multi-level menus. If you are not satisfied, you can try to manually add or modify the menu style of the theme.

The modification starts from header.php. An important function in this template file is the display of the menu.

If you use the code to call the category as a menu, it is also possible, but it is not convenient to sort the menu items.

The directory with subcategories is not easy to handle, so I also want to add a custom menu function to my theme like other themes.

It is not difficult to add menu customization function to the newly made theme, there are mainly 2 steps.

The first step, WordPress menu registration

To use the menu, you must first register, open the functions file under the theme, and append the following code ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• If there is no functions.php file under the theme, create a new one and copy the above code to save it.

log inWordPress backend, and then go to Appearance→Menu.

If you can see the screen below, it means you have registered as ▼

The above registers 2 menus:

1. A top menu Top Menubar.
2. a main menu Main menubar.

The second step, the WordPress menu call

After the menu is registered, it can be called in the theme template file. Put the following code in the header.php file, and you can call it where you want to display the menu.

In the header.php file, call the "top menu"▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

In the header.php file, call the "main menu"▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Call the "bottom menu" in the footer.php file▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Step XNUMX: Settings menu

After the menu is registered and the display position of the menu is defined in the theme file, you can create a new menu item in the WordPress background.

Then, assign the newly created menu item to the registered menu, and suggest the corresponding relationship ▼

Make wordpress multi-level menu navigation bar

Now let's talk about how to make a WordPress multi-level menu:

First delete the original menu code in the functions file of your own WordPress theme.

or add this code directly ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Note: must be inAdded outside.

Then find the PHP code for the theme to call the menu, if it's raw, it's usually like this ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

remove it and replace it with ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Note: Make sure this code doesn't contain other divs, otherwise it will be bounded by the outer div.

The next step is to add the dropdown JS function code and add the following code to the theme's JS file ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

WordPress menu CSS styles

Finally, CSS style beautification.

What kind of effect should be, give full play to your imagination, CSS can do it ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Add the above CSS code to the theme's style.css file and save it.

After saving, refresh the front page of your website, you can see the effect, is it very simple?