Rounded Menus

Mar 4, 2008 at 11:54 AM
Hi,

In the current project I am working we needed to have rounded corners on the horizontal dropdown menus. In a fruitless search on the Internet I have come up with the following solution using a sliding doors approach to the HTML/CSS.

Below is the modified BuildItems routine in the MenuAdapter.cs - Basically I have added some DIVS around the LI tags. If you add the DIVS around the UL tag they will display all the time and not when the menu link is hovered.

private void BuildItems(MenuItemCollection items, bool isRoot, HtmlTextWriter writer)
{
if (items.Count > 0)
{
writer.WriteLine();

writer.WriteBeginTag("ul");
if (isRoot) {
writer.WriteAttribute("class", "AspNet-Menu");
}
writer.Write(HtmlTextWriter.TagRightChar);
writer.Indent++;

//start building the rounded div container
writer.WriteBeginTag("div");
writer.WriteAttribute("class","rounded");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("div");
writer.WriteAttribute("class","top");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("div");
writer.WriteAttribute("class","right");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteEndTag("div");
writer.WriteEndTag("div");
writer.WriteBeginTag("div");
writer.WriteAttribute("class","middle");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("div");
writer.WriteAttribute("class","right");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("div");
writer.WriteAttribute("class","content");
writer.Write(HtmlTextWriter.TagRightChar);

foreach (MenuItem item in items) {
BuildItem(item, writer);
}

//end building rounded div container
writer.WriteEndTag("div");
writer.WriteEndTag("div");
writer.WriteEndTag("div");
writer.WriteBeginTag("div");
writer.WriteAttribute("class","bottom");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteBeginTag("div");
writer.WriteAttribute("class","right");
writer.Write(HtmlTextWriter.TagRightChar);
writer.WriteEndTag("div");
writer.WriteEndTag("div");
writer.WriteEndTag("div");

writer.Indent--;
writer.WriteLine();
writer.WriteEndTag("ul");


}
}

Then this is the modified CSS

.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded {
clear:both;
max-width:2400px;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.top {
background:url(../images/rounded/top-left.gif) no-repeat left bottom;
padding:0px;
width:100%;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.top div.right {
background:url(../images/rounded/top-right.gif) no-repeat right bottom;
height:13px;
margin-left:12px;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.middle {
background:url(../images/rounded/left.gif) repeat-y left;
clear:both;
width:100%;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.middle div.right {
background:url(../images/rounded/right.gif) repeat-y right;
margin-left:13px;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.middle div.right div.content {
/background:url(../images/bg.gif) repeat top left;/
background-color:#6c6a6b;
margin-right:13px;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.bottom {
background:url(../images/rounded/bottom-left.gif) no-repeat left top;
clear:both;
padding:0px;
width:100%;
}
.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul div.rounded div.bottom div.right {
background:url(../images/rounded/bottom-right.gif) no-repeat right top;
height:13px;
margin-left:12px;
}

Can anyone think of a more elegant solution?

Adrian