Cs Tip07: Sliding Doors of Cs(s)

译自: http://soup.co.za/weblog/archive/2006/03/28/44.aspx

在CS Tip 02 (英文，中文) 中我们介绍了怎样修改站点顶部， 现在我们来用 Douglas Bowman's 提供的Sliding Doors of CSS来为我们的Cs创建一个酷酷的Css导航菜单

为了让您尽快上手，强烈建议您读一读Sliding Doors of CSS 和 Sliding Doors of CSS, Part II 他们讲得更深入一些

效果预览

最终效果

导航条代码位于Themes/default/skins/Skin-RepeaterBar.ascx 中，如果你查看一下产生的代码，会发现是用Table布局的，而我们要做的是要产生如下的代码

<ul>
<li class="navselected"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Blogs</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Photos</span></a></li>
</ul>

你也许注意到了每个链接都用span包住了，那是因为为了给链接加背景图像, 详细请查看Sliding Doors of CSS, Part II

我们先要修改原来的代码为

<asp:Repeater EnableViewState="false" runat="server" id="Menu">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li class="<%# ((bool) DataBinder.Eval(Container.DataItem, "IsSelected")) ? "navselected" : "" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "NavigateUrl") %>"><span><%# DataBinder.Eval(Container.DataItem, "Text") %></span></a></li>
</ItemTemplate>
<FooterTemplate>
<ul>
</FooterTemplate>
</asp:Repeater>

这样，被选择的项将会应用样式navselected

我也制作了简单的背景图像

为了简单起见我把<div class="CommonTabBar"> 改为<div id="navbar">

The CSS

前面我已经说了，关于这个示例的详细原理请查看Sliding Doors of CSS尤其是 Sliding Doors of CSS, Part II， 在这里我就仅仅列出代码了

我们在Common.css中添加

#navbar {
float:left;
width:100%;
background-color:#333333;
font-size:93%;
line-height:normal;
}

#navbar ul {
margin: 0;
padding: 0px 10px 0;
list-style: none;
}

#navbar li {
display: inline;
margin: 0;
padding: 0;
}

#navbar a {
float:left;
background:url ("../images/custom/navbarleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
text-decoration:none;
}

#navbar a span {
float:left;
display:block;
background:url ("../images/custom/navbarright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
font-weight:bold;
color:#333333;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#navbar a span {
float:none;
}

/* End IE5-Mac hack */

#navbar a:hover span {
color:#666666;
}

#navbar .navselected a {
background-position:0 -300px;
border-width:0;
}

#navbar .navselected a span {
background-position:100% -300px;
padding-bottom:5px;
color:#333333;
}

#navbar a:hover {
background-position:0% -150px;
}

#navbar a:hover span {
background-position:100% -150px;
}

#CommonBody {
clear:both;
}

我们对Sliding Doors of CSS做的修改仅仅是加了 Clear: both; 因为#navbar 中包含了浮动元素,我们添加他为了避免他不影响布局