Horizontal Menu With CSS Adapter

Question

User-895779150 posted

Hey everyone I'm trying to create a menu that looks like this

Home | Products | Contact Us

A dodge approach saw me appending | at the end of each item except the last.. However having issues with firefox not liking the IE7 css stuff and i can't find a way to get both to work.

So i've been left here with creating the | as a separating image.. I've seen some code that works when CSS adapters is disabled using the OnMenuItemDataBound event..

can i use css adapters to do this?

or is there a way i could use a back ground image in my css style sheet i have no idea what to do

thank you

Chris

Answer 1

User-895779150 posted

I've modified the CSS Adapter to include separating text

 if anyone would like to see this code please let me know

Answer 2

User2136232640 posted

HI AusClan,

    Would you please share your modification?

Thanks

Answer 3

User-895779150 posted

Damn it.. lol was hoping no one would ask lol.. but I'll still show hehe

Replace the existing function in the MenuAdapter.cs file found in the App_Code/Adapters folder

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++;

for (int i = 0; i < items.Count; i++)

{

MenuItem item = items[i];

BuildItem(item, writer);

// This is where i've modified...

if (i != items.Count - 1 && isRoot)

{

writer.WriteLine();

writer.WriteBeginTag("li");

writer.WriteAttribute("class", "AspNet-Menu-Separator");

writer.Write(HtmlTextWriter.TagRightChar);

writer.Indent++;

writer.WriteLine();

writer.Write(" | ");

writer.Indent--;

writer.WriteLine();

writer.WriteEndTag("li");

}

}

writer.Indent--;

writer.WriteLine();

writer.WriteEndTag("ul");

}

}

 

sorry about the indentation i've had a couple of drinks tonight gettting harder to see lol.. but it's alright i'm an Aussie :D

Answer 4

User1259721702 posted

It is just a matter of applying a right border to the "li" (list) element.

Answer 5

User1377108450 posted

But then it'll be something like

Home | Products | Contact Us |

with an unneeded "seperator" at the end

Answer 6

User-1548791341 posted

 Are you able to add an IE7 specific stylesheet?

 For example:
 

 <!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->