首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >asp.net web表单的Mega菜单

asp.net web表单的Mega菜单
EN

Stack Overflow用户
提问于 2013-09-19 20:42:58
回答 2查看 3.3K关注 0票数 0

我想添加巨型菜单功能的网站,这是基于asp.net的网页形式。

我喜欢这个mega menu example

如果一些人可以指向教程或指南,其中显示asp.net应用程序的大型菜单,我将不胜感激。

我想知道巨型菜单的设计考虑因素,如数据库,结构,编码技巧等。

我在网上找了一下,但找不到太多与asp.net相关的东西。可以找到基于PHP的内容管理系统的mega菜单插件,如WordPress或其他内容管理系统。

在这方面的帮助是感激的。

我需要这个来学习曲线,这在网络上变得非常普遍,现在几天了,其他基于jquery的与asp.net兼容的超级菜单将是一个巨大的资产。

我现在有一个简单的菜单结构。

示例代码

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
<li><a href="../en/Page.aspx?pageID=1">Home</a></li>
<li:<a href="../en/Page.aspx?pageID=2">About Us</a></li>
<li><a href="../en/Page.aspx?pageID=3">Projects</a></li>
  <ul >
    <li><a href="../en/Project.aspx?pageID=3&PrjID=1">Project One</a></li>
    <li><a href="../en/Page.aspx?pageID=4&PrjID=2">Project Two</a></li>
    <li><a href="../en/Page.aspx?pageID=5&PrjID=3">Project Three</a></li>
  </ul>
<li><a href="../en/news.aspx?pageID=10">Media</a></li>
  <ul >
    <li><a href="../en/News.aspx?pageID=3&NewsID=1">News </a></li>
    <li><a href="../en/News.aspx?pageID=5&PressIDID=3">Press Releases</a></li>
  </ul>
<li><a href="../en/contact.aspx?pageID=6"> Contact Us</li>
</ul>

我需要将上面的简单下拉菜单更改为Mega菜单,例如,当鼠标悬停在项目一/项目二/项目三上时,我需要将项目下的子菜单显示为下拉菜单,并在下拉列表中显示以下内容

项目图像

项目名称

项目描述

我可以做到这一点使用ajax调用或发送页面下载的全部信息,然后显示它…

Mega Menu :我需要和这个example类似的东西

EN

回答 2

Stack Overflow用户

发布于 2013-09-19 21:06:36

您可能需要组合使用asp:HyperLinkasp:Repeater

如果您有固定数量的菜单项(每个用户将看到10个链接,等等),那么您可以只使用asp:Hyperlink并根据用户调整代码中的链接。

代码语言:javascript
代码运行次数:0
运行
复制
<asp:HyperLink ID="_link1" Text="Home" runat="server"></asp:HyperLink>

然后

代码语言:javascript
代码运行次数:0
运行
复制
_link1.NavigateUrl = "~/en/Page.aspx?pageID=1";

如果您的菜单中的菜单项数量是动态的--例如,如果它取决于用户有多少项目,那么您将需要使用中继器。一个例子可以是:

代码语言:javascript
代码运行次数:0
运行
复制
<ul>
<li><a href="../en/Page.aspx?pageID=1">Home</a></li>
<li><a href="../en/Page.aspx?pageID=2">About Us</a></li>
<li><a href="../en/Page.aspx?pageID=3">Projects</a>
    <asp:Repeater ID="_repeater" runat="server">
        <HeaderTemplate>
            <ul>
        </HeaderTemplate>
        <ItemTemplate>
            <li><a href="<%# Eval("link") %>"><%# Eval("linkName") %></a></li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
</li>
<li><a href="../en/news.aspx?pageID=10">Media</a>
    <ul>
        <li><asp:HyperLink ID="_topNews" Text="News" runat="server"></asp:HyperLink></li>
        <li><a href="../en/News.aspx?pageID=5&PressIDID=3">Press Releases</a></li>
    </ul>
</li>
<li><a href="../en/contact.aspx?pageID=6"> Contact Us</li>
</ul>

假设中继器的数据源具有"link“和"linkName”属性。

代码语言:javascript
代码运行次数:0
运行
复制
_repeater.DataSource = links; //this is your link source from DB.
_repeater.DataBind();
票数 1
EN

Stack Overflow用户

发布于 2013-09-19 20:57:33

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18894924

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档