2

我想为我的基于 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作为菜单名称字段并根据字段创建子菜单Page_Inheritance。

为了实现超级菜单，我需要通过添加附加字段来对同一个表进行一些更改以使用此超级菜单或创建一个单独的 Mega_Menu 表，该表将具有支持此超级菜单的附加字段。

我还查看了以下示例，该示例显示了 kentico CMS 如何使用此大型菜单，但示例对我来说不是很清楚。

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

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

表结构

[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

某些字段的示例数据

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

我希望能在这方面提供帮助，以使用 C# 中的数据库示例和代码来实现 Mega meus，以便清楚地了解它是如何实现的，我一直在寻找这样的教程，但在自定义 cms 的这个主题上找不到太多帮助或网站

4

1 回答 1

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 [左]）
    • 我的真棒标题（ID 1 - NavId 1 - Css：col-5）
      • 一些链接文本（PageId：55 - Css：BoldMe）
      • 其他一些文本（PageId：57 - Css：正常）
      • ETC
  • 图像的其他一些东西（ID 2 - navId 2 - Css：navwithimages）
    • 一些文本（pageid 66 - css: image - imageurl someimages.png）
    • 其他一些文本（pageid 66 - css: image - imageurl someotherimages.png）

现在，这可能是它变得混乱的地方，你开始硬编码 css 类名——我不会喜欢的东西——你将不得不有一些 if 或 case 语句从 css 类名中查找并做某些事情显示图像或类似的东西：

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

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

希望这可以帮助您开始处理此菜单。您可能还想考虑迁移到 MVC，因为控件会使实现这一目标变得更加困难。

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

于 2013-05-06T22:20:13.973 回答