Mathias Brandewinder on .NET, F#, VSTO and Excel development, and quantitative analysis / machine learning.
by Mathias 6. November 2009 15:48

When I decided to have a 2-level horizontal menu for my professional webpage in ASP.NET, it came as a surprise to me that this wasn’t completely straightforward. I expected the standard  ASP menu control to support this, but found out that this wasn’t the case.

Fortunately, I came across a post by Peter Kellner, describing how he implemented that for the Silicon Valley Code Camp website, which was pretty much what I envisioned.

The one issue I had with his implementation, however, was that the second level menu uses multiple data sources. The Master Page handles the top-level menu, but each page contains a reference to the specific datasource used to populate the sub-menu. As a result, if you decide to add a page, you need to manually add to that page some code to define what sub-menu should show up, which is cumbersome.

The ideal solution for a lazy developer like me would be to have all the menus handled in the Master Page, so that when you add a new page to your website, you just need to add it to the Sitemap, and the right menu and sub-menu shows up.


by Mathias 30. April 2009 17:35

After much postponing, I finally cleaned up the layout of Clear Lines. I had cobbled together the previous design over a few days when I started, and, because it's not a crucial aspect of my activities, I left it at that until now. I like my new design better (I hope you do, too!), it feels much cleaner than the previous one. The main motivation was not the looks, though, but rather flexibility. I will add a few pages soon, and need to easily integrate them into the site navigation, so I finally replaced my hard-coded links by an ASP.NET menu. And while I was at it, I got inspired by Peter Kellner's beautiful menu for the Silicon Valley Code Camp site, and started looking into Css Friendly Control Adapters.

I like the fact that the whole menu layout is pure css, instead of tables, but I struggled quite a bit with getting css to play nice. Not the adapter's fault, rather my own limitations with css... In the end, I managed to get roughly the look I was after. That being said, if you open the page in IE7, it will render differently than in any other browser I tried: for some reason, I couldn't get IE to change the background color of the menu links on hover, or to render properly a border-bottom. If anyone has an idea what's wrong with my css, I would love to hear it!

Next step: upgrade the blog to BlogEngine 1.5, and probably add a sub-menu to the pages, similar to the Code Camp site.

by Mathias 16. November 2008 12:26

Someone commented to my post on add-in menus asking if it was possible to add sub-menus to menus - the answer is yes. The code is essentially the same, with one small difference. When you add a menu item to a menu, you will add a CommandBarControl (the menu item) to the controls of a CommandBarPopup, the menu container. If you want to add a "nested" menu to the menu, instead of adding a CommandBarControl, you will add a CommandBarPopup, which can then receive menu items (or more nested menus!).

In code, it would look something like this:

// Add the sub-menu to parentMenu, which is a CommandBarPopup

CommandBarPopup parentCommandBarControl = (CommandBarPopup)parentMenu.Controls.Add(
MsoControlType.msoControlPopup, Type.Missing,
Type.Missing, Type.Missing, true);

parentCommandBarControl.Caption = "Sub-Menu";
parentCommandBarControl.Visible = true;

// Add the menu item to the sub-menu

CommandBarControl commandBarControl = parentCommandBarControl.Controls.Add(
MsoControlType.msoControlButton, Type.Missing,
Type.Missing, Type.Missing, true);

commandBarControl.Caption = menuItemCaption;
commandBarControl.Visible = true;


Comment RSS