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. 不管，干一个HAPROXY先

    说不定要用到的塞.... 1.wget http://www.haproxy.org/download/1.5/src/haproxy-1.5.12.tar.gz 2.tar -zxvf haprox ...

  2. 我的VSTO之路(三)：Word基本知识

    原文:我的VSTO之路(三):Word基本知识 在前一篇文章中,我初步介绍了如何如何开发一个VSTO程序,在本文中,我将进一步深入介绍Word的插件开发.Word是一个大家在日常工作中一直接触的文档工 ...

  3. Android Wear开发 - 数据通讯 - 第一节 : 连接数据层

    http://developer.android.com/training/wearables/data-layer/accessing.html Accessing the Wearable Dat ...

  4. Surprising Strings（map类）

    http://poj.org/problem?id=3096 题意容易理解,开始直接暴力,还是用map写下吧,熟练一下: #include<stdio.h> #include<str ...

  5. Squares(哈希)

    Time Limit: 3500MS   Memory Limit: 65536K Total Submissions: 14328   Accepted: 5393 Description A sq ...

  6. ZOJ-2587-Unique Attack(最小割的唯一性)

    题意: 求无向图最小割是否唯一 分析: 1.我们先对原图求一次最大流 2.对残留网络,我们从S开始,找到所有所有S能到达的点:再从T开始,找出所有能到达T的点. 3.判断原网络中是否还有没有访问到的点 ...

  7. 【最小生成树】Codeforces 707B Bakery

    题目链接: http://codeforces.com/problemset/problem/707/B 题目大意: 给你N个点M条无向边,其中有K个面粉站,现在一个人要在不是面粉站的点上开店,问到面 ...

  8. SendMessage API

    using System; using System.IO; using System.Threading; using System.Diagnostics; using System.Runtim ...

  9. HDU-1207 汉诺塔II

    汉诺塔  四根所需要的步数的规律: 规律:a[1]=1;a[2]=a[1]+2;a[3]=a[2]+2;(2个加2^1)a[4]=a[3]+4;a[5]=a[4]+4;a[6]=a[5]+4;(3个加 ...

  10. Java---计算机贷款支付额计算(用对话框实现)

    本例演示如何编写程序来计算贷款支付问题. 下面是编写程序的步骤: 1.提示用户输入年利率.年数和贷款总额 2.利用年利率算出月利率 3.通过前面的公式计算月支付额. 4.计算总支付额,它是月支付额乘以 ...