Expending Menu

[kelly5518]

Hi,

I have a need for a dropdown menu (or really one that displays to the right of an image). This is for a previously designed site that has a curved navigation area. What I'd like to do is take one of the images that are currently linked to a page, and have it turn into a dropdown menu to the right that would give about 4-5 different pages to link to.

Is this possible? Because of the somewhat complicated design, I don't want to have to redo the navigation area.

I'd prefer not to have to use javascript if possible, but I'm open to whatever will work without me having to totally redesign the page. Since I've never used a dropdown menu before I don't really know how they work.

Thanks for any suggestions.

 

[Foamcow]

Without using Javascript you're options are

1. CSS dropdowns (such as Suckerfish Dropdowns). however these utilise a very small bit of javascript to accomodate rollover behaviour in Internet Explorer. The solution is better than a pure JS version though as the links are still navigable even without JS (i.e. for search engine crawlers etc).

2. A boggo HTML select box.... nice

3. A flash doobrie. Probably not feasible for the same reasons as not wanting Javascript.



Personally, I'd go with CSS every time.
Show us the site and we can give you an idea of how to proceed.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

Hi,

Here's the url:

http://www.lbuckleylaw.com

I guess it isn't an issue if I use javascript or not because I'm using it anyway for the rollovers.

The homepage with its curved navigation is what concerns me, but maybe it isn't an issue.

The interior of the site is being redone with a different header and navigation so that can be javascript or css. If I go with javascript, I'll use a sitemap to make sure that the links are all accessible to search engines.

Thanks for your help.

kelly

 

[Foamcow]

I'm not sure exactly what you want to do.

Is each item in the menu to spawn a drop down list of further items?
Or is that list itself meant to be a drop down?

I don't think it will be much of a problem either way, but you may have to restructure how the page is put together (it will look the same, just be built differently)

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

Actually, I only want one of the links on the home page to spawn a dropdown (maybe off to the right of it). This link will be called "Practice Areas", and will encompass Estate Planning, Business Litigation and other practice areas. So the navigation will still look the same as it does now except for the page names, and when you rollover the Practice Areas link the dropdown should appear.

When I redo the interior, again I will only want one dropdown (below) the link called "Practice Areas".

Thanks,

kelly

 

[kelly5518]

So, from looking at the Suckerfish dropdowns, does this mean that I have to use an unordered list to create the initial navigation rather than the images I'm using now?

Thanks,

 

[Foamcow]

You might have problems incoroporating the suckerfish dropdowns into your table layout.

I had a play with the problem yesterday but couldn't get anything that I was satisfied with.

A floating div that you can hide/reveal with Javascript is an option (actually, move it from off screen left to it's position would be better for "degradability")

Your layout wouldn't be hard to do in CSS actually, have you thought about that?
It would also make your code easier to manage.


Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

Hi,

I prefer to stay with a table layout for backward compatibility. I've seen too many overlaps and obscured content with css layouts (including MSN at times).

Surely there must be scripts or programs out there that use an image for the navigation. It seems like I've seen some, but I'm not sure where now, and don't know if they would be compatible either without changing the layout.

I would be happy to pay someone to adapt the home page navigation for me if anyone's interested.

kelly

 

[Foamcow]

The image isn't the problem.
In fact, there isn't a particular problem, I just don't have time at the minute to do it

Make a DIV containing your sub navigation.
Using CSS, absolutely position it way off to the left with a negative left margin value. This hides it from view, but it will still be "visible" and navigable to crawlers etc.

Using Javascript, assign an onMouseOver event handler to your button that will activate the link. Give that a script that will change the position of the submenu DIV to bring it on screen.

You will need ot also add some kind of onMouseOut event to the DIV to shove it back out of the way when not needed.


I've not tested this, but it should work ok.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

Okay, I'll give that a try later today and let you know how it works out.

Thanks,

kelly

 

[kelly5518]

Ok, well it didn't work out so well and I've taken enough of your time, Foamcow. :-\

I was able to hide and display it using javscript and the visibility property, but that doesn't put it where I want it. (I tried using a large left margin to hide it, but didn't know what to use to place it correctly on mouseOver.)

I don't use absolute positioning for my layouts so I'm lost about how to line it up next to my image. It seems like it would require relative positioning, but like I said, I don't use css for overall positioning so I don't know if it's possible or not.

Anyone? My offer is still open to pay someone to do it for me, but it does need to be cross-browser and backward compatible.

Or, if anyone has any other suggestions I'd really appreciate it.

Thanks a bunch,

 

[Foamcow]

Since the layout is pretty much fixed in place anyway, you could use absolute positioning to put the subnav where you want it.

I'll try and take a look tomorrow.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

That would be great Foamcow. Thank you so much.

You're right, the home page is fixed so it's not like it's a centered block that floats with the size of the resolution.

I did try using the "idname.style.leftMargin" attribute with javascript but couldn't get it to work right.

kelly

 

[kelly5518]

Okay, I'm making progress. I have it positioned in the right place and showing and hiding, but when I take the mouse off the image, of course I lose the dropdown menu so I'm not able to access the links.

 

[kelly5518]

Well, I have it working somewhat, although it needs some fine tuning. In IE, it seems to work pretty well. You actually go to the link.

In Firefox and Netscape the menu appears, but clicking on a link doesn't take you anywhere even though the url shows in the status bar.

I was able to get Firefox to go to the links by using: onClick="document.location.href='url-here'" in the anchor tag, but this still didn't work for Netscape.

I have no idea where the red underline is coming from in Netscape and Firefox either. It doesn't do that in IE and it's only supposed to have an underline on hover.

Here's the url if anyone wants to take a look and offer any suggestions:

http://www.lbuckleylaw.com/index_copy.shtml

Thanks,

kelly

 

[Foamcow]

instead of using Javascript to follow the links, can you just use normal links?

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[kelly5518]

Hi,

IE works with the regular links, but Firefox and Netscape don't. That's when I added the js location part, but that only helps Firefox. Netscape still won't budge.