Dynamic Mouse Over Dual Tab Menu

Purpose: 

This article is designed to give you quick information to create dynamic mouse over dual tab menu.

Intended Audience:

This guidance is intended for ASP.Net web developers. 

Technology: 

ASP.Net

Reference Name: 

http://www.dynamicdrive.com

Requirement Scenario: 

To create a consistent, easily managed navigation solution for site, you can use tab menu navigation. Tab menu navigation offers the following features:

It provides a consistent way for users to navigate site. As your site grows, and as you move pages around in the site, it can become difficult to manage all of the links. Tab menu navigation enables you to store URL to all of your pages in a central location called sitemap. 

You can use a site map to describe the logical structure of your site. You can then manage page navigation by modifying the site map as pages are added or removed, instead of modifying hyperlinks in all of your Web pages.

This control displays an expandable menu that users can traverse to get to different pages in your site. A node that contains child nodes is expanded when the cursor hovers over the menu.

Work Scope in the Project 

You can modify design of this control by changing CSS files and also can add n number of tabs and its sub menu by doing entry of tags in XML file.

Solution Identified and Provided: 

This is a mouse over tabs menu. Move the mouse over designated links, and additional sub menu contents appear in a separate block. It as an inline two level menu. You can specify name of main tab and sum menu with respective link in XML file, plus whether the sub menu contents should disappear when the mouse rolls out of that area.

You can easily toggle between a two level tabs menu. For the later, the entire a second level is hidden, allowing you to use script simply as tab links.

For this tab controls you need to create user controls because it's a reusable controls. A user control follows the same structure as a Web form, except that such controls are derived from the System.Web.UI.UserControl class, and are stored in ASCX files. Like ASPX files, an ASCX file contains static HTML or XHTML markup, as well as markup defining web control and other user controls. 

Steps for Implementation: 

Step 1: Create home.aspx page and register tab control on page.

<%@ Register TagPrefix="uc1" TagName="ucTabStrip" Src="myTab.ascx" %>

Step 2: Add tag in home.aspx page.

<uc1:ucTabStrip id="tab1" runat="server" ></uc1:ucTabStrip>

Step 3: Add user control in solution and rename it to "myTab.ascx"

Step 4: Write below code in source part of myTab.ascx

<script type="text/javascript" language="javascript" src="myFunctions.js"></script>
<link href="tabStyle.css" rel="stylesheet" type="text/css" />
<table runat="server" id="table1" ></table>

Step 5: Add following files in solution.

1.myFunction.js

2.tabStyle.css 

3.myXML.xml

Step 6: Write below function  in myTab.ascx.cs and call it in page load.

/// <summary>

function will fetch elements of main tabs and sub tabs from xml and create the controls dynamically

/// </summary>

        public void createTabControl()

        {

            //variable declaration

            int i = 0;

            string id, pnId, value;

            //datset object for retriving data in table from XML

            ds = new DataSet();

            //reading of xml file and converted it into dataset

            ds.ReadXml(Server.MapPath("myXML.xml"));

            //getting count of maintabs

            n = ds.Tables[1].Rows.Count;

            //creating reference of n panel and cells for tabs

            pn = new Panel[n];

            tc = new HtmlTableCell[n];

            tr = new HtmlTableRow();

            //creating array for Panel ID

            arrId = new String[n];

            //creating n panels

            for (int cc = 0; cc < n; cc++)

                pn[cc] = new Panel();

            //iterate rows for creating tabs and sub tabs

            foreach (DataRow r in ds.Tables[1].Rows) 

            {

                arrId[i] = r[1].ToString();

                tc[i] = new HtmlTableCell();

                id = r[0].ToString();

                value = r[1].ToString();

                pnId = r[1].ToString();

                pn[i].Attributes.Add("class", "Panelstyle");

                pn[i].Attributes.Add("id", pnId);

                pn[i].Attributes.Add("onmouseout", "panelonMouseOut('" + id + "','" + pnId + "'," + n + ")");

                pn[i].Attributes.Add("onmouseover", "panelonMouseOver('" + id+ "','" + pnId + "'," + n + ")");

                a = new HtmlAnchor();

                a.Attributes.Add("id", id);

                a.Attributes.Add("onmouseout", "btnMouseOut('" + id + "','" + pnId + "'," + n + ")");

                a.Attributes.Add("onmouseover", "btnOnclick('" + id + "','" +pnId + "'," + n + ")");

                a.Attributes.Add("class","mainmenu");

                a.InnerText = r[1].ToString();

                a.HRef = r[2].ToString();

                tc[i].Controls.Add(a);

                this.Controls.Add(pn[i]);

                tr.Controls.Add(tc[i]);

                //creating for subtabs

                foreach (DataRow rr in ds.Tables[3].Rows)

                {

                    if(rr[1].ToString()==r[0].ToString())

                    {

                        a = new HtmlAnchor();

                        a.InnerText = rr[2].ToString();

                        a.Attributes.Add("class", "submenu");

                        a.HRef = rr[3].ToString();

                        pn[i].Controls.Add(a);

                    }

                }

                i = i + 1;

            }

            //declaring global array of panel id to refer in javascript

            for (int m = 0; m < arrId.Length; m++)

                this.Page.ClientScript.RegisterArrayDeclaration("arrId", arrId[m]);

            //add block of tabs in table

            table1.Controls.Add(tr);

        }

Is this the Work Around or Best Solution?

Can this solution be improved: Yes the code and be improved or instead of running the batch file we can execute all the processes using DOT NET coding.