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

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

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

【效果】

【素材】

素材1：导航条背景

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

【前台界面】

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）</title>
  6. </head>
  7. <body>
  8. <div id="hd">
  9. <div class="wp">
  10. <form id="form1" runat="server">
  11. <div id="nv">
  12. <asp:Repeater ID="repCategories" runat="server">
  13. <HeaderTemplate>
  14. <ul>
  15. </HeaderTemplate>
  16. <ItemTemplate>
  17. <li>
  18. <asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />
  19. <asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />
  20. </li>
  21. </ItemTemplate>
  22. <FooterTemplate>
  23. </ul>
  24. </FooterTemplate>
  25. </asp:Repeater>
  26. </div>
  27. </form>
  28. </div>
  29. </div>
  30. </body>
  31. </html>

【后台代码】

  1. using System;
  2. using System.Web.UI.WebControls;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. namespace WestGarden.Web
  6. {
  7. public partial class Products : System.Web.UI.Page
  8. {
  9. protected void Page_Load(object sender, EventArgs e)
  10. {
  11. string connString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";
  12. string cmdText = "SELECT * FROM Category";
  13. SqlConnection conn = new SqlConnection();
  14. conn.ConnectionString = connString;
  15. SqlCommand cmd = new SqlCommand();
  16. cmd.Connection = conn;
  17. cmd.CommandType = CommandType.Text;
  18. cmd.CommandText = cmdText;
  19. conn.Open();
  20. SqlDataReader dr = cmd.ExecuteReader();
  21. repCategories.DataSource = dr;
  22. repCategories.DataBind();
  23. dr.Close();
  24. conn.Close();
  25. string categoryId = Request.QueryString["categoryId"];
  26. if (!string.IsNullOrEmpty(categoryId))
  27. SelectCategory(categoryId);
  28. }
  29. private void SelectCategory(string categoryId)
  30. {
  31. foreach (RepeaterItem item in repCategories.Items)
  32. {
  33. HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");
  34. if (hidCategoryId.Value.ToLower() == categoryId.ToLower())
  35. {
  36. HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");
  37. if(string.IsNullOrEmpty(lnkCategory.CssClass))
  38. lnkCategory.CssClass = lnkCategory.CssClass + "a";
  39. else
  40. lnkCategory.CssClass = lnkCategory.CssClass + " a";
  41. break;
  42. }
  43. }
  44. }
  45. }
  46. }

【CSS样式】

  1. body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; }
  2. a { color: #333333; text-decoration: none; }
  3. a:hover { text-decoration: underline; }
  4. .wp { margin: 0px auto; width: 960px; }
  5. #hd { border-bottom: 0px solid #C2D5E3; }
  6. #hd .wp { padding: 10px 0px 0px; }
  7. #nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; }
  8. #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; }
  9. .ie_all #nv li { line-height: 36px; }
  10. .ie6 #nv li { line-height: 33px; }
  11. #nv li a { float: left; padding: 0 15px; height: 33px; }
  12. #nv li a { color: #FFFFFF; }
  13. #nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }
  14. #nv li a.a { color: #00FF00; }
  15. #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，都不会有什么问题。

9、这个导航条通常应该做成用户控件的形式，这样就可以应用到不同的场合，不同的场合下，所要修改的，只是那十四行从数据库获取数据的代码就行了。

【源代码下载】

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

Asp.net 导航条【1】的更多相关文章

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

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

  2. 为MVC应用程序创建导航条

    今晚写点什么呢?对于以前的练习,看来看去,好象还差一个菜单导航条.在练习的站点中,有创建了三个控制器,我们就用它们来创建一个导航条吧.想实现这导航条,刚开始还是有点难,还是想起以前ASP.NET的Me ...

  3. Bootstrap之导航条

    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...

  4. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  5. JQM （功能栏、导航条）

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  6. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  9. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

随机推荐

  1. Java switch-case

    首先从原理上来阐述这个问题: switch(表达式){case 常量表达式1:语句1;....case 常量表达式2:语句2;default:语句;}1.default就是如果没有符合的case就执行 ...

  2. ♫【JS】offsetParent

    This property will return null on Webkit if the element is hidden (the style.display of this element ...

  3. 部署lvs-rrd监控LVS

    1.安装rrdtool .tar.gz cd rrdtool- ./configure -prefix=/usr/local/rrdtool make make instal 安装完毕后将rrdtoo ...

  4. Windows下动态库的隐式调用

    多年的工作经验告诉我Windows下使用动态库最简单的方法:使用def导出函数,然后隐式调用. 具体做法如下: (1)首先使用visual studio 创建“Win32项目”,如下图: (2)然后在 ...

  5. word 2010中如何创建多级目录和多级列表

    原文地址:http://wenku.baidu.com/link?url=KkSmYTqogxA5VJkLCGb957E5fIGN5S50FUx7IpAWWWKWWRYvaeGl2IvX-dFP25r ...

  6. Windows Shell Extension 系列文章

    Windows Shell Extension 系列文章 http://www.codeproject.com/Articles/512956/NET-Shell-Extensions-Shell-C ...

  7. [置顶] ruby变量详解(收集+整理)

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...

  8. Spring MVC返回对象JSON

    @RestController 用于返回对象,会自动格式化为JSON     @RequestMapping("/user2")     public User2 user2(Mo ...

  9. do while 与while的区别！

    #include "stdio.h" main() { ,b=; do{ //在这里do while 是先完成{}里的运算在判断while()里的循环// a=a+b; b++; ...

  10. xcode设置项目图标玻璃镜效果

    xcode5中设置 ios6和ios7的适配一些小细节注意,ios6中图标会默认的设置玻璃镜效果 找到图片文件夹APPlcon中右侧设置中的有个iOS icon is pre-rend-rendere ...