General method of making two-level pull-down menu for WordPress website navigation

PetitQ WordPress Tutorial 2023-6-30 nine hundred and forty-seven zero zero

Collection

Some websites have many columns, and it is difficult to display all these columns in a single line of website navigation. In this case, you can display more navigation columns by making a two-level drop-down menu. Now, let's introduce a simple method of making a two-level drop-down menu for WordPress website navigation to students who are learning to build websites.

Unzip the downloaded package, and put the jquery1.42.min.js and jquery The two files SuperSlide. 2.1.3.js are uploaded to the js folder of their own templates through FTP tools;

Find in the header template header.php Label, place the code below On the label; (Note the file path)

 <script type="text/javascript" src=" <? php  echo get_template_directory_uri ( ) ;  ?> /static/js/jquery1.42.min.js"></script>

 <script type="text/javascript" src=" <? php  echo get_template_directory_uri ( ) ;  ?> /static/js/jquery. SuperSlide.2.1.3.js"></script>

Want to be here? contact us bar

Replace the original website navigation menu code with the following code. (generally in header. php)

```
 <div id="menuun">
```

         <? php wp_nav_menu (  array (  'theme_location'  => 'topmenu' , 'container'  =>  '' , 'menu_class'  =>  'topnav clearfix' , 'menu_id'  =>  'topmeau' , 'depth'  =>  two ,  )  ) ;  ?>

 <script id="jsID" type="text/javascript">

```
  
```
```
 jQuery("#menuun").slide({
```
```
 type:"menu",
```
```
 titCell:"#topmeau>li",
```
```
 targetCell:".sub-menu",
```
```
 effect:"slideDown",
```
```
 delayTime:300 ,
```
```
 triggerTime:0,
```
```
 returnDefault:true
```
```
 });
```
```
 </script>
```
```
 </div>
```

Paste the following CSS style code to the bottom of the style.css file.

 #menuun { width : 1000px ; margin : zero  auto ; background : #A03128 ; }

         .clearfix : after { content : "." ; display : block ; height : zero ; clear : both ; visibility : hidden ; }

         .topnav {  height : 40px ; line-height : 40px ; padding : zero  20px ;  position : relative ;  z-index : one ;   }

         .topnav a {  color : #fff ;  font-weight : four hundred ;  }

         .topnav ul , .topnav ol , .topnav li { list-style : none ; }

 .topnav > li {  float : left ;   position : relative ;  }

 .topnav > li a {  display : block ; padding : zero  20px ;  font-size : 14px ;   }

         .topnav  .sub-menu {  display : none ;  width : 100% ;  left : zero ;  top : 40px ;   position : absolute ;  background : #1B120B ; /*Modify drop-down box background color*/   line-height : 26px ;  padding : 5px ;   }

         .topnav  .sub-menu li { text-align : center ;  overflow :  hidden ;   text-overflow :  ellipsis ;   white-space :  nowrap ; zoom : one ;  }

         .topnav  .sub-menu a {  display : block ;  padding : 5px  10px ;  }

         .topnav  .sub-menu a : hover {  color : #fff ;   }

         .topnav  .current-menu-item a {  color : #F00 ! important ;  /*Modify the selected text color*/   }

Add navigation menu in the website background - Appearance - Menu. (If the background menu is not enabled, the menu function must be enabled first.)

In this way, you can create a two-level drop-down menu navigation.