Menu Divider or Seperator using CSS and or CSS adapters.

Great work on the Adapters.  I am attempting to create a menu with separator via CSS between specific items.  Please refer to 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

David Williams MCP
.Net Senior Developer
11/4/2006 5:51:43 PM 905 articles. 0 followers. Follow

4 Replies

Similar Articles

[PageSpeed] 46

Scott Guthrie's Blog entry at 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. 

David Williams MCP
.Net Senior Developer
11/6/2006 2:22:45 AM

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="" >

    <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" />



11/29/2006 5:24:09 PM

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.

11/29/2006 8:42:53 PM

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.

11/29/2006 10:08:06 PM

Similar Artilces:

Reagrding using FILTER in (MenuExample.css) CSS adapter classes for Menu control
Hello everyone, Whenever I use filter: in any of the CSS calss for the MENU control using CSS adapters, it only renders the first level of the menu, all subsequent levels are not even displayed. I want to use filter for some transparency effect, but using it is not rendering any child menu's. Following is a example - .PrettyMenu .AspNet-Menu-Vertical { position:absolute; top: 87px; left: 0px; width:200px; z-index: 300; filter:alpha(Opacity=50); } Now it only shows first level and rest of the menus are not displayed, if I remove filter, it works fine but without transparency. Rep...

Another menu is not displaying in IE6 using css control adapters
Hi: What am I doing wrong?I've copied the CSS, JavaScript, App_Code/Adapter folders to the Web Site project.I've copied the App_browsers/CSSFirendlyAdapters.browser and commented out all other controlAdapters but      <adapter controlType="System.Web.UI.WebControls.Menu"               adapterType="CSSFriendly.MenuAdapter" />The page source looks right but the menu displays on IE7, FF2 but not IE6  <div class="AspNet-Menu-Horizontal"&g...

has anyone able to use the Friendly css menu control/adapter.kit
I recently download this kit but 'm bit loss on how to get it to setup  a menu control/ navcontrl .Is there anyone  could point me in the right direction  on this kit. I was thinking of just going out and purchase a menu/nav control software but i was told i can do alot with this and best of all it's free Did you read the walkthrough? It needs some steps to get it to work (copying script and css files etc.) so the project was taken over and is now hosted on codeplex. The main difference right now is that the download from codeplex is easier to install becau...

Menu Css Control Adapter
  Hi everybody, i have been working with menu css control adapter of .net 2.0, but i'm having some troubles to use it. I have a vertical menu and in forward of the menu i have a swf file (Flash). what happens is that the menu it appears in the back of the swf file and it's menu subitems is  unreachable.   How can i fix it???? Please Someone ...... Thanks in advanced... I had the same problem with my menu not displaying from my master page over the top of image in the content place holder, i got around this by putting the menu and the content in DIV with the correct Z-...

How do I use CSS Friendly Control Adapters
I’ve been reading a lot on the CSS Friendly Control Adapters and I getting a lot of conflicting and confusing information.   There seems to be two approaches to the use of these which appears to derives from there being two implementations. An older version which involved running a vsi file which I can’t seem to find in the package. And a later method which seems to only involve adding a refrence to the dll file and adding a App_Browsers folder and placing the CSSFriendlyAdapters.browser file in the folder.  Here’s an example, I’m looking at a page from this site, “ASP.NET 2.0 ...

