菜单栏背景自动延伸

May 15

bearjia , 17:10 , CSS的罪恶 , 评论(0) , 引用(0) , 阅读(1051) , Via 本站原创

大 | 中 | 小

话说很多门户的头部菜单都如下图所示

这个是文字较少的情况，要是菜单名字很长呢？

那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层

起名为bg.png
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层

起名为bg1.png

样式代码如下：

.box{ width:500px; height:30px; background:url(bg.png) 0 -35px repeat-x;}
  .box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
  .box a{ color:#FFF; text-decoration:none;}
  .ccc{ background:url(bg1.png) left 0;}
  .ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}

页面代码如下：

<div class="box">
  <ul>
      <li><a href="#">标题1</a></li>
        <li class="ccc"><a href="#">较长的标题</a></li>
        <li><a href="#">标题2</a></li>
    </ul>
</div>

OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。