PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!......
虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时候ASP.NET也能有这么多成熟的,流行的开放源代码呢?)。
这个导航条是动态的,主要是要用后台代码判断点击选择的是哪个菜单项,然后修改,进而设置当前选择菜单项的样式。
【效果】
【素材】
素材1:导航条背景
素材2:菜单项链接、鼠标悬浮及当前选项样式背景
【前台界面】
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="WestGarden.Web.Products" StylesheetTheme="NetShop" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)</title>
- </head>
- <body>
- <div id="hd">
- <div class="wp">
- <form id="form1" runat="server">
- <div id="nv">
- <asp:Repeater ID="repCategories" runat="server">
- <HeaderTemplate>
- <ul>
- </HeaderTemplate>
- <ItemTemplate>
- <li>
- <asp:HyperLink runat="server" ID="lnkCategory" NavigateUrl='<%# string.Format("~/Products.aspx?page=0&categoryId={0}", Eval("CategoryId")) %>' Text='<%# Eval("Name") %>' />
- <asp:HiddenField runat="server" ID="hidCategoryId" Value='<%# Eval("CategoryId") %>' />
- </li>
- </ItemTemplate>
- <FooterTemplate>
- </ul>
- </FooterTemplate>
- </asp:Repeater>
- </div>
- </form>
- </div>
- </div>
- </body>
- </html>
【后台代码】
- using System;
- using System.Web.UI.WebControls;
- using System.Data;
- using System.Data.SqlClient;
- namespace WestGarden.Web
- {
- public partial class Products : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- string connString = "Server=.\\SQLEXPRESS;Database=NetShop;Trusted_Connection=SSPI;";
- string cmdText = "SELECT * FROM Category";
- SqlConnection conn = new SqlConnection();
- conn.ConnectionString = connString;
- SqlCommand cmd = new SqlCommand();
- cmd.Connection = conn;
- cmd.CommandType = CommandType.Text;
- cmd.CommandText = cmdText;
- conn.Open();
- SqlDataReader dr = cmd.ExecuteReader();
- repCategories.DataSource = dr;
- repCategories.DataBind();
- dr.Close();
- conn.Close();
- string categoryId = Request.QueryString["categoryId"];
- if (!string.IsNullOrEmpty(categoryId))
- SelectCategory(categoryId);
- }
- private void SelectCategory(string categoryId)
- {
- foreach (RepeaterItem item in repCategories.Items)
- {
- HiddenField hidCategoryId = (HiddenField)item.FindControl("hidCategoryId");
- if (hidCategoryId.Value.ToLower() == categoryId.ToLower())
- {
- HyperLink lnkCategory = (HyperLink)item.FindControl("lnkCategory");
- if(string.IsNullOrEmpty(lnkCategory.CssClass))
- lnkCategory.CssClass = lnkCategory.CssClass + "a";
- else
- lnkCategory.CssClass = lnkCategory.CssClass + " a";
- break;
- }
- }
- }
- }
- }
【CSS样式】
- body { font: 12px/1.5 Tahoma,Helvetica,'SimSun',sans-serif; color: #444444; }
- a { color: #333333; text-decoration: none; }
- a:hover { text-decoration: underline; }
- .wp { margin: 0px auto; width: 960px; }
- #hd { border-bottom: 0px solid #C2D5E3; }
- #hd .wp { padding: 10px 0px 0px; }
- #nv { overflow: hidden; height: 33px; background: url(Images/nv.png) no-repeat scroll 0px 0px #2B7ACD; }
- #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; }
- .ie_all #nv li { line-height: 36px; }
- .ie6 #nv li { line-height: 33px; }
- #nv li a { float: left; padding: 0 15px; height: 33px; }
- #nv li a { color: #FFFFFF; }
- #nv li a.a { margin-left: -1px; background: url(Images/nv_a.png) no-repeat scroll 50% -33px rgb(0, 90, 180); }
- #nv li a.a { color: #00FF00; }
- #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】的更多相关文章
-
ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
-
为MVC应用程序创建导航条
今晚写点什么呢?对于以前的练习,看来看去,好象还差一个菜单导航条.在练习的站点中,有创建了三个控制器,我们就用它们来创建一个导航条吧.想实现这导航条,刚开始还是有点难,还是想起以前ASP.NET的Me ...
-
Bootstrap之导航条
基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...
-
使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
-
JQM (功能栏、导航条)
在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...
-
css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
-
Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
-
1.bootstrap练习笔记-导航条
bootstrap练习笔记 1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...
-
纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
随机推荐
-
linux0.11改进之四 基于内核栈的进程切换
这是学习哈工大李治军在mooc课操作系统时做的实验记录.原实验报告在实验楼上.现转移到这里.备以后整理之用. 完整的实验代码见:实验楼代码 一.tss方式的进程切换 Linux0.11中默认使用的是硬 ...
-
ural 1071. Nikifor 2
1071. Nikifor 2 Time limit: 1.0 secondMemory limit: 64 MB Nikifor has a number x. He doesn't need it ...
-
向Array中添加归并排序
归并排序思路 1) 归并 从两个有序表R[low...mid]和R[mid+1...high],每次从左边依次取出一个数进行比较,将较小者放入tmp数组中,最后将两段中剩下的部分直接复制到tmp中. ...
-
ssh相关命令
ssh命令 ssh命令是openssh套件中的客户端连接工具,可以给予ssh加密协议实现安全的远程登录服务器. 语法ssh(选项)(参数)选项 -1:强制使用ssh协议版本1: -2:强制使用ssh协 ...
-
开始使用gentoo linux——gentoo安装笔记(下)
gentoo安装笔记(下) 上一章,已经对操作系统安装做了充分准备,并且已经从livecd(u盘系统)切换进入了gentoo安装环境中. 不过现在才是真正的开始!打起精神!这可不是在装ubuntu! ...
-
SQL 序列-DML-DML-数据类型-用户管理、权限-事务-视图
--DML--insert关键字--作用:往表中插入一条(多条)记录 --元祖(tuple)值式的插入(一次插入一条记录)--语法1:insert into tablename(column1,col ...
-
【题解】Luogu CF817F MEX Queries
原题传送门 817,我突然想到了某8位质数 这题珂以说是珂朵莉树的模板 三个操作都肥肠简单,前两个区间赋值,第三个区间0变1,1变0 每次输出从头开始扫描就行(我忘了珂朵莉树的性质,竟然还动态维护最左 ...
-
hybrid programming based on python and C/C++
Python/C API Reference Manual¶ https://docs.python.org/3/c-api/index.html Extending and Embedding th ...
-
Python3学习笔记21-实例属性和类属性
由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...
-
Mac下打开多个eclipse
命令行执行: open -n /Eclipse所在路径/Eclipse.app