wordpress中CSS来简单实现下拉菜单效果
最近,群里很多朋友都安装了ssmay主题,感觉还不错,不过,有几个朋友提出,为什么ssmay主题没有下拉菜单呀,当时,也没在意,因为这个主题是根据自己的需求来设计的,后来,又有几个朋友提到这个事情,我觉得也是,为什么不给ssmay主题弄一个下拉菜单呢？那样启不是让网站更加的人性——可展示的分类就更加多了,其实,实现下拉菜单,有好几种途径可以实现,如JS实现、插件实现、还有CSS实现,这里,我只是介绍通过CSS来简单实现 下拉菜单效果.
首先,我们要对菜单做相应的设置。
进入后台——>外观——>菜单,创建菜单并把分类目录添加到这个菜单里,这里不多说,然后,把你需要显示的二级菜单(或子分类)移到它的一级菜单下面(或父分类).
如果你使用的主题是Ssmay 1.1主题,那么到这里你的菜单就是下拉式菜单了,到这里就可以结束了,如果你想研究一下,可以继续向下看.
然后,修改头部文件导航菜单的代码,把原有的导航菜单代码换成下面的这句代码.
<?php wp_nav_menu( array( ‘container’ => ],’items_wrap’ => ‘<ul id=]nav] class=]menu]>%3$s</ul>’,'fallback_cb’ => ] ) ); ?>
最后,是设置相关的CSS代码,把下面这段代码放到style.css文件里,代码如下:
/*下拉菜单*/ #nav { background : #222 ; font-size : 1.1em ; } #nav , #nav ul { list-style : none ; line-height : 1 ; } #nav a, #nav a:hover { display : block ; text-decoration : none ; border : none ; } #nav li { float : left ; list-style : none ; border-right : 1px solid #a9a9a9 ; } #nav a, #nav a:visited { display : block ; font-weight : bold ; color : #f5f5f4 ; padding : 0px 0px ; } #nav a:hover, #nav a:active, .current_page_item a, #home .on { background : #000 ; text-decoration : none } #nav li ul { position : absolute ; left: -999em ; height : auto ; width : 90px ; border-bottom : 1px solid #a9a9a9 ; } #nav li li { width : 90px ; border-top : 1px solid #a9a9a9 ; border-right : 1px solid #a9a9a9 ; border-left : 1px solid #a9a9a9 ; background : #777 ; } #nav li li a, #nav li li a:visited { font-weight : normal ; font-size : 0.9em ; color : #FFF ; } #nav li li a:hover, #nav li li a:active { background : #000 ; }www. 111 cn.net #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto ; } a.main:hover { background : none ; }这样,下拉菜单就实现了,当然,我这里只实现了二级下拉菜单,没有实现三级下拉菜单,如果想实现三级下拉菜单,还可以进一步去做,不过,我觉得wordpress网站没有必要设置到三级下拉菜单,因为站点一般都不会太大,呵呵,虽然这样的下拉菜单没有JS设计出来的炫酷,但是在SEO方面却要略胜一筹.
查看更多关于wordpress中CSS来简单实现下拉菜单效果 - WordPress的详细内容...