Accessible Suckerfish Drop-Down Menu Problems (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> 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.



jaybee -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 7:09:02)

On a quick look it seems like you're closing off list items before the sub list

<li><a href="#">Residential</a></li>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Eligibility Criteria</a></li>
<li><a href="#">Case Management</a></li>
</ul>



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 7:50:17)

Uh Ha!

Jaybee, thanks, you have solved issue number one!

Now for the rollover effect and the issue of the width of menu items so they're resizable down to 800 x 600 resolution.

Thanks

Nicole



jaybee -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 8:14:28)

In your styles it's all specified as 10em width. Try changing the top level to 14%. You'll need to play around with %ages for the other levels.

#nav li { /* all list items */
float: left;
color: #fff;
background-color: #789;
width: 14%; /* width needed or else Opera goes nuts */
}



jaybee -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 8:22:13)

Put your colours on the link not the list

#nav a {
display: block;
background-color: #789;
color: #fff;
text-decoration: none;
padding: 3px;
font-weight: bold;
font-size: 0.75em;
font-family: arial, verdana, helvetica, sans-serif;
background-color: #789;
}
#nav a:hover {background:#666;}



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 8:22:43)

Thanks Jaybee,

That helped a bit, but as you say I'll have to play around with sub menu %'s. It's getting quite late here though so I should be elsewhere.



jaybee -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/4/2007 8:24:09)

See hover fix above as well.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 4:30:51)

I have it working pretty much as I like it now, thanks for your help Jaybee!

Menu-Test

This menu will span the width of the new page, and with that in mind I've taken the "Home" link off it because when text size was increased, the menu items were starting to appear underneath each other. I'm confident that the way I have it now, it fits at 800 x 600 with no text size increase, at 1024 x 768 with one text size increase and higher resolutions shouldn't be a problem.

This is probably an accessibility question, but can anybody see any other issues with this drop-down menu?



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 5:25:19)

Transferred what I'd done on the test page to the menu include of the real page and it's not working in any browers at all, Firefox goes closest but extends the entire menu area to the height of the longest drop-down.

Sorry can't post an example at the moment, back to the drawing board I guess.



rubyaim -> 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.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 16:47:29)

Thanks Sally,

I'll have a look at what you've said and report back today.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 17:22:23)

Sally I'm not sure what you're talking about "putting a clear on the include"? The "inner-wrap" div is the next div and it includes clear:both. Here's part of the code: 

</head>

<body>

<div id="wrap">

	<div id="header">
	
	</div><!-- end header div -->
	
	<div class="menu">

		<!--webbot bot="Include" U-Include="includes/menu.htm" TAG="BODY" -->

	</div><!-- end menu div -->
	
		<div id="inner-wrap">

		<div id="left">
          
			<!--webbot bot="Include" U-Include="includes/left.htm" TAG="BODY" -->          
                    
		</div><!-- end left div -->

		<div id="main">

		<div id="right">
		
			<h3>Latest Developments or Latest News!</h3>
			<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser 
			plu simplic e regulari quam li existent Europan lingues.



rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 17:39:25)

Sorry Nicole, I just meant not to forget to include the clear, but it looks as if you have it?

It's hard to tell what is going on without the css - I'd be happy to look at it if you would like to PM me the page or a mock up including the css (but may not get to it until this arvo or in the morning).

Edit: I have a test copy of the menu I'm using, on my local machine, and am clearing left, not both. Unfortunately the final version is on my work servers and the power is off at the plant today so I can't jump in a see what I've done [:(] I have the memory of a goldfish and always have to look at the code to see what it was that made it work.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 17:53:22)

Thanks for the offer Sally,

I'll create a dummy folder and post the URL here that I'm working on. It's difficult enough to explain what's going on let alone try and figure it out from my description. I'll upload that link as soon as I can.

Edit: This is just a work in progress Sally, I don't usually spend a lot of time on this site but this is the second last issue I have with the templates so I was going to try and get at least that part done, after I've fixed them both all I have to do is add content which should be very easy. There is no urgency here is what I'm trying to say.

Thanks



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:08:56)

