CSS实现导航菜单高亮显示

因为前些天一直在折腾主题,每次都遇到了这个实现导航菜单高亮显示的问题。导航菜单高亮显示可以很好的让用户知道自己所处在哪一导航菜单之下,而且大部分网站也都具有这一功能但是很多都是用js实现的,我不太喜欢js,也可以说是因为我js玩的不是很转,所以凡能用css实现的效果我一般都不会用js的。

以前自己改别人主题的时候做过这效果,不过后来忘记了。这次做的时候又重新开始查资料,但是最终却是在wordpress的默认主题TwentyEleven里找到了答案,所以今天打算记录下来备忘,也方便各位需要的时候随时查阅。

这种方法不是万能的,只限于导航栏是用<?php wp_nav_menu(); ?>函数来调用的主题。这也是我比较喜欢的一种调用方法,因为代码比较简单。当然,这种方式要在主题的函数文件functions.php里首先添加<?php register_nav_menus(); ?>函数来让主题支持自定义菜单功能。

既然提到这个问题,那就一并说一下我平时所用的完整代码吧。

在需要调用导航菜单的地方(一般在header.php)加入代码:

<?php wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); ?>

 

在functions.php文件中加入代码:

<?php // 实现自定义导航菜单 register_nav_menus();?>

这样之后,你的主题就能够支持自定导航菜单了。这种方式的写法很多,可在网上搜索。

至于css实现高亮效果的简单办法如下:

假如为导航菜单加在一个div块中,div的id为nav。

#nav li{ /*导航菜单横向显示*/ Float: left;}#nav a{ /*这里可设置导航菜单的的文字效果,字体、字号、颜色、文字背景、位置等等*/}#nav li:hover a,#nav ul ul:hover a,#nav a:focus{ Color: #fff; /*此处设置导航菜单文字在鼠标划过时的文字颜色,也可以是background-color。举例颜色为#fff。如果在此处去掉a,那么意味着被控制的将是承载文字的块元素。对文字并不能起到控制作用。*/}#nav ul li:hover ul{ Display: block;/*定义鼠标在ul的li上时,ul的样式为块元素显示*/}#nav .current-menu-item a,#nav .current-menu-ancestor a,#nav .current_page_item a,#nav .current_page_ancestor a{/*此处控制某一菜单项被点击后的显示效果,包括文字的颜色、字体、字号、背景或者加边框等等。如过这里把a去掉,则控制的就是承载菜单内文字的块,被控制的也将会是块的背景、边框等等。而这里加上了a就意味着控制的是块内的文字*/}

 

通过上述详解,你已经完全可以通过css控制你的导航菜单高亮显示了,自由度比较高。是要控制文字块的边框、背景,还是控制文字本身的边框、背景、字体颜色或者鼠标滑过是时的状态你都可以自由决定。支持ie8及以上。

发表评论

12 条回应

  1. vfhky说道:

    能css实现的确实不喜欢用js

  2. www.36400.com说道:

    拜个晚年

  3. 女装说道:

    先收藏,等改天有用到的时候,就不用再去找了

    1. 小雨说道:

      好办法 [大笑]

  4. 足球比分说道:

    css不懂呀!努力围观中!围观也是一种力量呀!

    1. 小雨说道:

      哈哈,你的力量不小呀!

  5. 象牙塔说道:

    亮了,呵呵~ [大笑]

    1. 小雨说道:

      亮在哪了~

        1. 小雨说道:

          [擦汗]

  6. mango说道:

    表示没怎么看懂。 [抽烟]

    1. 小雨说道:

      难道是我表达有问题? [唉]