Mega menú desplegable para el sitio web

I want to implement Mega Menu structure for my webform based website.

I want to implement Mega Menus using following CSS based Mega Menus

This is a good example but i am not exactly sure how to implement on my website with stores Page/Menu information in database.

I have a basic table CMS_Pages Which holds all the basic information related to the page I use same table to field Page_Name as Menu name & create sub-menu based on Page_Inheritance campo.

In order to implement the mega menu i need to make some alterations to the same table by adding addition fields either to use this mega menu or create a separate Mega_Menu table which will have additional fields to support this Mega Menu.

I also looked as the following example which show how kentico CMS using this mega menu but example is not very clear to me.

in this example he basically uses only one field Menu Item CSS class field to implement mega menu along with some other code which is show in example, since i have never worked with this CMS i am finding it hard to understand this example

Estructura de tabla

[Page_Id] [int] IDENTITY(1,1) NOT NULL,
[Page_Name] [nvarchar](300) NULL,
[Page_Title] [nvarchar](900) NULL,
[Page_Desc] [nvarchar](1200) NULL,
[Page_Keywords] [nvarchar](400) NULL,
[Page_Body] [nvarchar](max) NULL,
[Page_Link_Position] [int] NULL,
[Page_Layout_Position] [nvarchar](30) NULL,
[Page_Internal_Link] [bit] NULL,
[Page_Handler] [varchar](300) NULL,
[Page_Target_Window] [nvarchar](50) NULL,
[Page_Active] [bit] NULL,
[Page_Publish] [bit] NULL,
[Page_Inheritance] [int] NULL,
[Page_Create_Date] [smalldatetime] NULL,
[Page_Update_Date] [smalldatetime] NULL,
[Page_Created_By_User] [nvarchar](20) NULL,
[Page_Searchable] [bit] NULL

I was think of adding additional fields like like Mega_Menu_CSS , Mega_Menu_Container_Div

Sample Data for some of the fields

Page_Id Page_Name   Page_Internal_Link    Page_Handler    Page_Searchable     Page_Created_By_User    Page_Inheritance
1       Home                1               Default.aspx        0                   NULL                        0
2       About Us            1               Page.aspx           0                   NULL                        1
3       News                1               News.aspx           0                   NULL                        0
5       Contact Info        1               Page.aspx           0                   NULL                        2
6       Our Profile         1               Page.aspx           0                   NULL                        2
10      Quality Policy      1               Page.aspx           0                   NULL                        2
11      Services            1               Page.aspx           0                   NULL                        11
12      Car Rentals         1               Page.aspx           0                   NULL                        11
13      Car Leasing         1               Page.aspx           0                   NULL                        11
14      Car Sales           1               Page.aspx           0                   NULL                        11

I would appreciate help in this regard to implement the Mega meus with an database example & code in c# to have a clear understanding how it can be implement, I have been looking for such tutorial but could not find much help on this topic for custom cms or websites

preguntado el 23 de abril de 13 a las 11:04

Do you have a scope/design that you're working to that defines the end result? The Mega Menu seems VERY flexible and highly customisable but if you don't have a clear idea of exactly how you want your menu to look and work it may be difficult to work out how to get there. -

this table show is the base table then i will have other tables for News Section ( I want mega menu to show top 3 news). Similar i can show mega meny unde Car Rentals & show atleas 3 different cars models available for rent. (This information may come from Car_Rental Table and so.. I am looking for an example which will have mega menu implementation along with database design.. What i have show as example is scenario. -

you need to make a recursive function -

This question is way to broad to provide a good answer. You need to focus your question. It sounds like you are asking for someone to write your entire project for you instead of helping with a specific problem. -

@BenSwayne, It may sound like that but i want an example even a tutorial which is already on internet or an small open source project which can act a good base for Mega Menu type structure. I am happy if one points me in right direction. -

1 Respuestas

I would approach this the same way I would the page - a mini cms. More importantly, I would have this completely separate from your page structure - trying to integrate it would confuse matters.

Here is a start to the models I would begin to use:

public class Navigation
    public int Id { get; set; }
    public string PageNavigation { get; set; } // The page name
    public string Description { get; set; }
    public int SortOrder { get; set; }
    public int Location { get; set; } // So you can order from one side to another

This would consist of your parent navigation

public class NavigationItem
    public int Id { get; set; }
    public Navigation Navigation { get; set; } // NavigationId
    public string Heading { get; set; }
    public string CssGroup { get; set; }

This would contain the different groups within that menu item

public class NavigationItemCollection
    public int Id { get; set; }
    public NavigationItem NavigationItem { get; set; } // NavigationItemId
    public string LinkText { get; set; }
    public string ImageUrl { get; set; }
    public int PageId { get; set; } // The URL the link will navigate to
    public string CssGroup { get; set; }

This would essentially be the menu links.

Here is an example of how this would look:

  • Home (ID 1 - SORT 1 - Location 1 [LEFT])
    • My Awesome heading (ID 1 - NavId 1 - Css: col-5)
      • Some link text (PageId: 55 - Css: BoldMe)
      • Some Other text (PageId: 57 - Css: Normal)
      • etc.
  • Some other thing with images (ID 2 - navId 2 - Css: navwithimages)
    • Some text (pageid 66 - css: image - imageurl someimages.png)
    • Some other text (pageid 66 - css: image - imageurl someotherimages.png)

Now, here is probably where it gets messy and you start hard coding css class names - something I wouldn't be a fan of - you are going to have to have some if or case statements looking out of the css class name and do certain things to display images or something like that:

if(navigationItemCollections.CssGroup == "col-2") 
    // Do this

I would also consider a model for all the css class names.

Hope this helps you start working on this menu. You may also want to consider moving to MVC as the controls can make achieving this much harder.

Something else worth noting (and I know other developers will hate me for saying this) I would use StringBuilder to build the menu - that or when you amend the menu write the html out to a file.

contestado el 06 de mayo de 13 a las 23:05

I was looking for a small example like one you have place. I agree with you for using stringbuilder for Menus specially if we are planning for Mega Menus which i am not sure how to do it with menu control. I would study your structure & see how it can be used to implement mega menus. +1 for details - Aprendizaje

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.