Hi -

In DNN after looking at the menu nodes javascript and reviewing how the main menu in the portal gets built - I see most DNN sites just use CSS background colors instead of making each menu item more like a button as part of a button row. Where the text of the menu item would determine the overall size of the button as part of the menu button bar.

So with this - which keeps localization possibilities instead of the menu text embedded in each button image, I would like to have the buttons adjust in size depending on the menu item text. This is just for the primary top level menu items. Sub menus would be in a normal submenu dropdown.

To accomplish the menu buttons I split the images into a LEFT,  MIDDLE (repeating)  and RIGHT image pieces. So, the text in the middle node would have the MIDDLE repeating graphic image as defined in a css style class. The left and rights ends would be part of the same node with separate css styles applied - so you basically have 3 span tags next to each other:

<span class="left_end_of_menu_button"/>  
<span class="center_repeating_area_of_menu_button">Menu Item Text</span>
<span class="right_end_of_menu_button"/>

So, each top level menu item is built with this span combination, when pieced together it looks like 1 solid button element. Size of the button grows to fit the Menu Item Text.

I have made this work 50%. But, because I dont totally understand the node structure, the work required to figure the best way to modify the code is difficult... and the layout gets all funky...

I am surprised that the DNN menuing doesnt allow to set image properties like I have done to make chasing and hunting through the code and making adjustments to the nodebuilder.

Is there an easier way to do this? or are there any examples of anyone doing this?

thanks,

David