locked
Horizontal Menu With CSS Adapter RRS feed

  • 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

    Saturday, June 9, 2007 8:22 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 14, 2007 11:26 AM

All replies

  • 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

    Tuesday, June 12, 2007 12:44 AM
  • User2136232640 posted

    HI AusClan,

        Would you please share your modification?

    Thanks

    Tuesday, June 12, 2007 2:01 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 14, 2007 11:26 AM
  • User1259721702 posted

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

    Sunday, June 17, 2007 2:05 AM
  • User1377108450 posted

    But then it'll be something like

    Home | Products | Contact Us |

    with an unneeded "seperator" at the end

    Sunday, June 17, 2007 10:43 AM
  • 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]-->
     

    Thursday, June 21, 2007 12:27 PM