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 CSSSliding Doors of CSS, Part II 他们讲得更深入一些

效果预览

CS Tip 06: Sliding Doors of CS(S)

最终效果


导航条代码位于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

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

Cstip06_02

为了简单起见我把<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 中包含了浮动元素,我们添加他为了避免他不影响布局

posted on 2006-07-29 23:48  xwang  阅读(...)  评论(... 编辑 收藏

导航

统计