Database Driven HTML popup menu

Mugombi

3.35/5 (8 votes)

Oct 27, 2005

1 min read

99275

3209

An article on how to generate an HTML popup menu from a database.

Sample Image

Introduction

A while ago my boss approached me to do a content management system for a company that wanted to have drop down menus for sub-links on their websites. I went on the net to try and find a control that could make me easily achieve that but to my surprise I found nothing! This inspired me to write a Dreamweaver like popup menu control that gets parent and child nodes from the database and creates a JavaScript drop down menu just like the one you get in the Macromedia Dreamweaver.

Using the code

I created a class library (attached) that has two classes. The class dvstories returns a DataView of the main/sub pages listing. The second, buildmenu - returns a string with JavaScript for building the parent and child nodes of the menu.

In the header file for all my .aspx pages - top.ascx - I construct a string to raise the MouseOver event for the menus to popup. I also hard-coded (for this version) the menu dimensions which determine where the menu is displayed:

//mouseover event
//refer to mm_menu.js to understand the variables
string mnustr = "onMouseOver=\"MM_showMenu(window.mnmenu," + 
       "x,138,null,'image2')\" onMouseOut=\"MM_startTimeout();\"";
sect2 = "";
sect3 = "";
sect4 = "";
sect6 = "";
//location of menu - y axis
int x = 160;

try 
{
    DataView dvmainlist = new DataView();
    DataView subs = new DataView();

    dvmainlist = dp.dvstories(1);

    //start building menu children from parent nodes
    //also puts in dimensions of the menu dropdown....

    foreach (DataRow r in dvmainlist.Table.Rows)
    {
        string mainuid = r["main_pgID"].ToString();
        if (Convert.ToInt32(mainuid) != dp.sub_id)
        {
            subs = fillchild("2");

            if (subs.Table.Rows.Count >= 1 )
            {
                sect2 = mnustr.Replace("mnmenu", "mm_menu_2_0");
                sect2 = sect2.Replace("x", x.ToString());
            }

            subs = fillchild("3");

            if (subs.Table.Rows.Count >= 1 )
            {
                sect3 = mnustr.Replace("mnmenu", "mm_menu_3_0");
                //location of menu - y-axis
                sect3 = sect3.Replace("x", (x + 185).ToString());
            }

            subs = fillchild("4");

            if (subs.Table.Rows.Count >= 1 )
            {
                sect4 = mnustr.Replace("mnmenu", "mm_menu_4_0");
                sect4 = sect4.Replace("x", (x + 290).ToString());
            }

            subs = fillchild("6");

            if (subs.Table.Rows.Count >= 1 )
            {
                sect6 = mnustr.Replace("mnmenu", "mm_menu_6_0");
                sect6 = sect6.Replace("x",(x + 300).ToString());
            }
    
        }

    }
}
catch (Exception ex)
{
    Response.Write(ex.ToString());
}

Within the HTML section of the actual .aspx (default.aspx), for the example page, I had to put the following code:

<!--put this within the head tag -->
<script language="JavaScript">
<!--
function mmLoadMenus() {
    <%=menucontents%>
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
<!--put this after the <head> tag -->
<script language="JavaScript">mmLoadMenus();</script>

In the code-behind file, you have to call the buildmenu class from the component in order to retain the menu content string.

History

I am currently working on making this a control fully customizable - attributes like back ground color, x,y position etc. Any help is very much appreciated.