ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

西园软件

于 2013-07-29 17:46:20 发布

阅读量8.2k

点赞数 8

分类专栏：【ASP.NET电子商务系统】文章标签：漂亮的导航条 Discuz ASP.NET

本文链接：https://blog.csdn.net/yousuosi/article/details/9618601

版权

本文介绍了如何使用ASP.NET创建一个动态、自适应宽度的导航条，模仿Discuz!的设计。通过后台代码判断并设置当前选中菜单项的样式，利用Repeater控件和CSS样式实现。关键在于使用HiddenField控件存储分类ID，并通过函数SelectCategory()调整选中项的class。导航条设计为自适应宽度，背景图片通过CSS控制，确保不超过160px宽度时正常显示。源代码提供下载。

摘要由CSDN通过智能技术生成

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>