PHP比较成熟的开放的源代码比较多，比方说PrestaShop，比方说Discuz!......

虽然语言不同，但基本原理是一样的，有时间的话读一读，对学习ASP.NET应该是非常有好处的（唉，什么时候ASP.NET也能有这么多成熟的，流行的开放源代码呢？）。

这个导航条是动态的，主要是要用后台代码判断点击选择的是哪个菜单项，然后修改，进而设置当前选择菜单项的样式。

【效果】

【素材】

素材1：导航条背景

素材2：菜单项链接、鼠标悬浮及当前选项样式背景

【前台界面】

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）</title>

</head>

<body>

    <div id="hd">

        <div class="wp">

            <form id="form1" runat="server">

            <div id="nv">

                <asp:Repeater ID="repCategories" runat="server">

                    <HeaderTemplate>

                        <ul>

                    </HeaderTemplate>

                    <ItemTemplate>

                        <li>

                            <asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />

                            <asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />

                        </li>

                    </ItemTemplate>

                    <FooterTemplate>

                        </ul>

                    </FooterTemplate>

                </asp:Repeater>

            </div>

            </form>

        </div>

    </div>

</body>

</html>

【后台代码】

using System;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

namespace WestGarden.Web

{

    public partial class Products : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            string connString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";

            string cmdText = "SELECT * FROM Category";

            SqlConnection conn = new SqlConnection();

            conn.ConnectionString = connString;

            SqlCommand cmd = new SqlCommand();

            cmd.Connection = conn;

            cmd.CommandType = CommandType.Text;

            cmd.CommandText = cmdText;

            conn.Open();

            SqlDataReader dr = cmd.ExecuteReader();

            repCategories.DataSource = dr;

            repCategories.DataBind();

            dr.Close();

            conn.Close();

            string categoryId = Request.QueryString["categoryId"];

            if (!string.IsNullOrEmpty(categoryId))

                SelectCategory(categoryId);

        }

        private void SelectCategory(string categoryId)

        {

            foreach (RepeaterItem item in repCategories.Items)

            {

                HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");

                if (hidCategoryId.Value.ToLower() == categoryId.ToLower())

                {

                    HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");

                    if(string.IsNullOrEmpty(lnkCategory.CssClass))

                        lnkCategory.CssClass = lnkCategory.CssClass + "a";

                    else

                        lnkCategory.CssClass = lnkCategory.CssClass + " a";

                    break;

                }

            }

        }

    }

}

【CSS样式】

body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; }

a { color: #333333; text-decoration: none; }

a:hover { text-decoration: underline; }

.wp { margin: 0px auto; width: 960px; }

#hd { border-bottom: 0px solid #C2D5E3; }

#hd .wp { padding: 10px 0px 0px; }

#nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; }

#nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url(Images/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }

.ie_all #nv li { line-height: 36px; }

.ie6 #nv li { line-height: 33px; }

#nv li a { float: left; padding: 0 15px; height: 33px; }

#nv li a { color: #FFFFFF; }

#nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }

#nv li a.a { color: #00FF00; }

#nv li a:hover { background: url(Images/nv_a.png) no-repeat 50% -66px; }

【说明】

1、实例所使用的样式表，基本都是Discuz中的，其中的样式命名基本没做改动。

2、前台界面主要使用了Repeater控件，HyperLink和HiddenField控件如果不用的话，可以直接用<a>和<span>标签代替，把数据绑上就可以了。

3、实例的关键是这个HiddenField控件（也可以设置属性不显示的<span>标签），里面存放了分类项的ID，后台代码主要是根据这个ID来判断该菜单项是不是当前选项。

4、后台代码12--31行是从数据库NetShop中获取分类表Category中的分类项名字和ID，这些代码，如果采用结构我想编程会很简捷。

5、后台代码34-36行是获取链接地址，从地址中取出菜单项ID（categoryId），然后调用函数SelectCategory()。

6、函数SelectCategory()的主要功能是根据从地址中获取的菜单ID，查找对应项在Repeater的位置，然后，修改该项的class。

7、素材的几个背景图片是做在一起的，在CSS中，主要是通过背景起始位置来控制链接、鼠标悬浮及当前选项的背景。

8、自适应宽度的关键在于，设置菜单项背景时，起始水平位置是50%，这样，只要菜单项的宽度不超过背景图片的宽度，也就是160px，都不会有什么问题。

【源代码下载】

http://download.csdn.net/detail/yousuosi/5834551

ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）的更多相关文章

  1. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  2. Asp.net 导航条【1】

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  3. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  4. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  5. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  6. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  7. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  8. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

随机推荐

  1. UIView的user Interaction Enabled属性

    A Boolean value that determines whether user events are ignored and removed from the event queue. 译: ...

  2. Android 编程下两种方式注册广播的区别

    常驻型广播 常驻型广播,当你的应用程序关闭了,如果有广播信息来,你写的广播接收器同样的能接收到,它的注册方式就是在你应用程序的AndroidManifast.xml 中进行注册,这种注册方式通常又被称 ...

  3. ORACLE 临时表空间清理

    Oracle临时表空间主要用来做查询和存放一些缓冲区数据.临时表空间消耗的主要原因是需要对查询的中间结果进行排序.临时表空间的主要作用: 索引create或rebuildOrder by 或 grou ...

  4. shell script入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  5. 身份证上的X到底代表什么?

    生活中,无论你是坐火车,还是办理各种手续,都需要用到身份证,它现在已经俨然成为我们生活的非常重要的一部分,但是关于身份证本身,你了解多少呢? 有人会说了,为什么我的身份证上写的有效时间是10年,而一些 ...

  6. web-3g-(163)网易-邮箱-记事本-数据库设计

    ylbtech-DatabaseDesgin:ylbtech-cnblogs(博客园)-数据库设计-2,Admin(用户后台) DatabaseName:cnblogs(博客园) Model:Admi ...

  7. 为我所用之Monkey

    文章由来:有朋友问到Monkey的使用的问题,就整理一下Monkey的基本使用,以备后用查询. Monkey是一Android中的一个命令行工具,eclipse中有自带此工具,可以运行在模拟器以及真实 ...

  8. Java与云计算有什么关系呢

    在如今这个信息技术高速发展的今天,云计算已经不是一个陌生的概念了,但是,当云计算遇到java将会有什么样的问题产生呢?下面,新霸哥将会为你揭晓Java与云计算之间的关系. 众所周知,java是一种应用 ...

  9. SpringMVC + Spring + MyBatis 学习笔记：提交数据遭遇基础类型和日期类型报400错误解决方法

    系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 使用SpringMVC ...

  10. Spring3 整合Quartz2 实现定时任务

    一.Quartz简介 Quartz是一个由James House创立的开源项目,是一个功能强大的作业调度工具,可以计划的执行任务,定时.循环或在某一个时间来执行我们需要做的事,这可以给我们工作上带来很 ...