Multi Level CSS Menu not working

[kjbeckett]

Hi

I would appreciate any advice you may have as to why my left hand nav is not working. I am quite new to coding and am struggling to find my bug. Any advice welcomed!

I have been trying to install the menu from http://www.csscreator.com/menu/multimenu.php#

onto http://www.kjbeckett.com but with no luck so far. Can anyone see what I have done wrong?

Kind regards

Paul

[AjiNIMC]

If you are not good with css I advice you to keep things simple, there is power in simplicity.

CSS based menus are easy for experts but a pain for others due to inter browser compatibilty problems. So better play safe and learn css indepth. I am going for a 3 day camp, once I come back I will try to look into the problem.

Regards,
AjiNIMC

[safetystu]

Menu looks functional to me!

[kjbeckett]

Hi

The previous left hand nav has now been removed. It did not work on key browsers.

Based on feedback I have received in this forum I have introduced a new left hand nav. Thanks.

The change I have made to improve my left hand nav is currently in test on my homepage www.kjbeckett.com.

I would appreciate it if you could look at it from:

1) a SEO perspective.

2) browser compatibility perspective. I have tested on many browsers and all seems good but I would appreciate others to look from there browsers. Many of the left hand links are just links BUT if you click on cufflinks, silk ties, mens socks, and mens wallets you should be presented with another list. Does this happen?

Kind regards

Paul
www.kjbeckett.com

[martindow]

I would suggest posting on the css-d forum
http://www.css-discuss.org/
They are very good at looking at browser compatabilty problems there - they probably won't discuss the SEO side as they are very stern about anything not involving css.

[capenancy]

Originally Posted by kjbeckett

2) browser compatibility perspective. I have tested on many browsers and all seems good but I would appreciate others to look from there browsers. Many of the left hand links are just links BUT if you click on cufflinks, silk ties, mens socks, and mens wallets you should be presented with another list. Does this happen?
www.kjbeckett.com

Hello,

I just looked at it on a Mac using Safari and Firefox. The navigation menu worked and the second menus all worked. I have a design suggestion. The hover on your navigation menu only makes the link words nearly impossible to read. Why not change the text color also with the hover so it is legible?

Also, I would recommend some kind of separation between the navigation and main body so it works better on the eye. Perhaps a right hand border on the navigation menu or a left hand border on the main body.

A final design suggestion is to line things up to tie everything in. Right now your top stuff is not lined up with anything below (well except Free shipping to USA is lined up with navigation menu on the left side). If the KJ Beckett banner and the top navigation items (Home) could line up with the left side of the main body items that would be good. And you could perhaps make the banner larger or repeat it across a few times to fill the space? If you can't line anything up, how about at least putting a bottom border or something to separate the two?

You asked if it the menu was working and you asked for SEO help. Hope you don't resent the design help.

Nancy

[Clint1]

This asks the question of whether or not SE bots can spider the nav menu. I've heard for a long time that HTML menus are better since SE's can't spider the JS or CSS for the nav links. However, in looking at your code, all of the links from the sub-menus are in the code of the page so that looks like it may be ok. Can anyone vouch for that? I've been wanting to change the basic HTML nav menu at my site for a long time, but I've been hesitating for fear the SE bots couldn't properly spider anything else.

On another note, your pages are way too large. They are taking a while to d'load even on 3000k DSL. I checked one page and it was over 100k in size. The homepage is the right size CODE WISE*, but I think the images are too large and that's what's slowing it down. Could also be a slow webserver or route from me (USA) to you. (*If you right click a page and look at "Properties" and the size, that's only the HTML code and doesn't include all the graphics).

Also, as someone else pointed out I believe, you need to change the colors because that light gray on that blue background isn't easy to see.

The menu works fine for me on XP SP2 IE, and FireFox. Interesting that according to FF, the menu is NOT CSS!

Is there any external code to this nav menu, or is it totally self-contained within the webpage? This looks like something I could use, as long as the bots can spider it. Oh well, I checked it on old Netscape (4.79) and it doesn't work. But it does work ok on v7.2.

[kjbeckett]

Hi

Thanks for the design help! I will amend my page to look sharper over the coming weeks.

