I've been playing with the CSSAdapters recently and wanted to create a simpler version of the MenuAdapter. For a menu that has the following structure,

menu

the MenuAdapter renders HTML that looks something like,

menuadapter_html1

There are a few things I didn't like about this.

  • In general the class names were too verbose and unnecessarily prefixed with AspNet-Menu.
  • The out div wrapper seemed unnecessary since the root ul element can take care of everything at that level. It's also likely that I would be wrapping the menu in my own div with its own class name (where I work the left-nav section of a page is defined by a div with class name "menu").
  • The class name of the outer div was derived from the Orientation attribute of the Menu control. I wanted to control the way in which the control was rendered through my own choice of class name. I didn't want this controlled by the control itself.
  • Some of the classes were redundant. For example, the AspNet-Menu-Link class on the anchors didn't appear to be very useful. In CSS you could always select this by something like,
    • ul.ASPNet-Menu li a {}
  • Although not clear from the above example, I also wanted to remove any embedded CSS files or reliance on javascript files to use the menu adapter.

 

What I really wanted was something like,

menuadapter_html2

For my purposes this is way easier to control the rendering of with CSS.

Another important difference with my adapter is that I ignore pretty much all of the Menu control's attributes. For example, the Orientation attribute is ignored in favour of setting the cssClass attribute to something like "verticalMenu". This class name is then applied to the outer ul element and can be targeted in my css file. In this way we simply use the Menu control to control the content of the menu items and that's about it - good separation of concerns.

You can find the adapter here.