首页 视频课程 WordPress开发文档菜单/小工具/短代码 菜单样式

菜单样式

2020-11-01 / 5729阅

本视频需要登录以后才能播放

登录

导航菜单中会多出很多CALSS属性,如果你需要需要,你可以选择性的删除多余的CLASS属性。菜单的样式有三种情况。

第一种:li标签的id属性

我们可以通过内置的钩子改变原有的输出,ID是不能重复的,在输出的时候要注意。以下代码直接清除了ID。

//过滤导航菜单的ID属性
function my_css_attributes_filter_id($menu_id,$item,$args,$depth){
       if($depth==1){
              $menu_id = str_replace('menu-item', 'sub', $menu_id);
       }elseif($depth ==2) {
              $menu_id = str_replace('menu-item', 'sub_san', $menu_id);
       }else{
              $menu_id = str_replace('menu-item', 'youran', $menu_id);
       }
       $menu_id = $menu_id.' '.'youranzixue-'.$item->ID;
       $menu_id ='';
       return $menu_id;
}
add_filter('nav_menu_item_id', 'my_css_attributes_filter_id', 100, 4); 

第二种,li标签的class属性

通过过滤钩子nav_menu_css_class 可以自由控制LI标签的class属性

function my_css_attributes_filter($class,$item,$args,$depth) {
       $no_clear=array(
              'current-menu-item',
              'current-post-ancestor',
              'current-menu-ancestor',
              'current-menu-parent',
              'menu-item-has-children',
              'home',
       );
       $class =  is_array($class) ? array_intersect($class, $no_clear) : '';
       if(!is_array($class)){
              $class = array();
       }
       if($depth ==0) {
              array_push($class,'one');
       }elseif($depth==1){
              array_push($class,'two');
       }elseif($depth ==2) {
              array_push($class,'three');
       }else{
              array_push($class,'ten');
       }
       return $class;
}
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 4); 

第三种,ul标签的CLASS属性

通过nav_menu_submenu_css_class钩子,可以改变UL的class属性。

add_filter('nav_menu_submenu_css_class', 'my_css_attributes_filter_ul', 100, 3);
function my_css_attributes_filter_ul($class,$args,$depth) {
       if($depth ==0) {
              //array_push($class,'one');
              $class = array('one');
       }elseif($depth==1){
              array_push($class,'two');
       }elseif($depth ==2) {
              array_push($class,'three');
       }else{
              array_push($class,'ten');
       }
       return $class;
} 

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
    我的见解
    目录