Okay, so here's the Work-In-Progress

And here's the Test Menu by itself, this is not in the same folder it's aactually just loosly linked to my domain.

Menu-Test

You'll notice that Firefox has more padding around the entire menu than I'd particularly like, I'm trying to get it to look like it does initially in IE7, but of course the thing doesn't work in IE7 or other IE versions for that matter.

But in Firefox you'll notice it opens the menu but spreads it the entire page width and it stays there after you've moved off the menu.



rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:16:12)

IE problem - needs the Javascript to work - can't see the js on the test page?

FF problem - see what you mean [:D] Will take a look now.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:18:39)

Thanks Sally,

I'm reading through all the Suckerfish pages now, and all blog entries, might take me a while but this is the link that I've found.

http://www.htmldog.com/ptg/archives/000051.php



rubyaim -> 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).




rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:43:46)

Hi Nicole, remove the overflow from .menu and you will see that it starts to behave.

It will need a bit more work than just this, but that is a start at least - see how you go, if you have no joy I'll take a far longer look in the morning [:)]




Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:45:50)

quote:

ORIGINAL: rubyaim

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).


I just took it out of the include and put it in a folder called scripts wiith the name menu.js.

It doesn't seem to have changed anything though?

The pull out menus are also slightly cutting into the drop-down ones. I had this figured out last night but perhaps I forgot to same it. I'm pretty sure it has all to do with changing one of the 8em widths to 10em.



rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:55:27)

See above Nicole, try removing the overflow from .menu.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 18:58:38)

Yes I just did that, thanks, it looks like I need some z-indexes in there though, it's going behind the left include and over the text but the text is visible through it. Will keep reading!

Edit: I'm also now losing the drop-down after hovering into different parts of the site like the main content area underneath where the drop-down is.

Just noticed you've responded again.



rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 19:02:15)

I think just keep working on the div styles - I know I've not had to use z-indexes at all, but did spent hours pratting about (and nearly threw it in and used a JS menu instead).

The layout of my page is very similar to what you have - I just wish I had the copy locally to see what I did [:'(]

If it's any consolation the first is the most difficult, now I just keep re-using the menu I'm happy with and change the style accordingly [:)]



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 19:04:57)

quote:

ORIGINAL: rubyaim

If it's any consolation the first is the most difficult, now I just keep re-using the menu I'm happy with and change the style accordingly [:)]


I tend to do that too with a lot of things I learn. Will keep working on it Sally, thanks!



rubyaim -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 19:13:49)

Okay, if you get rid of the inner-wrap div totally, and take the position off #main, the menus work and all looks well (apart from going behind the .ad on the left include, did not look at that).

Not sure where you are at with your code, think it's been changed since I started playing...

I've got to go and win the cricket now [:D]



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 19:16:25)

Thanks Sally, I'll try that.

Hope you win at Cricket and I hope you don't get any of the heavy showers we just had here, unless of course you need the rain!



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 19:20:47)

Now if I can only convince the world to totally only use IE! [:D]

It works as you said in IE Sally, but has just sent the page beserk in Firefox and probably Opera too! LOL

Will keep working on it.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/10/2007 21:32:57)

It was a z-index issue, still working on it now, but adding a z-index of 2 to the #nav li ul seems to have solved that problem.



Nicole -> RE: Accessible Suckerfish Drop-Down Menu Problems (2/11/2007 1:03:26)

Okay, I've learnt a lot today and have the menu working in all browsers and it looks very close to what I'd like.

Work in Progress

A few minor things remain though.

1. I can't seem to figure out why there is a slight gap between the drop-downs and the fly-out menus? I think it has something to do with the hover being fractionally larger than the link, but I can't see anything in the CSS that indicates this?

2. I also can't figure out how to move the arrows further over to the right?

3. In the test menu I had the tabbing working,, which is obviously the main purpose of this kind of menu. In the work in progress the tabbing isn't working?

I'll probably add two more menu titles, hopefully they'll fit and resize successfully to 800 x 600.

Thanks for everyone's help!

Nicole



rubyaim -> 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



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125