Transforming unsorted list into CSS horizontal menu
Lately I’ve been working on the new cool theme for BlogEngine that I’m going to share with community. One of the tasks is to let it be more content oriented, which is a bit different then other themes. Basically, it comes down to having good navigation menu that will allow you to utilize stand-alone pages in BlogEngine to its full potential. Currently, you have a choice to make page a “child” of the other page so that pages do have hierarchy and can be nested into the tree-like structure. It just not rendered by BlogEngine this way, at least not right now. To make it happen I used code published on the BlogEngine forum, just making a few changes to fit my needs. This is a simple control that looks inside core library and renders all BlogEngine pages into unsorted list. Then, you can just add it to your theme and here you have it:
In some cases, that’s enough. You just add style sheet to make list look pretty and you done. This approach has its own advantages; everything is just one click away. On the other hand, it takes lots of space and if you have large content hierarchy that is not an option. You probably need full blown horizontal menu with pull down submenus. Horizontal menus are slim, they do not take much space and users are used to this kind of navigation. So the task is to transform UL to the horizontal menu, as you can see on the left picture.
The entire code for this page is shown below. Not too exiting yet, but ones you get that far - it is all down the hill from here. Next time I’ll cover how to make it look good and run inside BlogEngine (or DotNetNuke – same rules applied).