The left hand nav does use a bit of javascript - but this can be viewed in the page - I have marked it with a note. Eventually I will move it to an external file.

I know I need to do something about the page size and server speed - it is very slow. Thanks.

Paul

[Serj]

FYI You have misspelled the word Accesories on your main page (you are missing a "c")

[Clint1]

Originally Posted by Serj

FYI You have misspelled the word Accesories on your main page (you are missing a "c")

Hee hee. It's spelled "accessories". ;-) Two C's and two S's (together).

[Clint1]

Originally Posted by kjbeckett

Hi

Thanks for the design help! I will amend my page to look sharper over the coming weeks.

The left hand nav does use a bit of javascript - but this can be viewed in the page - I have marked it with a note. Eventually I will move it to an external file.

I know I need to do something about the page size and server speed - it is very slow. Thanks.

Paul

Paul, is this the only external support files for the nav menu?

<LINK REL=STYLESHEET HREF="acatalog/lefthandnav.css"><SCRIPT LANGUAGE="JavaScript" SRC="acatalog/actiniccore.js

That js file doesn't appear to have anything to do with the menu....where exactly is the js file you mentioned? Or are you referring to this JS for example:
<a href="#" onclick="return show_hide('cufflinks');">
Thanks.

[weegillis]

CSS could do a lot to help you simplify your HTML, starting with your main navigation menu. An inline unordered list consisting of text links would be compact and SEO friendly.

Consider, for example,

<a onmouseout='RestoreImage()' onmouseover='SwapImage('button38','acatalog/butaboutus_on.gif')' target='_self' href='acatalog/aboutus.html'>

</a>

which could be written as follows:

[*]
	<a title="About KJ Beckett - Bath England - Mens Accessories" href="acatalog/aboutus.html">
	About Us
	</a>

There are a number of very straight forward CSS techniques to take care of the positioning and mouseover behaviors.

If you're not comfortable with lists, then a simple table of links, 720px wide, with nine 80px TDs could be styled to center link text and apply rollovers using CSS (similar to the bottom menu). This will eliminate 18 image files and shave about 4kb off the download in the process.

But we won't stop there. The Home page is about 220kb with all images. At any speed, this is a large page, roughly three to four times the generally recommended size for a home page. So it becomes paramount to shave bytes from everywhere, the HTML and external files, and the images.

A great deal of text is displayed in image form, which is definitely not SEO friendly since spiders are essentially blind. If it's text, let the HTML supply it, not the gifs and jpegs.

The table structure is a little disjointed. Each row of accessory lines, the picture, the title and the description, is actually tagged in three separate TDs on separate rows, rather than one, which goes against the coherence of the information. Each item could have its three components grouped into a single TD for a much simpler structure with closely related information nicely organized. Again, using scalable, selectable, searchable text instead of images will eliminiate a dozen images and shave about another 13kb from the page. Smaller pictures could also shave another 24kb from the page.

Some of the table and td widths don't compute. For instance, there is a table 670px wide inside one that is only 660px; and further down, 610px worth of tds in a 600px wide table.

I think Webnauts said it best when he suggested using 'sophisticated tables' in preference to complex nested tables.

Lastly, it might do well to consider that a great many users still cling to 800px displays. Your content could be made to fit nicely into that width with a little less whitespace amongst your groupings. Luxury denotes elegance, and elegance denotes order without clutter. It may prove more elegant to structure the site to break up the content a little further for smaller, more succinct and faster loading pages. Your About and Contact pages' central content are a good example.

[Clint1]

Regarding that below: I got this working on my site. The only problem is the menu is too far to the right, too much of a left margin and I don't see yet how to fix that.

I'm still waiting on some input as to whether or not that menu will be search engine bot friendly, or if the bots will have a problem with it.

Originally Posted by Clint1

Paul, is this the only external support files for the nav menu?

<LINK REL=STYLESHEET HREF="acatalog/lefthandnav.css"><SCRIPT LANGUAGE="JavaScript" SRC="acatalog/actiniccore.js

That js file doesn't appear to have anything to do with the menu....where exactly is the js file you mentioned? Or are you referring to this JS for example:
<a href="#" onclick="return show_hide('cufflinks');">
Thanks.