• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > 通过CSS来简单实现下拉菜单效果

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

    作者: 分类:网站建设 点击: 6,158 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      最近,群里很多朋友都安装了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方面却要略胜一筹。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“通过CSS来简单实现下拉菜单效果”

    1. fengmiq说道:

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

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.