只做利于SEO的网站,提供网站建设、SEO、网站代运营等服务。服务中心 | 建站流程 | 网站地图

Wordpress菜单导航下拉效果判断是否有子分类

2021-10-16小猴建站 阅读()相关主题:wordpress

WEB开发经常主导航经常用到下拉菜单功能,可以在有子分类的栏目附近放置一个倒三角形,提醒用户这里的有更多分类。方法很简单,模板代码块如下:

HTML部分

<ul>
 <li <?php
  $category = get_the_category(); //默认获取当前所属分类
  echo 'class="son' . $category[0]->category_parent . '"';  //若不是子分类目录 则值为0;
 ?>><a href="list-1">栏目一</a>
 </li>
 ...
</ul>

CSS样式

ul li.son0{background:url(/skin/images/xia.png) no-repeat right center;}
ul li.son:hover{background:url(/skin/images/shang.png) no-repeat right center;}

例子是用倒三角和正三角的背景图片,加了一点鼠标反馈效果,也可以用CSS3或者font-icon的来做,喜欢的就自己研究一下,就不贴出来了。