Мега меню для веб-форм asp.net

Я хочу добавить на веб-сайт функциональность мегаменю, основанную на веб-формах asp.net.

Мне нравится это пример мегаменю.

Я был бы признателен, если бы кто-нибудь мог указать на учебник или руководство, которое показывает мегаменю для приложения asp.net.

Я хотел бы знать, что нужно учитывать при проектировании мегаменю, например, советы по кодированию структуры баз данных и т. Д.

Я искал в сети, но не смог найти много связанного с asp.net. Можно найти плагин мегаменю для CMS на основе PHP, например WordPress или другой CMS.

Помощь в этом отношении приветствуется.

Мне это нужно для обучения, и в наши дни это становится довольно распространенным явлением в Интернете, другие мегаменю, основанные на jquery, которые совместимы с asp.net, были бы отличным преимуществом.

У меня сейчас простая структура меню для меню.

Образец кода

<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 Menu, где, например, мне нужно показать подменю под проектом в раскрывающемся списке и показать следующее в раскрывающемся списке при наведении курсора на Project One / Project Two / Project three

Изображение проекта

Название Проекта

Описание проекта

Могу ли я сделать это с помощью вызова ajax или отправить всю информацию при загрузке страницы, а затем показать ее ...

Мега-меню: мне нужно что-то похожее на этот пример


menu jquery css asp.net megamenu
person Learning    schedule 19.09.2013    source источник
comment
В чем именно заключается ваша проблема? У вас проблемы с созданием динамического меню? Если он статический ... просто скопируйте пример и замените ссылки своими. Меню не имеет значения, если вы работаете в ASP.NET, все отображается в формате HTML.   -  person MikeSmithDev    schedule 19.09.2013
comment
Мое меню динамически генерируется из базы данных, поэтому это кажется трудным, иначе я могу просто создать статическое меню и отдыхать ... Если вы примете во внимание выше ul, то я не уверен, какие изменения мне нужно внести в таблицу меню структура для выполнения такой задачи.   -  person Learning    schedule 19.09.2013

Ответы (2)


arrow_upward
1
arrow_downward

Возможно, вам понадобится комбинация asp : HyperLink и asp: Repeater < / а>.

Если у вас есть фиксированное количество пунктов меню (каждый пользователь увидит 10 ссылок и т. Д.), Вы можете просто использовать asp:Hyperlink и настроить ссылки в коде в соответствии с пользователем.

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

а потом

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

Если вы собираетесь иметь динамическое количество элементов в своем меню - например, если это зависит от того, сколько проектов у пользователя, вам нужно будет использовать повторитель. Примером может быть:

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

_repeater.DataSource = links; //this is your link source from DB.
_repeater.DataBind();
person MikeSmithDev    schedule 19.09.2013
comment
Я действительно ищу что-то вроде этого tinyurl.com/ntg2czk. и мое меню являются динамическими, мне также нужно отображать 1 топ новостей рядом с подменю новостей в меню МЕДИА. Я обновил свой вопрос .. - person Learning; 19.09.2013
comment
Поэтому замените каждую группу ul в разделе «Проекты и медиа» на ретранслятор, который извлекает из вашего динамического источника, в котором есть ссылки. - person MikeSmithDev; 19.09.2013
comment
... если вы собираетесь показывать только 1 новость ... просто используйте гиперссылку, как я показал, и динамически установите NavigateUrl в верхнюю статью. Я обновил свой ответ, чтобы он больше соответствовал вашему вопросу. - person MikeSmithDev; 19.09.2013

arrow_upward
0
arrow_downward

Попробуйте это для учебника по мегаменю css: 1) http://designmodo.com/demo/css3megamenu/ 2) http://designm.ag/inspiration/mega-menus/

person Pooja Shrigod    schedule 19.09.2013