Opinions please on navigation

[Mike Hughes]

Can I ask for your opinion on a sidebar navigation change I'm looking at?

The original is here: www.firsttackle.co.uk

The new version is here: www.toptackle.co.uk

What I want to achieve is to make it easier for visitors to find a product section that interests them, and then to make it easier for them to look at the products within that section.

The menu is all css driven with a couple of block if lists. The css is on the page.

I know of a few issues still to address:

1. The menu takes a lot of code which slows down the page loading. Maybe I need to save it to a file and load it externally so the browser can cache it or is there a better method?

2. On the product pages there are a couple of floated items that appear on top of the fly out. I'm guessing a z-index should fix it but haven't worked it out yet.

3. I really want the 'In this section' bit to also show all the products at the same level on the product page. Ideally without going into php but I'm not sure if this can be done or how to do it.

What do you think and have you any suggestions on how it could be improved?

Thanks

Mike

[completerookie]

Great idea for the menu, especially for the product poping out, but far too much code for google to like
when I re-formatted the code in Dreamweaver, it runs to 3000+ lines
this seems to be loaded on every page and that just seems OTT. surely the load time would be suffering, and its one of google's pet likes at the mo.

I'm only guessing, the actual keywords you are trying to get across on a single page would be so diluted from the menu that you would end up with totally the wrong keywords being harvested (perhaps I'm wrong there)

could you not do something better in PHP.
I lkke the concept and thats its being CSS driven, I just don't like the amount of code thats being generated each time (I think that same menu appears on each page,it seems to anyway)

kev

[completerookie]

just read point two, couldn't find any, have you examples?
if its dropdowns, its a well known issue,
take a look around http://www.cssplay.co.uk/ for solutions on covering dropdowns, (but I'm only guessing)

kev

[Mike Hughes]

Thanks Kev,

You should be able to see the items appearing on top of the fly out on this page: http://www.toptackle.co.uk/acatalog/...-fly-reel.html

What I see looks something like this:



Mike

[completerookie]

ok,
99% certain that you have no background-color:white; on the flyout box.
without the background, everything grins through, but because the box is seperated from the menu, I cant get the css-selector tool over the box to see the exact style
I think its your div1 style thats at fault.

try that.
I also note that your blue frame of the flyout has some opaqueness to it, and again the background text etc grins through that ass well.

kev

[Mike Hughes]

I'll check tomorrow but I don't think it's the background. It covers everything else, just not the odd few bits of content that are positioned on the underlying page by floats.

The frame transparency is deliberate but maybe I should make it opaque.

I appreciate your help on this.

Mike

PS. I could reduce the amount of navigation code by 90%+ if I remove the fly out. I just like the fly-out but have to decide if it really adds that much. One of the reasons for seeking help on the forum.

[completerookie]

set the z-index:1000; in the style, normally thats way above anything else, see if that does it.
I think that being able to take 90% of the code away would be a massive help, but I still like the flyout.
we tried flyouts, but because the target audience was the elderly, the feedback was "don't like the constant flyout"
you're aiming at a different audience.

look at javascript ajax techniques, you can then call and replace a div with code that is called from elsewhere.
TIZAG has a simple ajax concept that could be incorporated into the on-mouse-over of the menu, even on individual nodes of your menu. - TIZAG is not the only place, there are much better sites to look at its just the first one that I picked

If you do this, make sure you still have the site-map to link together the individual pages, google doesn't handle ajax-javascript well, but then thats part of the aim.

I use ajax all the time at work, and have ajax requests being called as a direct response to barcode readers, I haven't yet been able to break it, no matter how fast they zap the barcodes, and you'd be surprised how responsive it can be especially if you are responding with relatively small amounts of code being returned.

another idea to speed-up the load time, would be to have the css loaded from a seperate sbdomain (css.mywebsite...) and the same again with images. - each seperate subdomain can have six individual threads calling six individual images simultaneously, you then get much faster load times.
if you end up with all the "hover-images" in a subdomain, optimize them for size. and you may get percived speed increase

kev

[Duncan Rounding]

Personally I don't think the fly out adds much value. It's neat but not convinced it's worth the code.

I also find the menu difficult when browsing on my mobile, as are most cascading fly out menus. Touching on a parent topic jumps to the page as a click would rather than show the child menu if you're not careful.

[Mike Hughes]

Thanks Duncan. Can I ask what type of mobile you're using? I did check on an ipad and think the navigation on this is probably as good as, if not better than, a PC.

Mike