Easy way to create customized Menu Navigation using CSS and dot net

There are several ways to develop Tab Menu navigation in web applications. One of the easier ways is to use Telerik Menu control, customize it and incorporate it with DNN which can show highlighted on mouse over, show highlighted on selection etc. Obviously, Telerik is a leading vendor of User Interface (UI) components for Microsoft .NET technologies through which we can create customized menu panel to the web application. But, for those who cannot afford to purchase Telerik controls could create a simple CSS based menu navigation through which they can highlight the menu on mouse over, show the selected menu on click using some JavaScript coding or by passing query strings in the URL of the menu which is clicked. And on page load, read the query string value and show the menu as selected.

This procedure can be slightly fine tuned to use dot net to perform the job using CSS with very less coding.

STEP 1: Create a dot net user control and place the part of the css code which would display the menu navigation panel. See Fig: 1.1.

Fig: 1.1

In this sample, a div tag is used for the menu panel followed by UL and LI tags. Let’s discuss with the first line item in the example:
UniqueID=="ctl00$ContentPlaceHolder1$pri_home"?"tabCurrent":"tabnormal"
Id: which holds the id name and definition of the list item specified in the css class which would show highlighted or not.

UniqueID: As we all know that the UniqueID property is the page-wide unique identifier of an ASP.NET server control. Its uniqueness is guaranteed by prefixing the ID of a server control with the ID of its NamingContainer. If the NamingContainer is the Page the UniqueID will remain the same as the ID.

ctl00$ContentPlaceHolder1: the default label created to the user control when it is rendered.

pri_home: id given to the user control while registering in the web page which has the user control. We need to create different id as specified in the user control and the same needs to be updated while registering the usercontrol in each page. See fig: 1.2
This web page would be displayed if ‘Home’ link is clicked in the user control. In fig: 1.2, the user control is included in the home page and the ID of the user control is given ‘pri_home’. Once the home link is clicked, the home page would be called and the user control with ‘pri_home’ will be rendered as ctl00$ContentPlaceHolder1$pri_home and the UniqueID will have this value during page load.

Fig: 1.2

STEP 2:
We have already creating a condition to set “tabCurrent” as the defnition for LI if the UniqueID is ctl00$ContentPlaceHolder1$pri_home” and “tabnormal” for other menus. “tabCurent” and “tabnormal” are defined in the external css to show the selected menu hightlighted and normal respectivley. See fig: 1.3

STEP 3:
Fig: 1.3

This code would not only show the selected menu highlighted, but would show the very first menu in the menu to be shown highlighted by default. The same can be achieved for sub menus in the same page.