如何实现侧边栏菜单之间的分割线——不用border-bottom

  相信大家都遇到过这样一个老生常谈的问题,就是如果当我们所要做的菜单是侧边栏,垂直方向自上而下的排列的菜单栏,我们在做的时候通常的构想是这样的,就是在每两个菜单之间添加分割线,通常的想法就是说给每个菜单添加border-bottom:1px solid #fff;但是这样做有个问题,因为每两个菜单之间需要添加分割线,那么这样做的结果将导致最后一个菜单的边框也会存在边框线,那么我们不得不给最后一个 菜单添加边框线,但是问题有来了,在我们的后台管理系统,比如织梦CMS后台管理系统,我们需要给新的页面添加侧边栏,而添加的方法就是添加侧边栏模板,而随着需求的不断提升和改进,有些侧边栏中的某个菜单势必会因为需求的改变而变得不是那么的必要,比如最下面的菜单,如果删除了,那么倒数第二个菜单的边框线还是会存在在那里,这与我们设计初衷是相悖的,而如果我们再在模板中给侧边栏添加菜单,那么添加之后的菜单也会存在多余的边框线,问题来了,怎么消除?

  现象:

  

  大家的眼力可能看的不大清楚,其实在“关于我们”菜单的底部有一条1px的细线,使用的方法就是常规的border-bottom:1px solid #808080;然后我们在给最后一个<li>单独添加一个类,并加上border-bottom:0px;消除了底部线。

  后来经过本人在撰写中的多次调试时和改进,终究——还是未能想出一个更好,更巧妙的方法

  于是,一次偶然的机会,我进入了http://www.cnblogs.com/wangfupeng1988/p/4282954.html这位大神的博客,发现了解决方法,就是:

  .inside_leftnav ul li+li{
    border-top: 1px solid #A7A7A7;
  }

  html代码如下:

  <div class="inside_leftnav">
    <p class="L_title">品牌中心</p>
    <ul class="menuul1">
      <li class="menuli1 select">
        <a class="menuname1" href="">品牌价值</a>
      </li>
      <li class="menuli1 select">
        <a class="menuname1 menuchange" href="">商业模式&nbsp<span class="arrow arrow2"></span></a>
      </li>
      <li class="menuli1 select">

        <a class="menuname1 final" href="">关于我们</a>

      </li>
    </ul>
  </div>

  显然,我们呢看到,侧边栏菜单彼此之间有分隔线,但菜单“关于我们”的底部则没有边框线。

posted @ 2015-03-27 17:29  菊次郎的幻想  阅读(2871)  评论(0编辑  收藏  举报

begin