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. 【HDOJ】2268 How To Use The Car

    数学题.设步行速度a,车速b,距离c.Teddy步行时间为T1,WhereIsHeroFrom步行时间T2,总时间T.若b>a:aT1 + b(T-T1) = c (1)aT2 + b(T-T2 ...

  2. COJ 0970 WZJ的数据结构（负三十）树分治

    WZJ的数据结构(负三十) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个点的无根树,点和边上均有权值.请你设计 ...

  3. FFT（快速傅里叶变换）：HDU 5307 He is Flying

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8IAAAPeCAIAAABInTQaAAAgAElEQVR4nOy9fZReVXk3vP8ia+HqCy

  4. HDU1251 统计难题（Trie）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  5. MD5加密详解

    MD5加密详解 引言: 我在百度百科上查找到了关于MD5的介绍,我从中摘要一些重要信息: Message Digest Algorithm MD5(中文名为信息摘要算法第五版)为计算机安全领域广泛使用 ...

  6. 借助github搭建自己的博客

    创建GitHub技术博客全攻略 通过GitHub Pages建立个人站点(详细步骤) 备注: 我搭建成功了,但是访问时只能使用"http://username.github.io/usern ...

  7. (组合数学3.1.1.2)UVA 10098 Generating Fast(使用字典序思想产生所有序列)

    /* * UVA_10098.cpp * * Created on: 2013年10月8日 * Author: Administrator */ #include <iostream> # ...

  8. Ueditor 1.4.3 jsp utf-8版图片上传问题

  9. 详解udev

    如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Linux改变了几次策略.在Linux早期,设备文件仅仅是是一些带有适当的属性集的普通文件,它由mknod命令创建,文件存放在/dev ...

  10. .NET 基础 一步步 一幕幕[面向对象之new、this关键字]

    经常会有人问:小伙子,有没有对象啊,要不要大叔我帮你介绍一个啊,小伙子会说:大叔,不用我自己new一个就好了.(PS:活该你没有对象) 上边当然是一个段子咯,程序员那会没有对象,自己new一个就有了啊 ...