A+

纯CSS实现导航栏二级菜单下拉样式

2019年05月22日 程序设计 9条评论 193次浏览

这两天给博客的主题来了一次小的升级变动,其中一项就是把之前的导航栏由三段式改成了一体式,添加了二级菜单的功能,这样看起来比较简单。

关于二级菜单着实花了一点时间去研究,浏览了很多博主的导航栏设计,大部分的用的都是jquery,无奈这个脚本是我的短板,当然jquery做出来的确实好看,但既然我选择了简单设计,就不想再给主题增加大量的JS文件。

其实CSS做出来的二级菜单也很好看,而且CSS可以做各种效果的动画,研究了一下,确实强大。

说说我的二级菜单的制作过程吧,其实很简单,也就几行代码的样式。

  1. #header-main ul ul {
  2.     displaynone;
  3. }
  4. #header-main ul li:hover > ul {
  5.     displayblock;
  6. }
  7. #header-main ul ul {
  8.     border-left:1px solid #ddd;
  9.     border-right:1px solid #ddd;
  10.     border-bottom:1px solid #ddd;
  11.     background: rgba(255,255,255,0.8);
  12.     positionabsolute;
  13.     top69px;
  14.     left:0;
  15.     z-index: 150;
  16. }
  17. #header-main ul ul li {
  18.     padding:0 15px;
  19.     margin:0;
  20.     height:50px;
  21.     line-height:50px;
  22.     text-align:center;
  23.     width:auto;
  24.     positionrelative;
  25.     whitewhite-space:nowrap;
  26. }
  27. #header-main ul ul li a:after {
  28.     displaynone;
  29. }
  30. #header-main ul ul li a {
  31.     font-size:15px;
  32.     color#333;
  33. }
  34. #header-main ul ul i {
  35.     font-size:14px;
  36.     margin-right:3px;
  37. }
  38. #header-main ul ul li:hover {
  39.     background:#2291f7;
  40. }
  41. #header-main ul ul li a:hover {
  42.     color:#fff;
  43. }

其实这个CSS稍微修改一下还可以增加三级菜单以及更多的样式,且简单实用,如果要用到动画效果可以运用@keyframes 规则实现,可以去百度一下相关的资料进行修改!

接下来要给二级菜单增加一个小箭头,这段代码在网上找的,很好用,只要把它放到function.php里去就行了。

  1. /* 自动给导航菜单中包含下拉菜单的项目添加示意箭头 */
  2. add_filter( 'walker_nav_menu_start_el', function$item_output$item$depth$args ) {
  3.     if( in_array( 'menu-item-has-children', $item->classes ) ) {
  4.         $arrow = 0 == $depth ? '<i class="yao yao-xia"></i>' : '<i class="yao yao-you"></i>';
  5.         $item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
  6.     }
  7.     return $item_output;
  8. }, 10, 4 );

最终的效果请看本站的二级菜单效果。

  • 本文为原创文章,版权归所有。欢迎分享本文,转载请保留出处!
  • 给我留言

    评论列表 (有 193 次浏览 和 9 条评论)
    1. 回复 今日新鲜事

      文章不错非常喜欢,支持

    2. 回复 头条新闻

      文章不错支持一下吧

    3. 回复 029shouji.com

      纯CSS才是天然无公害的

    4. 回复 创业博客

      博主是一个CSS高手啊

      • 回复 锋言锋语管理员

        @创业博客 新手而已!

    5. 回复 张波博客

      效果做的确实不错,

      • 回复 锋言锋语管理员

        @张波博客 抄了太多的begin,感觉越来越像了,好烦,自己又没有创意!

    6. 回复 去看你博客

      学习了