0

I want to add mega menu functionality to website which is based on asp.net web forms.

I like this mega menu example.

I would appreciate if some can point to tutorial or a guide which show mega menu's for asp.net application.

I would like to know Design consideration for mega menu like databases structure coding tips etc.

I looked for in on net but could not find much related to asp.net. One can find mega menu plugin for PHP based CMS like WordPress or other CMS.

Help in this regarding is appreciate.

I need this for learning curve and this is becoming quite common on web now a days, other Mega menu which are based on jquery which are compatible with asp.net would be a great asset.

I have a simple menu structure right now for menu.

Sample code

<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>

I need to change above simple dropdown menu to Mega Menu where for example i need to show an under project sub menu as drop down and show following in the Dropdown when one hovers over Project One / Project Two / Project three

Project Image

Project Title

Project Desc

Can i do it using ajax call or send whole information on page download and then show it ...

Mega Menu : I need something similar to this example

Learning
  • 19,469
  • 39
  • 180
  • 373
  • What exactly is the problem you are having? Are you having problems building a dynamic menu? If it is static.... just copy the example and replace the links with your own. The menu doesn't care if you are in ASP.NET, it all gets rendered as HTML. – MikeSmithDev Sep 19 '13 at 12:46
  • My menu are dynamically generate from database that why it seems to be difficult, otherwise i can just create static menu and do rest... If you take above `ul` in to consideration then i am not sure what changes i need to make in menu table structure to accomplish such task. – Learning Sep 19 '13 at 12:49

2 Answers2

1

You'll probably need to use a combination of asp:HyperLink and asp:Repeater.

If you have a fixed amount of menu items (every user will see 10 links, etc), then you could just use the asp:Hyperlink and adjust the links in the code behind according to the user.

<asp:HyperLink ID="_link1" Text="Home" runat="server"></asp:HyperLink>

and then

_link1.NavigateUrl = "~/en/Page.aspx?pageID=1";

If you are going to have dynamic number of items in your menu -- like if it depends on how many projects the user has, you'll need to use a repeater. An example could be:

<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>

Assuming the data source for your repeater has "link" and "linkName" properties.

_repeater.DataSource = links; //this is your link source from DB.
_repeater.DataBind();
MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
  • I am actually looking for something like this http://tinyurl.com/ntg2czk. and my Menu are dynamic, I also need to show top 1 news next to news Sub Menu under MEDIA menu.. I have updated my question.. – Learning Sep 19 '13 at 13:12
  • So replace each `ul` group under Projects and Media with a repeater that pulls from your dynamic source that has the links in it. – MikeSmithDev Sep 19 '13 at 13:20
  • ... if if you are going to only be showing 1 news story ever... just use the hyperlink like I showed and dynamically set the NavigateUrl to the top story. I updated my answer to put it more in context with your question. – MikeSmithDev Sep 19 '13 at 13:36
0

Try This, for css mega menu tutorial: 1) http://designmodo.com/demo/css3megamenu/ 2) http://designm.ag/inspiration/mega-menus/

Pooja Shrigod
  • 165
  • 1
  • 1
  • 13