Possible slight problem in EllNav and also accessible skip link
Posted: Tue Jan 17, 2006 11:38 am
1. There is a possible slight problem with the EllNav menu in that it can introduce spaces between li's when using CSS for formatting.
For example:
Which can cause a vertical menu to have gaps in it in some versions of Internet Explorer - between the items.
You can fix this by going to the '// recursively generate the menu' (EllNav,modeul.php) section and ammending the code as follows:
Which gives no space,
As it says on the comments, if you need the gap use CSS 
2. I also needed an accessible skip-link for my top menu (horizontal) and having had a look at the code changed the following in the
'// figure out the details of the current page and where it fits in
// the content hierarchy:' section:
You may well need to alter the href (#content) if you do not have your main content div set to this name.
If you want to hide this link then you can use the 'hide' class in your CSS with something like:
You may ask why I don't put a skip link on the vertical menu? In most sites I work on, this menu (vertical or sub menu,) usually appears below the main content in my source code, so where to skip to would be a problem
My son's new web site is a good example, there are a few more things that maybe of interest but I'll post them seperately. Please make allowances, he's only just got to enter some data and is still learning - he's only 12!
http://www.owen.shoesforindustry.net
Hope this helps,
Russ
For example:
Code: Select all
<li>first</li> <li.>second</li>
You can fix this by going to the '// recursively generate the menu' (EllNav,modeul.php) section and ammending the code as follows:
Code: Select all
for ($j=0;$j<$depth;$j++)
{
#$dstr .= " ";
$dstr .= ""; #Mod RB 14/12/2005 stops IE putting gaps in menu by removing space between li's. If you need gaps use CSS.
}
}
Code: Select all
<li>first</li><li.>second</li>
2. I also needed an accessible skip-link for my top menu (horizontal) and having had a look at the code changed the following in the
'// figure out the details of the current page and where it fits in
// the content hierarchy:' section:
Code: Select all
if ($showTopOnly)
{
$menu .= "<li class=\"hide\"><a title=\"Skip menu jump to contents\" tabindex=\"1\" href=\"#content\">Skip navigation</a></li>"; #Mod RB 30/12/2005 Adds menu skip link for accessibility skip to contents and tab index.
// only showing the very top level of the content hierarchy
If you want to hide this link then you can use the 'hide' class in your CSS with something like:
Code: Select all
/* Hide Skip Menu on Top Menu */
.hide {
top: -3999px;
margin: 0;
padding: 0;
position: absolute;
}
You may ask why I don't put a skip link on the vertical menu? In most sites I work on, this menu (vertical or sub menu,) usually appears below the main content in my source code, so where to skip to would be a problem
My son's new web site is a good example, there are a few more things that maybe of interest but I'll post them seperately. Please make allowances, he's only just got to enter some data and is still learning - he's only 12!
http://www.owen.shoesforindustry.net
Hope this helps,
Russ