完整点击区域的滑动门菜单

80酷酷网    80kuku.com

　　菜单

点击盲区图示，很明显可见到在上面一张图菜单的边缘无手形。

原有代码：

  1. #nav li {
  2. float:left;
  3. background:url("left_both.gif") no-repeat left top;
  4. margin:0;
  5. padding:0 0 0 9px;
  6. border-bottom:1px solid #765;
  7. }
  8. #nav a {
  9. float:left;
  10. display:block;
  11. background:url("right_both.gif") no-repeat right top;
  12. padding:5px 15px 4px 6px;
  13. text-decoration:none;
  14. font-weight:bold;
  15. color:#765;
  16. }

改进过的代码：

  1. #nav li {
  2. float:left;
  3. background:url("right_both.gif") no-repeat right top;
  4. margin:0 0 0 9px;
  5. padding:0;
  6. }
  7. #nav a {
  8. float:left;
  9. display:block;
  10. position:relative;
  11. left:-9px;
  12. margin-right:-9px;
  13. width:.1em;
  14. background:url("left_both.gif") no-repeat left top;
  15. padding:5px 20px;
  16. text-decoration:none;
  17. font-weight:bold;
  18. color:#765;
  19. }

比较上面的代码，可以看到左右背景图互换了下，采用了相对定位，列表项目和它的链接使用了正负边界的方法，作者在IE5.x, IE6, IE7, Firefox and Opera调试成功。

，原来的当前位置代码被我简化掉了，改用类选择器（Class Selectors）了。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇用CSS制作"鼠标经过图像"

下一篇重构之美－走在Web标准化设计的路上

相关文章

点击：