现在位置: 首页 > 程序设计 > 正文
A+

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

7个月前 程序设计 316 9

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

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

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

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

Code   ViewPrint
  1. #header-main ul ul {z-index:-1;visibility:hidden;}
  2. #header-main ul li:hover > ul {z-index:150;visibility:visible;animation:myheader .4s;animation-fill-mode:forwards;}
  3. @keyframes myheader {0% {top:100px;opacity:0;}
  4. 50% {top:80px;opacity:.5;}
  5. 100% {top:70px;opacity:1;}
  6. }
  7. #header-main li .sub-menu {border:1px solid #ddd;border-bottom:0;position:absolute;left:0;}
  8. #header-main li .sub-menu li {background:#fff;padding:0 18px 0 5px;margin:0;height:40px;line-height:40px;font-size:14px;border-bottom:1px solid #ddd;}
  9. #header-main li .sub-menu li a {line-height:40px;height:40px;padding:0 20px 0 5px;font-size:14px;color:#333;whitewhite-space:nowrap;}
  10. #header-main li .sub-menu i {font-size:14px;margin-right:5px;}
  11. #header-main li .sub-menu li:hover {background:#2291f7;}
  12. #header-main li .sub-menu li a:hover {color:#fff;}
  13. #header-main ul li .sub-menu li:hover::before {left:0;width:0;}
  14. #header-main ul li ul .current-menu-item::before {height:0;}
  15. #header-main ul li ul .current-menu-item a {color:#2291f7;}

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

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

Code   ViewPrint
  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 );

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

发表评论

评论列表 ( 有 316 次浏览 和 9 条评论 其中 访客有 6 条 博主有 3 条 )
搜索