wordpress CMS主题 微信
Home > 网站建设 > 通过CSS来简单实现下拉菜单效果

通过CSS来简单实现下拉菜单效果

高时银博客 网站建设 点击: 2,869 次 0 0
  • 标签:
  • 最近,群里很多朋友都安装了ssmay主题,感觉还不错,不过,有几个朋友提出,为什么ssmay主题没有下拉菜单呀。当时,也没在意,因为这个主题是根据自己的需求来设计的。后来,又有几个朋友提到这个事情,我觉得也是,为什么不给ssmay主题弄一个下拉菜单呢?那样启不是让网站更加的人性——可展示的分类就更加多了。其实,实现下拉菜单,有好几种途径可以实现,如JS实现、插件实现、还有CSS实现。这里,我只是介绍通过CSS来简单实现 下拉菜单效果

    首先,我们要对菜单做相应的设置。

    进入后台——>外观——>菜单,创建菜单并把分类目录添加到这个菜单里,这里不多说,然后,把你需要显示的二级菜单(或子分类)移到它的一级菜单下面(或父分类),如下图,PHP开发是父分类,网站建设是子分类。

    通过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;
    }
    #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方面却要略胜一筹。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201403061381.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    1个评论 来自 “通过CSS来简单实现下拉菜单效果”

    1. fengmiq 回复 | 引用 Post:2014-04-09 at 14:08

      我按照这个方法设置了不行呀,下拉菜单收不回呀

    发表评论