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. QiQi and Bonds

    只有链接:http://sdu.acmclub.com/index.php?app=problem_title&id=961&problem_id=23685 题意:现在有n个QiQi ...

  2. 五种I/O 模式——阻塞(默认IO模式)，非阻塞(常用语管道)，I/O多路复用(IO多路复用的应用场景)，信号I/O，异步I/O

    五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O 五种I/O 模式:[1]        阻塞 I/O          ...

  3. HDOJ(HDU) 2148 Score(比较、)

    Problem Description 转眼又到了一年的年末,Lele又一次迎来了期末考试.虽然说每年都要考试,不过今年的这场考试对Lele来说却意义重大. 因为经济原因,如果今年没有排在班级前几名, ...

  4. 暴力求解——POJ 1321 棋盘问题

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  5. Introduction to Glide, Image Loader Library for Android, recommended by Google

    In the passed Google Developer Summit Thailand, Google introduced us an Image Loader Library for And ...

  6. 简单的Goto运算演示程序

    /* * 该程序用于计算某个项集的Goto集 * RexfieldVon * 2013年8月11日2:34:50 */ #include <stdio.h> #include <st ...

  7. XQuery FLWOR 表达式

    FLWOR 是 "For, Let, Where, Order by, Return" 的只取首字母缩写.for 语句把 bookstore 元素下的所有 book 元素提取到名为 ...

  8. angularJs $injector

    一 angularJS中几种注入方式 Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便. angu ...

  9. 山东省赛A题：Rescue The Princess

    http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=3230 Description Several days ago, a beast caught ...

  10. htaccess 正则规则整理(转)

    为了方便 htaccess 编写正则,这里整理了一下 htaccess 的正则规则. # —— 位于行首时表示注释. [F] —— Forbidden(禁止): 命令服务器返回 403 Forbidd ...