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. xp下删除windows7，无法删除windows7文件夹，无法删除windows7文件，双系统卸载，取得文件权限

    http://blog.csdn.net/lanmanck/article/details/5722050 ---------------------------------------------- ...

  2. 5. repeater图片放大

    当把鼠标放在一张小图片上时,图片会自动放大,离开时它变小. 我们在静态页面中可以用jQuery来操作.如下为html中的源码. <!DOCTYPE html PUBLIC "-//W3 ...

  3. Spark运行各个时间段的解释

    package org.apache.spark.ui private[spark] object ToolTips {  val SCHEDULER_DELAY =    ""& ...

  4. 【Linux】鸟哥的Linux私房菜基础学习篇整理（一）

    最近,一直在写PPC的模拟器和汇编器,也在做设计.所以重新看了看<鸟哥的Linux私房菜>,还是有好多命令不太熟悉.就打算写几篇blog记下来. 1. nl [-bnw] filename ...

  5. 图论（二分图最大权独立点集）：COGS 2051. 王者之剑

    2051. 王者之剑 ★★★☆   输入文件:Excalibur.in   输出文件:Excalibur.out   简单对比 时间限制:1 s   内存限制:256 MB [题目描述] 这是在阿尔托 ...

  6. iOS Block中的weakSelf/strongSelf

    Objective C 的 Block 是一个很实用的语法,特别是与GCD结合使用,可以很方便地实现并发.异步任务.但是,如果使用不当,Block 也会引起一些循环引用问题(retain cycle) ...

  7. NOI题库1159 Maze

    1159:Maze 总时间限制: 2000ms 内存限制: 65536kB 描述 Acm, a treasure-explorer, is exploring again. This time he ...

  8. How To Create a New User and Grant Permissions in MySQL

    How to Create a New User Let’s start by making a new user within the MySQL shell: CREATE USER 'newus ...

  9. Fluent-EDEM耦合计算颗粒流动

    虽然说Fluent提供了很多方法用于处理颗粒在流体中的运动行为,然而这些方法都有其各自的适用性.DPM适用于稀薄颗粒的情况,欧拉模型.Mixture模型及DDPM模型虽然可以考虑稠密颗粒相,但并不能考 ...

  10. Cocos2d-X学习——Android移植，使用第三方库.so被删掉问题

    2014-05-26 导语:Cocos2dx在安卓上移植的时候,增加第三方库,却发现新加的so库被删掉了. 正文: 1.我的环境: cocos2d-x 2.2.3, ndk-r9 2.网上找了非常多, ...