CODEWITHSUNDEEP
jqueryasp.netcssmenumegamenu
Learning
Learning

Reputation: 20051

Mega Menu for asp.net web forms

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

Upvotes: 0

Views: 3387

Answers (2)

MikeSmithDev
MikeSmithDev

Reputation: 15797

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();

Upvotes: 1

Pooja Shrigod
Pooja Shrigod

Reputation: 165

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

Upvotes: 0

Related Questions