Any developer who is creating a web browser based application always has a fundamental problem. How can they allow their users to quickly access information whilst keeping the application simple to use? The answer for an ASP programmer is simple. They just use an ASP menu. With some simple code the programmer can:
- Add a vertical or horizontal menu
- Create sub menus
- Customize the look and feel of the menu itself
And, most importantly, they can so this with the minimum of coding and without having to develop or add any third-party libraries.
Adding a Simple Menu to an ASP Web Page
Like all ASP functionality an ASP menu runs is generated on the server and not on the client. The first step, therefore, is to specifically tell the browser that this is to happen:
And the menu itself is actually part of an ASP form:
The web site developer then defines the menu within this form:
This menu consists of an “item” tag, and the item tag contains the components of a menu – the asp menu items:
Once all of the menu items have been added the tags need to be closed:
If this HTML code is saved to a file (for example menu.aspx), and the file is saved to a Microsoft IIS web server then the menu can be viewed by using a web browser. Anyone who looks at the web page will see a very simple vertical menu (i.e. with the components lying one above another), and the menu will just contain two components (”Home” and “Customers”). The result can be seen in figure 1 at the bottom of this page.
A Horizontal Menu
By default the ASP menu will display it’s components vertically (i.e. from top to bottom). However, more traditional menus display their components horizontally (from left to right). This behavior is achieved by setting the “orientation” property in the ASP menu tag:
Now the menu’s components will be laid out across the screen rather than down the web page (as shown in figure 2).
Adding a Sub Menu to an ASP Menu
There is nothing seen so far that cannot be achieved by using a few HTML links (or anchors) and a table. This thing that sets the menu aside is the user’s ability to place their mouse over a menu item to reveal another set of menu items – a sub menu. The developer achieves this in an ASP menu by enclosing child menu items within a parent menu item, for example:
If this is viewed in a web browser then the user will see a menu item (“Customers”). This menu item consists of two more menu items (“View all Customers” and “Customer Details”), one of which will actually be another sub menu (and this can be seen in figure 3).
Changing the Menu Delay Speed
Users of the menu will notice that there is a slight delay between them moving the mouse pointer from the menu to the menu disappearing. Updating the menu’s “disappearafter” property will alter this delay. This is measured in milliseconds, for example:
Will set the delay to half a second, while:
Will turn the delay off altogether (so that the menu will disappear immediately).
Making the Menu Look Like a Menu
Of course, at the moment the menu doesn’t look like a menu, and that’s because it currently uses the default colors of the web page. The menu bar and text colors can be changed as well as the sub menu bars and text colors. The web page developer formats the main menu by adding static style menu tags to the menu tags:
Whereas the programmer formats the sub menus by adding dynamic menu style tags
It this case the menu items will have black text and a silver background which will change to white text on a blue background when the user places the mouse pointer over the item (the completed menu can be seen in figure 5). In this way the web page developer can simulate the menu seen on any typical desktop application.
Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...