CSS Adapter Menu Control Problem
I am using the CSS Adapter Menu Control. I have a menu on the page and is styled by the following CSS file:  /* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */ /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */ /* So, effectively says: style all tiers in the menu this way... */ ..globalnav { font-family:Arial; font-size: 1em; z-index: 300; } /* The menu adapter generates a list item (li) in HTML for each menu item. */ /* Use this rule create the common appea...

Toggle Button, ToolKit CSS, CSS Adapters
First: There is no real point to this message, it's just me ranting about something that annoyed me in the samples online. All in all I think the teams working on and css are doing a splendid job, and Atlas works well in most cases, and for most needs. However, my rent is more about some whining about details.  Now, here is something that sort of just irked me. The same folks who do AJAX.NET are the same folks who are doing CSS adapters. (assuming I am not mistaken on that). In any case, the image flickering on a small demo such as the ToggleButton is simpl...

How do I make only one control to use CSS Adapters
I would like to have only meny control to use CSS Adapters, I guess part of the problem is that it is on the master page. I want other controls on the same page not to use CSS Adapters. Is it possible to acomplish?Rafal - Free Classifieds (Search Over 5 mln jobs on DNN Direct You can specify in a .browser file that a given control uses given adapter. For example: <controlAdapters markupTextWriterType="System.Web.UI.XhtmlTextWriter" >        <adapter          controlTy...

CSS Menu Adapter + Ajax Control Toolkit
Hi all, I am facing a problem while using CSS control adapters in my Ajax enabled website.Could anybody please suggest me how to move forward in this scenario.  Thanks Anuradha Well, first- what problems are you facing?"If you have knowledge, let others light their candles in it." — Margaret Fuller...

Using CSS Control Adapter on an existing site
I've downloaded the CSS control adapater that is on this site and I would like to be able to apply all of the features it has in the template for a new site to an existing site, how is this done? Hi,Copy  App_Browsers folder, App_Code/Adapters, javascript and styles. No web.config changes necessary.Regards,Viktar KarpachMCTS .NET 2.0 Web Application, MCPD Web DeveloperASP.NET C# Technical Blog...

Css Adapter Menu
hi this is one part of the style sheet . imagine i have 3 tier menu. when the mouse goes over the menu items i want to have background red and foreground yellow only for the hovered item. but the changes go on first tier and hovered tier. what should i change so that the changes just go on the hoverd tier?   .CssAdapterMenu li:hover a /* hovered text */ {background: Red; color: Yellow; } .CssAdapterMenu li:hover span, .CssAdapterMenu li.AspNet-Menu-Hover a, .CssAdapterMenu li.AspNet-Menu-Hover span, .CssAdapterMenu li:hover li:hover a, .CssAdapterMenu li:hover li:hover span, .C...

CSS control adapters
I've just seen another thread mentioning these which reminded me that I couldn't install the blighters. A couple of questions first tho.  The VSI file that I download won't load/install, it comes up with "string cannot have zero length".  ANybody any ideas on what may be going wrong? Second question is on how these get deployed on my remote server, will I be able to use them without access to the core asp library directories (if that makes sense). To fix the VSI installer problem, see this posting, To deploy the adapters you do not ...

CSS Control Adapters
I was thinking to implement menu like on using CSS Control Adapters. How would I do it?The enu would have two bars:1) Main bar - tabs 2 Second bar with submenu items, all links horizontallyRafal - Free Classifieds (Search Over 5 mln jobs on DNN Direct Anybody can help?Rafal - Free Classifieds (Search Over 5 mln jobs on DNN Direct ...

Unable to make menu horizontal using css adapters
Hello,  I'm trying to create a simple three tab horizontal menu using a sitemap and css adapters with no success. Each time I run the website the menu displays vertically. I can't figure this one out. Any help would be much appreciated. MasterPage<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="http://...

Web resources about - Menu Divider or Seperator using CSS and or CSS adapters. -

Seperator — Radiohead shared from exfm
Seperator — Radiohead shared from exfm

Sometimes a Word is Worth a Thousand Icons
Pop quiz, hotshot. What do these toolbar icons do and what application are they from? Okay, maybe that's a bit too monochrome. Does color help? ...

Behind the scenes of Primus Power’s battery lab
... tank, one flow loop, one pump, and no separator so the system is more efficient than current ones on the market that use two tanks and a seperator. ...

Radiohead Lyrics and Song Information — Green Plastic Radiohead
Radiohead Albums Pablo Honey (1993) The Bends (1995) OK Computer (1997) You Creep How Do You? Stop Whispering Thinking About You An

Stainless Steel Reloading Supplies - Tumblers, Seperators, Media & More!
Our reloading supplies are the quickest and easiest way to clean brass for reloading. Stainless steel media won't harm brass, cleans inside and ...

Juxtapoz Magazine - 3D Sketchbooks by Nagai Hideyuki - Current
Online version of the leading monthly contemporary and underground art bible, Juxtapoz Art and Culture Magazine, with featured articles, blogs, ...

Radiohead to release 'The King Of Limbs' follow-up soon? - News - NME.COM
Rumours suggest the band may have more surprises planned

St. Mary's Colgan Schools
St. Mary's Colgan Catholic Schools. Welcome to the Website of St. Mary's Colgan Catholic Schools, Our Lady of Lourdes Parish, Pittsburg Kansas. ...

Behind the scenes of Primus Power’s battery lab — Cleantech News and Analysis
Take a peek behind the scenes of Primus Power's battery lab in Hayward, Calif. The company makes a flow battery, which pumps a liquid electrolyte ...

Juxtapoz Magazine - Gallery - Category: Shawn Barber Preview NYC - Image: Barber NYC Preview_9
Home All Art News Features Back Talk Magazine Photography Film+Video Collectibles Community Forum Event Listing Gallery Guide Reader Art Videos ...

Resources last updated: 12/28/2015 3:04:39 PM