Question

我想为我的asp.net webform网站实现Mega Menu结构。

我想使用以下基于CSS的Mega Menus实现Mega Menus

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

这是一个很好的例子，但我不确定如何在我的网站上实现数据库中的商店页面/菜单信息。

我有一个基本的表CMS_Pages其中包含与我使用相同的表到字段Page_Name的页面相关的所有基本信息，如菜单名称＆amp;根据{{1}}字段创建子菜单。

为了实现mega菜单，我需要通过添加附加字段来对同一个表进行一些更改，以使用这个大型菜单或创建一个单独的Mega_Menu表，该表将有其他字段来支持这个Mega菜单。

我还看了下面的例子，它显示了kentico CMS如何使用这个大型菜单，但示例对我来说不是很清楚。

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

在这个例子中，他基本上只使用一个字段Page_Inheritance字段来实现mega菜单以及一些其他代码，这些代码在示例中显示，因为我从未使用过这个CMS我发现很难理解这个例子

表格结构

Menu Item CSS class

我考虑添加其他字段，例如[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，Mega_Menu_CSS

某些字段的示例数据

Mega_Menu_Container_Div

我很感激在这方面帮助实现Mega meus与数据库示例＆amp; c＃中的代码清楚地了解它是如何实现的，我一直在寻找这样的教程，但是对于自定义cms或网站的这个主题找不到太多帮助

Answer 1

我会以与页面相同的方式处理此问题 - 迷你cms。更重要的是，我将这与您的页面结构完全分开 - 尝试集成它会使事情变得混乱。

这是我开始使用的模型的开始：

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
}

这将包含您的父导航

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

这将包含该菜单项

中的不同组

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

这基本上就是菜单链接。

以下是一个示例：

主页（ID 1 - SORT 1 - 位置1 [LEFT]）
- My Awesome heading（ID 1 - NavId 1 - Css：col-5）
  - 一些链接文字（PageId：55 - Css：BoldMe）
  - 其他一些文字（PageId：57 - Css：Normal）
  - 等
图像的其他一些东西（ID 2 - navId 2 - Css：navwithimages）
- 一些文字（pageid 66 - css：image - imageurl someimages.png）
- 其他一些文字（pageid 66 - css：image - imageurl someotherimages.png）

现在，这里可能是凌乱的地方，你开始编写css类名称 - 这是我不喜欢的东西 - 你将不得不从css类名中查找一些if或case语句并做某些事情来显示图像或类似的东西：

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

我还会考虑所有css类名的模型。

希望这有助于您开始使用此菜单。您可能还想考虑转移到MVC，因为控件可以更难实现这一点。

还有其他值得注意的东西（我知道其他开发人员会讨厌我这样说）我会使用StringBuilder来构建菜单 - 或者当您修改菜单时将html写入文件。

asp.net网站的巨型下拉菜单

1 个答案: