|
| |
|
|
Nicole
Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
Accessible Suckerfish Drop-Down Menu Problems - 2/4/2007 6:15:34
I maintain a site for a Community Service Organisation, and also work on it from time to time when I have time or if I have a spare hour or so. It’s in my portfolio and I hate it because of the design and the fact that it uses tables for layout and so I’ve promised them a redesign both to make it more accessible, include the SEO techniques I now know how to perform, and to make it into more of a showpiece for my portfolio. I intend to use this site (with the client’s permission) to update it with new techniques as I learn them to keep the site most technically up to date as possible.
It’s a big site, 800+ pages and therefore requires a drop-down menu, and I’m attempting to use the Accessible Suckerfish drop-down that Tail posted in this thread a while back.
As mentioned I only work on this site when I have an hour or two to kill, which means that when I strike snags that may take more hours to solve, I often just put it aside until next time, and by that time of course I’ve forgotten what I’ve already tried to fix the problems I was having etc.
So is it okay if I start a thread here on the menu for this site so I can come back to it readily and also in case anyone has used this Accessible Suckerfish Drop-Down Menu and can see obvious solutions to the problems I’m having.
This is the link to my work in progress: Work in Progress
Unfortunately IE is giving me false hope as it’s showing it close to how I’d like it to appear, in Firefox and other compliant browsers it’s showing all sub menu items by default.
All menu items are there, preferably I’d like the menu to stretch the entire width of the page and be resizable to a resolution of 800 x 600, but with the actual menu titles a little closer together than they appear now, and at the moment it isn’t very resizable and changing the 10em width to 14.28% does weird things.
The rollover effect that I thought I had in place, from #789 to #666 just isn’t working.
They are the two main problems at the moment, any help would be greatly appreciated.
_____________________________
|
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: Accessible Suckerfish Drop-Down Menu Problems - 2/10/2007 16:45:21
Hi Nicole, without seeing the page, check that you have put the clear after the menu.
Also, if using includes, you may have to muck around with how you call the menu in. On some parts of a site I'm using the horizontal menu and call it in like:
div
INCLUDE full menu (clear on the include)
/div
I'm also using the vertical menu and had to do this:
div
ul
INCLUDE
/ul
/div
I started out with the Suckerfish, then went to Son of Suckerfish and am now using the Accessible Suckerfish. Love them all but they are fiddly - you just have to keep at it until you are happy.
_____________________________
Sally
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: Accessible Suckerfish Drop-Down Menu Problems - 2/10/2007 18:22:06
I used that as well when I had problems, worth reading.
Re the IE problem, your JS is in the include, it will need to be moved out to a js file or included on the main page (FP includes strip out everything above 'body' so that is why it's not working in IE).
_____________________________
Sally
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: Accessible Suckerfish Drop-Down Menu Problems - 2/10/2007 18:55:27
See above Nicole, try removing the overflow from .menu.
_____________________________
Sally
| |
|
|
|
rubyaim
Posts: 757
Joined: 6/22/2005
Status: offline
|
RE: Accessible Suckerfish Drop-Down Menu Problems - 2/11/2007 16:19:04
Looking good 
For the spacing / gaps, just keep mucking around with the css, I think that is what took me the longest to get sorted out.
I'm not sure about the arrow, I have similar and ended up using another div but I'm not convinced this is the best way to do it. Eg: I'm wrapping a link in a div like:
<div class="arrow">
<a href="../example/something.htm">Something</a>
</div>
And .arrow is styled like:
.arrow {
background:url('arrow.gif');
background-repeat:no-repeat;
background-position:right;
width:98%;
}
I keep meaning to go back and look at this, but have not got around to it.
For the tabbing, I think you will need more Javascript, try replacing your menu js with:
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
mcAccessible = function() {
var mcEls = document.getElementById("nav").getElementsByTagName("A");
for (var i=0; i<mcEls.length; i++) {
mcEls.onfocus=function() {
this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < ul < li < a:focus
}
}
}
mcEls.onblur=function() {
this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks http://www.brothercake.com/site/resources/scripts/onload/
if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
else if(window.attachEvent) { // win/ie
window.attachEvent('onload', sfHover);
window.attachEvent('onload', mcAccessible);
} else { // mac/ie5
if(typeof window.onload == 'function') {
var existing = onload;
window.onload = function() {
existing();
sfHover();
mcAccessible();
}
} else {
window.onload = function() {
sfHover();
mcAccessible();
}
}
}
//--><!]]>
Edit: The js didn't paste, but try copying it from the original page for this menu at:
http://carroll.org.uk/sandbox/suckerfish/bones2.html
< Message edited by rubyaim -- 2/11/2007 16:30:59 >
_____________________________
Sally
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I have the memory of a goldfish and always have to look at the code to see what it was that made it work.
Will take a look now.
