<div>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:</div> <div> </div> <div>SubMenu</div> <div>MenuItem 1</div> <div>MenuItem 2</div> <div>----------------- < Preferably
a style/css, not an image
MenuItem 3</div> <div>MenuItem 4</div> <div> </div> <div> </div> <div> </div>
<div>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. </div>
<div> </div>
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.
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 <hr /> 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="<span class='Specific_Class_Name'>|</span>"/>
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.
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:
Member
18 Points
39 Posts
Menu Divider or Seperator using CSS and or CSS adapters.
Nov 04, 2006 01:51 PM|dwilliams459|LINK
MenuItem 3</div> <div>MenuItem 4</div> <div> </div> <div> </div> <div> </div>
css Control Adapters Menu Menu
.Net Senior Developer
Member
18 Points
39 Posts
Re: Menu Divider or Seperator using CSS and or CSS adapters.
Nov 05, 2006 09:22 PM|dwilliams459|LINK
.Net Senior Developer
Member
11 Points
19 Posts
Re: Menu Divider or Seperator using CSS and or CSS adapters.
Nov 29, 2006 12:24 PM|sstewart|LINK
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="<hr />" />
<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" />
</siteMapNode>
</siteMap>
None
0 Points
10 Posts
Re: Menu Divider or Seperator using CSS and or CSS adapters.
Nov 29, 2006 03:42 PM|Thacker|LINK
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.
None
0 Points
10 Posts
Re: Menu Divider or Seperator using CSS and or CSS adapters.
Nov 29, 2006 05:08 PM|Thacker|LINK
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 <hr /> 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="<span class='Specific_Class_Name'>|</span>"/> 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.
Member
1 Points
21 Posts
Re: Menu Divider or Seperator using CSS and or CSS adapters.
May 29, 2009 10:25 AM|tmargot|LINK
<
siteMapNode title="" />and then styled the .AspNet-Menu-NonLink css class like so:
ul.AspNet-Menu
li.AspNet-Menu-Leaf span.AspNet-Menu-NonLink{width
:2px;height
: 39px;background
:url(/Images/menu_bg_devider.png) no-repeat top;}
Hope this helps someone.
None
0 Points
1 Post
Re: Menu Divider or Seperator using CSS and or CSS adapters.
Mar 12, 2010 12:30 AM|jeff_kissinger|LINK
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:
.navmenu .navigationmenu-separator { width: 2px; height: 30px; background: Black; }