Using CSS for menus

Poster: damurphy
Dated: Thursday April 4 2002 - 14:38:51 BST

Please consider using CSS attributes to set menu properties. This would allow users to set these attributes in a .css file and change the files without having to recode menus. An example function below creates a style based upon css:

function getStyleBySelector(selector)
{
var sheetList = document.styleSheets;
var ruleList;
var i, j;

/* look through stylesheets in reverse order that
they appear in the document */

for (i=sheetList.length-1; i >= 0; i--)
{
if (sheetList[i].cssRules)
ruleList = sheetList[i].cssRules;
else
ruleList = sheetList[i].rules;

if (!ruleList)
return;

for (j=0; j< ruleList.length; j )
{
if (ruleList[j].selectorText.toLowerCase() == selector)
return ruleList[j].style;
}
}
return null;
}

function CreateArrayFromStyleSheet(normalClass, hoverClass, visitedClass, headerClass, borderClass, submenuImage, topbarImage)
{
style = new Array(19);

normalStyle = getStyleBySelector(normalClass);
hoverStyle = getStyleBySelector(hoverClass);
visitedStyle = getStyleBySelector(visitedClass);
headerStyle = getStyleBySelector(headerClass);
borderStyle = getStyleBySelector(borderClass);

if (!normalStyle) // normal style must be defined
return style;

if (!hoverStyle)
hoverStyle = normalStyle;

if (!visitedStyle)
visitedStyle = normalStyle;

if (!headerStyle)
headerStyle = normalStyle;

if (!borderStyle)
borderStyle = normalStyle;

if (normalStyle.getPropertyValue) // netscape 6.0
{
style[0] = normalStyle.getPropertyValue('color'); // Mouse Off Font Color
style[1] = normalStyle.getPropertyValue('background-color'); // Mouse Off Background Color
style[2] = hoverStyle.getPropertyValue('color'); // Mouse On Font Color
style[3] = hoverStyle.getPropertyValue('background-color'); // Mouse On Background Color
style[4] = borderStyle.getPropertyValue('color'); // Menu Border Color
style[5] = normalStyle.getPropertyValue('font-size'); // Font Size
style[6] = normalStyle.getPropertyValue('font-style'); // Font Style
style[7] = normalStyle.getPropertyValue('font-weight'); // Font Weight
style[8] = normalStyle.getPropertyValue('font-family'); // Font Name
style[9] = borderStyle.getPropertyValue('padding'); // Menu Item Padding
style[10] = submenuImage; // Sub Menu Image (Leave this blank if not needed)
style[11] = borderStyle.getPropertyValue('border-width'); // 3D Border

Re: Using CSS for menus

Poster: zylfrax __at__ excite.com
Dated: Tuesday April 9 2002 - 19:27:19 BST

I think the menu systems great apart from a few things.

The Search Engines can't see the menus and therefore can't follow the links to other pages in the site also effecting my SE status.

Text readers also cannot see the menus, the blind etc

What I would like to see is a menu system (with wysiwyg editor) that uses Server Side Includes and css for menu names and links therefore erasing the problems mentioned above.

I am unsure whether this is possible but I am sure a lot of other designers out there would like something like this.
Can anyone help?

Re: Using CSS for menus

Poster: corywagner __at__ directvinterne
Dated: Tuesday April 9 2002 - 22:04:25 BST

Paul -

I can help with the first item (search engines). Takes a little work to set up initially, but after that it's easy.

Basically, use this code _in place of_ a period at the end of any sentence on your pages, using any links you need to be indexed, of course...

text text text<a href="http://anylink.html"><img src="images/image3.gif" border="0" width="1" height="1"></a><a href="http://anotherlink.html"><img src="images/image3.gif" border="0" width="1" height="1"></a>

image3.gif is just a 1x1 of any color you need. I've used 2 together here to make it fit the size of the period on this page a bit better. See http://www.tiggrsuccess.com/sdt.html, the period at the end of the last line, first paragraph (...submit your ad.). Somebody reading the page wouldn't even notice it's a link (especially if I get off my duff and correct the color to match the grey!), but if you carefully run your cursor over that period you'll see the link, and so will the search engines.

As for the text readers not reading the menus, I have an issue with that as well. Here at the university it is critical that our pages be completely accessible, so this is something I'd really like to see Andy add.


John