Menu Divider or Seperator using CSS and or CSS adapters. RRS feed

  • Question

  • User1827036602 posted
    Great work on the Adapters.  I am attempting to create a menu with separator via CSS between specific items.  Please refer to http://forums.asp.net/thread/1449615.aspx for more detail with regards to plain (non css adapted) menus.  Is it possible using CSS adapters to specify a divider or separator between specific menu items, preferably using styles/css such as a border-bottom: 1px or even a 1 px high span/div tag with a background color?  Please note I don't want to apply this to all items in the menu, just specific ones.  Can this be done through modifying css classes, or would the adapter code need to be modified.  I am new to CSS adapters, perhaps someone can please point me in the right direction?  Thanks!  Example:
    MenuItem 1
    MenuItem 2
    -----------------  < Preferably a style/css, not an image
    MenuItem 3
    MenuItem 4
    Saturday, November 4, 2006 1:51 PM

All replies

  • User1827036602 posted
    Scott Guthrie's Blog entry at http://weblogs.asp.net/scottgu/archive/2006/05/02/CSS-Control-Adapter-Toolkit-for-ASP.NET-2.0-.aspx was very helpful in helping me navigate through the menu adapters code.  In looking at the CSS Adpaters Tutorial, I see I can modify the App_Code/Adapters/MenuAdapters.vb - BuildItem method.  I can append another css class to those already applied such as " ASP-Net-Divider", and specify the styles for this divider class in the CSS/Menu.css or the file. 
    Sunday, November 5, 2006 9:22 PM
  • User1111022833 posted

    I don't know if this will help you but I got seperators to work with a sitemap.  You can still customize the <hr /> tag with css if needed.

    <?xml version="1.0" encoding="utf-8" ?>

    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

        <siteMapNode url="" title="" description="">

            <siteMapNode url="MenuItem1.aspx" title="Menu Item 1" description="Menu Item 1 description" />

            <siteMapNode url="MenuItem2.aspx" title="Menu Item 2" description="Menu Item 2 description" />

            <siteMapNode title="&lt;hr /&gt;" />

            <siteMapNode url="MenuItem3.aspx" title="Menu Item 3" description="Menu Item 3 description" />

            <siteMapNode url="MenuItem4.aspx" title="Menu Item 4" description="Menu Item 4 description" />



    Wednesday, November 29, 2006 12:24 PM
  • User891608465 posted

    If this is something that is going to be considered, particularly for horizontal menus, possible consideration might be given to being able to use any ASCII character to separate the adjacent links.  The ability to apply a CSS style so that the characters could be hidden would also be advantageous.

    Such a thing would satisfy the W3C Accessibility Guideline 1.0, Priority 3, 9.5 -- "Separate adjacent links with more than white-space."  Border attribute via style sheet is not enough to satisfy this requirement. A few designers might appreciate the ability, for example, to add a horizontal bar between menu items.

    Wednesday, November 29, 2006 3:42 PM
  • User891608465 posted

    Disregard the above.  The Priority 3, Section 9.5 of the Guidelines are met and do not need an ASCII character between the links.  The horizontal menu is rendered inline by the style sheet.  Since a Braille reader doesn't interpret style sheets, the menu links are separated by a line return, bullet, whatnot, by virtue of the unordered list definition. Apologies for any confusion.

    Thanks for the sitemap node title suggestion of &lt;hr /&gt; for a horizontal rule separator.   An additional alternative for those who want to add a style to an ASCII character to the specific separator would be:   <siteMapNode title="&lt;span class='Specific_Class_Name'&gt;|&lt;/span&gt;"/>  You can define the class of the span to format the ASCII, in this case a vertical bar, character.  Sort of down and dirty but it works and validates.  Just keep in mind that when style sheets are disabled, the separator will render as a list item.

    Wednesday, November 29, 2006 5:08 PM
  • User1817485730 posted
    I simply did as sstweart mentioned and used the following:

    <siteMapNode title="" />

    and then styled the .AspNet-Menu-NonLink css class like so:

    ul.AspNet-Menu li.AspNet-Menu-Leaf span.AspNet-Menu-NonLink{


    height: 39px;

    background:url(/Images/menu_bg_devider.png) no-repeat top;



    Hope this helps someone.

    Friday, May 29, 2009 10:25 AM
  • User-1702215948 posted

    I added the following code to the MenuAdapter.cs file:

                    // This allows identification of a separator in the sitemap file by entering Separator in the description field
                    if (item.ToolTip == "Separator")
                        value = "navigationmenu-separator";

    directly after this code:

            private string GetItemClass(Menu menu, MenuItem item)
    			string value = "navigationmenu-nonlink";
    			if (item != null)
    				if (((item.Depth < menu.StaticDisplayLevels) && (menu.StaticItemTemplate != null)) ||
    						((item.Depth >= menu.StaticDisplayLevels) && (menu.DynamicItemTemplate != null)))
    					value = "navigationmenu-template";
    				else if (IsLink(item))
    					value = "navigationmenu-link";
    				string selectedStatusClass = GetSelectStatusClass(item);
    				if (!String.IsNullOrEmpty(selectedStatusClass))
    					value += " " + selectedStatusClass;

    Then... add this line in your sitemap file whenever you want a separator:

            <siteMapNode url="" title=""  description="Separator" />

    And finally add code to your css file such as the following:

    .navmenu .navigationmenu-separator
        width: 2px;
        height: 30px;
        background: Black;

    Friday, March 12, 2010 12:30 AM