Superfish .Net Navigation Control

One of the most common CSS menus was the Suckerfish navigation menu. It was and still is great. Over time, it evolved to become the Superfish menu. The superfish menu is used across the top of this site to handle the navigation. The issue with navigation is always maintenance. As the site grows and changes, managing the navigation can be a lot of work. What I attempted to do is rig up a .Net server side control to help out with this.

The goal of this site was to use as little of the SQL Database as possible. So I chose to use XML to hold the navigation contents. I'll pretty much use XML for everything. However, ASP.net has a control that integrates well into their site. The Sitemap control is nothing more than an XML file set up for .Net to read using it's server side controls. I figured I'd use this instead of creating my own XML because it's already set up and I can later leverage some of ASP.net's code to help me work with the sitemap. I would create a control that uses Linq to read the sitemap file and then turn it into HTML. The CSS and Javascript (JQuery) will make the navigation pretty and functional.

1. Create a Sitemap

   Right click on your solution and add a new item. One of the options available will be Sitemap. Select it and leave the default name web.sitemap. ASP.net looks for this file first by default. So it will be one less thing to worry about changing later.

   

   Once the site map is added to the solution, it's time to fill it in. Below is an example from this site on how I setup my sitemap

   There are three layers of nodes. The top one titled "SiteSprout" wraps them all. So really, there are only two layers for this site. The next layer titled ".Net Controls" is the first link in the horizontal navigation across the top of this site. Everything that falls in this XML node will show up under link. The title becomes the link and there is no need to set a url since this is really just used as a rollover.

   The three nodes inside the ".Net Controls" node will become our actual links. The title is used to display the text, the url is used to create the link to the file on our site. For the sake of simplicity is used the ~/ to create a relative path. The ~ is the root directory in our site.

   DO NOT PUT HTTP ON LINKS TO YOUR OWN SITE. The reason is that I coded the control to open up links containing "http" in a new window. I figured these would be links to other sites and it would be best to open them up in a new window rather than taking the user away from the site. If you look under the node titled "Resources" you will see that the URL's there have the "HTTP:". These are all opened up in new windows.

2. How the Suckerfish/Superfish Menu works

   I'm not going into exactly how the menu works with CSS and Javascript. I'd recommend going to the autority of the system. Information on that can be found at the Superfish page. The control here simply reads the Sitemap file and creates the HTML so that the Suckerfish Javascript and CSS can take over.

3. Using the control

   The first thing you'll notice when you open the control is that there really isn't anything there in the design view.

   The control works by building a string of HTML and then feeds it to the the literal on the page. This makes it extremely flexible. To make changes, just program it so that the string is what you want your html to be. This way you don't have to waste time by messing around with your CSS or changing my code to try to get your CSS to work.

4. The control's code

   The first thing I did is use Linq to query the sitemap and give me back a list of generic variables. I chose to use Linq because it could give me flexibility later and the ease of creating a generic object.

   Now that you have your list of variables that have title, url and category properties, it's time to build the HTML.

   Now you have your html in the page waiting for the Javascript and CSS to go to work.

5. Improve performance using Cache

   Finally, to improve performance, I setup some caching so that it doesn't need to reed the XML everytime a page is loaded. This works well if you put your superfish control in a master page.

6. Entire CS file without any comments

7. Room for improvement

   I'm sure theres room for improvement. Any comments or questions email me. I'm working on developing a comment system.