Mega Drop-Down Menu for asp.net website

Question

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

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

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

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

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.

http://devnet.kentico.com/Knowledge-Base/Design-and-css/Creating-a-Mega-Menu-%28step-by-step%29.aspx

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

Table Structure

[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

Answer 1

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.