在Asp.Net 2.0中使用Css Tab Design样式美化菜单

Css Tab Design 是一个用来做导航样式非常方便的Freeware.(其实就是提供了一堆样式可以套用: ) ),效果如下图所示:

界面如下:

可以非常方便的导出css文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>

<!--

body {

margin:0;

padding:0;

font: bold 11px/1.5em Verdana;

}

h2 {

font: bold 14px Verdana, Arial, Helvetica, sans-serif;

color: #000;

margin: 0px;

padding: 0px 0px 0px 15px;

}

/*- Menu Tabs F--------------------------- */

#tabsF {

float:left;

width:100%;

background:#efefef;

font-size:93%;

line-height:normal;

border-bottom:1px solid #666;

}

#tabsF ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabsF li {

display:inline;

margin:0;

padding:0;

}

#tabsF a {

float:left;

background:url("tableftF.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabsF a span {

float:left;

display:block;

background:url("tabrightF.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#666;

}

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

#tabsF a span {float:none;}

/* End IE5-Mac hack */

#tabsF a:hover span {

color:#FFF;

}

#tabsF a:hover {

background-position:0% -42px;

}

#tabsF a:hover span {

background-position:100% -42px;

}

#tabsF #current a {

background-position:0% -42px;

}

#tabsF #current a span {

background-position:100% -42px;

}

-->

</style>

</head>

<body>

<ul>

<li><a href="products.html"><span>Products</span></a></li>

<li id="current"><a href="services.html"><span>Services</span></a></li>

<li><a href="support.html"><span>Support</span></a></li>

<li><a href="order.html"><span>Order</span></a></li>

<li><a href="about.html"><span>About</span></a></li>

</ul>

</div>

</body>

</html>

而.Net2自带的Menu控件用来做导航也是非常方便的
只要SiteMap文件里定义好站点路径
拖一个SiteMapDataSource和一个Menu并设置DataSource就好了

直接复制Css是不行的,因为Css Tab Design生成的是Div布局的
而Menu是Table布局的，而且从上面的代码可以看出
菜单项文字<span>也是有样式的，因此需要自定义Menu的模板加入<span>

在这里有个问题郁闷了我很久,初学.Net 2 ,SiteMap不大熟
http://community.csdn.net/Expert/topic/5199/5199167.xml?temp=.8506586

最后总算调好了,没有做进一步的美化:

有兴趣的可以下载源码看看

另: 今天看Scott的blog发现有 ASP.NET 2.0 CSS Friendly Control Adapters 1.0 这个dd
就是把menu gridview等输出成div格式的
上面的Menu也挺漂亮的
提供了Start Kit下载
以后打算就用这个了

posted on 2006-12-04 11:05 calmzeal 阅读(8217) 评论(10) 编辑收藏举报