RTUR.NET

.NET and Open Source: better together

NAVIGATION - SEARCH

CSS Page Menu

How to add hierarchical CSS menu to BlogEngine

  1. Download PageMenu.zip (1.28 kb)
  2. Extract “PageMenu.cs” from downloaded .zip archive and copy it to ~/App_Code/Controls/
  3. Use this control anywhere in your theme like this:
<blog:PageMenu ID="PageMenu1" runat="Server" />

Now if you run BlogEngine and you have hierarchy of pages (some pages set as children of others through admin tool), this control will be rendered by BlogEngine as unsorted nested UL list. Picture on the right shows what it should look like in standard theme.

Notice the difference between standard PageList control (on top) and PageMenu control; first rendered as flat list and in the second “Examples” page has two children as a second-level UL list.

Some extra functionality this control provides

  1. adding “Home” and ”Archive” menu items to the top level menus in the beginning
  2. adding “Contact” item to the top level menus in the end
  3. marking menu item of current page with class=”current” attribute

You can comment out function call that adds optional menu item if it does not fit your scenario – or easily add another item to the menu if you wish so.

It is entirely up to you how you want to style it. There are many examples how to style nested UL as a vertical hierarchical menu (easy case) and few how to style it as horizontal menu. You can find example how you can style horizontal menu on this blog used by Boldy theme.

Here is a html output for the menu shown above:

<ul id="navmenu">
  <li><a href="default.aspx" title="Home" class="current"><span>Home</span></a></li>
  <li><a href="archive.aspx" title="Archive"><span>Archive</span></a></li>
  <li><a href="/darkblog/page/Downloads.aspx"><span>Downloads</span></a></li>
  <li><a href="/darkblog/page/Examples.aspx"><span>Examples</span></a>
    <ul>
      <li><a href="/darkblog/page/Code.aspx"><span>Code</span></a></li>
      <li><a href="/darkblog/page/Pictures.aspx"><span>Pictures</span></a></li>
    </ul>
  </li>
  <li><a href="contact.aspx" title="Contact"><span>Contact</span></a></li>
</ul>