我的菜单修改

导航清单

        在我的个人网站(www.simplebits.com)里我分享了几种将无序清单转化为水平导航条的方法,用普通的,结构化的XHTML就像我们的食品清单示例那样创造一个类似分页标签(Tab)的效果.

        我们把那个食品清单转换成一个网上超市的导航条(这个超市只卖几种东西就是了...).

        我们想要这个导航条以水平的方式呈现,并且能够在鼠标划过,选中时有某种强调显示,以便我们模拟分页标签的效果.

        首先,我们为清单加上一个id,这样我们就可以为它单独定义css样式了,同时我们也将把每个食品项目转成链接.

<ul id="minitabs">

  <li><a href="/apples/">Apples</a></li>

  <li><a href="/spaghetti/">Spaghetti</a></li>

  <li><a href="/greenbeans/">Green Beans</a></li>

  <li><a href="/milk/">Milk</a></li>

</ul>

现在,开始加上一些辅助的css:

#minitabs{

margin:0;

padding:0 0 20px 10px;

border-bottom:1px solid #696;

}

#minitabs li{

margin:0;

padding:0;

display:inline;

list-style:none;

}

        在这里我们已经完成了去掉默认圆点符号和行内缩进的工作,我们也把 display设置成inline,往垂直清单转化成水平清单迈出了第一步,同时我们也加上了底部边框以便区分出整个链接组.

        把清单转化成水平导航条的第二步,是将我们的链接全部浮动到左边显示,我们同样为所有的超链接加上简单的样式:定义外边距和内补丁的大小:

#minitabs {

  margin: 0;

  padding: 0 0 20px 10px;

  border-bottom: 1px solid #696;

  }

#minitabs li {

  margin: 0;

  padding: 0;

  display: inline;

  list-style-type: none;

  }



#minitabs a {

  float: left;

  line-height: 14px;

  font-weight: bold;

  margin: 0 10px 4px 10px;

  text-decoration: none;

  color: #9c9;

  }

        在这里我们将清单中所有的元素都定义float:left,是为了让他们能水平显示排列于一行之内,同时我们也加上了了一些色彩,把链接改成粗体,拿掉了链接底部的下划线.

       然后,为鼠标滑过或选中的链接创建一个模拟分页标签的边线:

#minitabs {

  margin: 0;

  padding: 0 0 20px 10px;

  border-bottom: 1px solid #696;

  }



#minitabs li {

  margin: 0;

  padding: 0;

  display: inline;

  list-style-type: none;

  }



#minitabs a {

  float: left;

  line-height: 14px;

  font-weight: bold;

  margin: 0 10px 4px 10px;

  text-decoration: none;

  color: #9c9;

  }



#minitabs a.active, #minitabs a:hover {

  border-bottom: 4px solid #696;

  padding-bottom: 2px;

  color: #363;

  }

#minitabs a:hover {

  color: #696;

  }

        为了强调链接,我们在鼠标划过或选中时增加一个4像素高的底边,我们也可以使选中的<a>标签保持强调效果,只要加上class="active":

<li><a href="/spaghetti/" class="active">spaghetti</a></li>

这个 active类别与 a:hover的共用相同的css样式.(图 1 - 7)

图 1 - 7

       我在自己的网站(www.simlpebits.com)以及2003年7月重构Inc.com(www.inc.com)里面都用到了这个技巧.如果你需要更多的示例代码,可以自由访问这两个网站并查看他们的源代码.

        只需要加上一些内补丁和边框,就可以达到各种类似分页标签的效果了,到目前为止,我们甚至连一张图,一句javascript都没有使用,而仅仅只用到了基本的xhtml结构就构成了我们的食品清单,这实在是太棒了!