WordPress 3.0 + menu function supports two and N-level menu implementation steps

Time:2019-11-18

The built-in navigation menu function is the only function of WordPress 3.0 +, which makes my eyes bright again in the process of new theme making. I found that the navigation menu of WordPress supports two-level and N-level menus.
Of course, to realize the pull-down secondary menu function, you still need the cooperation of jQuery and CSS. Here is a brief introduction:

First, to make your theme support WordPress 3.0 +, simply add the following code to functions.php of the theme:

Copy code

The code is as follows:

<?php
if ( function_exists(‘register_nav_menus’) ) {
register_nav_menus(array(
‘primary’ = > navigation menu ‘
));
}
?>

Then, call the following code in header.php:

Copy code

The code is as follows:

<?php
if(function_exists(‘wp_nav_menu’)) {
wp_nav_menu(array(‘theme_location’=>’primary’,’menu_id’=>’nav’,’container’=>’ul’));
}
?>

Next, you can see menu options in the menu of WordPress background control panel. As long as you drag the module to the first level menu, you will form a second level menu, or even a third level menu, which is as easy to operate as dragging the module in the gadget. As shown in the picture:

Be careful: you can see that there is no red box in the figure above, which can be dragged. The blank in the front is the second level menu, and the blank in the front is the third level menu. And so on. Is it very simple? O (∩∩∩∩∩∩∩∩∩∩) o~
According to the above steps, generate the corresponding code:

Copy code

The code is as follows:

<ul>
<li><a href=”DUMMY”>Fiber Fusion Splicer</a>
<ul>
<li><a href=”DUMMY”>EG6871</a></li>
<li><a href=”DUMMY”>EG6871A</a></li>
<li><a href=”DUMMY”>EG6872</a></li>
</ul>
</li>
<li><a href=”DUMMY”>Light Source</a>
<ul>
<li><a href=”DUMMY”>EG-OLS-18</a></li>
<li><a href=”DUMMY”>EG-OLS-18V</a></li>
<li><a href=”DUMMY”>EG-OLS-19</a></li>
<li><a href=”DUMMY”>EG-OLS-19V</a></li>
</ul>
</li>
<li><a href=”DUMMY”>Optica Cable</a>
<ul>
<li><a href=”DUMMY”>GYFTY</a></li>
<li><a href=”DUMMY”>GYTA</a></li>
</ul>
</li>
</ul>

The model of a two-level menu has been shown. The rest is to match CSS and jQuery to produce the effect of a pull-down menu.
The executed script is also very simple, as follows:

Copy code

The code is as follows:

<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘#nav li’).hover(function() {
$(‘ul’, this).slideDown(300)
},
function() {
$(‘ul’, this).slideUp(300)
});
});
</script>

Then add the corresponding CSS Style:

Copy code

The code is as follows:

<style type=”text/css”>
ul,li{padding:0;margin:0;list-style:none;}
a{text-decoration:none;}
#nav li{width:100px;line-height:30px;float:left;}
#nav li a{text-align:center;display:block;width:100px;background:#ccc;}
#nav li a:hover{background:#000;color:#fff;}
.sub-menu{display:none;}
</style>

It’s a success. The above styles are basic things. You can design according to your own theme.
You can continue to read about WordPress tips.