Welcome to WebmasterWorld Guest from 54.196.73.22

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Dropdown Menus

Anybody got a good sample/tutorial of this?

     
9:30 pm on Oct 30, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1807
votes: 1


Everyone seems to love thos schnazy little .js dropdown menus.

I have to agree that on certain sites they are definitely a plus for navigation.

Unfortunately due to my propensity towards SEO I dislike .js

Leading me to my posting question...
Is there a good way to do CSS dropdown menus? Can anyone point me to samples and/or tutorials?

I am trying to hit that elusive balance of good SEO/spiderability and good design/usability/navigation.

9:41 pm on Oct 30, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 16, 2003
posts:592
votes: 0


Check out this thread [webmasterworld.com].
4:51 am on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1807
votes: 1


I was hoping to do something similar WITHOUT using javascript.

I really don't know if it is possible, but I figured if anyone would know it would be the folks in here.

Essentially, I want the "value" of link text, and the usability/navigation function of having the dropdown.

7:07 am on Oct 31, 2003 (gmt 0)

Senior Member from ES 

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 11, 2003
posts:1381
votes: 0


Hmm... Do you care at all about IE? If not, I believe that the man who brought us the csszengarden put up an example this week. Check out mezzoblue.com with a non IE browser, and scroll over the 'about something else contact' area at the top. Pure css.

AFAIK if you want I.E., you need J.S.

7:20 am on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2001
posts:1175
votes: 9


I'm not really sure I understand what your view about javascript is, stuntdubl. Are you saying that you don't want javascript for users (e.g. for those with it turned off or for mobile phones, etc) or that you don't want it because you think it affects SE rankings?

If it is the former, then I understand but as mipapage says I don't believe you can easily do cross-browser drop-downs without at least a basic use of .js.

If it is the latter, I can see no negative SE effect whatsoever from using javascript-driven dropdown menus with text links (as long as the javascript is clean, light and is preferably put in an external script).

Certainly there are many ways of doing what you describe ("elusive balance of good SEO/spiderability and good design/usability/navigation") with javascript.

10:04 am on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi stuntdbl...

"Pure" CSS dropdowns are not yet possible, well they are but not in IE as has been mentioned.

They require the use of :hover on an element other then a link to make them work.

Eric Meyer has a demo of what could be done with pure CSS. View with a CSS2 compliant browser for full effect;)
h**p://www.meyerweb.com/eric/css/edge/menus/demo.html

but Using javascript just to control the control the "hover" onmouseover function should not affect the spiderability..
there is a demo of a javascript controlled CSS menu here:
h**p://brainjar.com/dhtml/menubar/demo3.html

He also has a tutorial on how to build this:
h**p://brainjar.com/dhtml/menubar/default.asp

Suzy

4:29 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1807
votes: 1


I can see no negative SE effect whatsoever from using javascript-driven dropdown menus with text links

It is not so much that I am worried about a negative effect, as I am shooting for the positive effect from the value of the anchor text.

The brainjar tutorial looked quite complicated but promising. Would the anchor text value have a positive effect in this example? Is there any way to tell?

Maybe I am not understanding correctly in what context javascript effects the value of link text, as I don't have a very strong grasp on the concepts of .js

4:41 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Maybe I am not understanding correctly in what context javascript effects the value of link text, as I don't have a very strong grasp on the concepts of .js

Me either ;)

but I'm under the belief that as long as the anchor text is in the HTML, then that's OK

Some .js menus have the anchor text locked up in the script where the spiders can't see it.. but in this case you would just be using a script to catch the hover event...

any .js experts care to confirm/deny?

Suzy

4:48 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Yep, SE's cannot read links buried in a script.

Say you want to open a link in a popup window, but you want the SE to see it. In this method, the link is not seen by the SE:


<a href="#" onClick="window.open('myPage.html')" title="Some Title Text">

This is where the good old return false comes into play. This basically tells the browser to ignore the default behaviour and only run the script:


<a href="myPage.html" onClick="window.open('myPage.html'); return false" title="Some Title Text">

The above is accessible, SE friendly and still does what you want!

5:03 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


A site that uses js drop-downs will almost certainly have externally located js code. Therefore at the current level of SE technology, the links will be invisible to SEs.

A year or so back I used js drop downs, but they were a nightmare to design so that they looked good in all browsers. And of course alternative navigation was needed for browsers with no or poor DHTML capabilities. I dropped them after a while because I thought the whole concept began to look clunky.

In my opinion, going for CSS versions raises the whole compatablity problem again. It's just not worth the hassle, and they can easily look clunky if everyone goes that route.

5:21 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1807
votes: 1


A site that uses js drop-downs will almost certainly have externally located js code. Therefore at the current level of SE technology, the links will be invisible to SEs.

Are you saying that even if the html code for the links is located locally in the html file that they will still not count if there is external .js creating the menu?

What is your assessment of Suzy's brainjar example? Would that menu pass the value of anchor text?

5:36 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2001
posts:1175
votes: 9


Two different things are being confused here - the links and the drop down menus.

All you are doing with bog standard javascript menus is causing the div to appear or not to appear - you are not affecting the links at all.

Of course, if you are using javascript links then they will be affected in SEO terms, but normal html links are not affected in any way.

And it doesn't matter if the javascript is internal or external, just as it doesn't matter if a stylesheet is external or internal (apart from the cascade and code weight savings).

Note: I'm not a javascript expert by any means, but I do use a variety of CSS/javascript menus which have very good results in all SEs.

5:48 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1807
votes: 1


...but I do use a variety of CSS/javascript menus which have very good results in all SEs.

I just wanted to be certain that there was strong SEO value before making the difficult changes from image navigation to CSS dropdowns.

Thank you for clarifying Stever. Can you point me to any other good tutorials and/or programs to generate the code?

5:57 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Thanks Steve

All you are doing with bog standard javascript menus is causing the div to appear or not to appear - you are not affecting the links at all.

That's what I thought brainjar's was/is.. and what I meant by using a script just trigger the :hover effect.. but you can tell I don't know javascript;)

Blobfisk your tutorial is great.. can you put this in laymans terms for those of us who don't know .js

Note: should've said as long as the link (not anchor text) is in the HTML (href bit!)

Suzy

6:02 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2001
posts:1175
votes: 9


I use DW - so I either roll-my-own using techniques learnt from tutorials or use a couple of commercial extensions which are worth their weight in gold in time savings.

I'm a bit leery of a URL drop, but if you go to the DW Exchange on the Macromedia site you'll see the site all over the top ten-voted DW extensions...(I'm not in any way connected to them).

Suzy: I wasn't referring to the brainjar ones as being bad - looking at them quickly they seemed fine. I just meant that people often seem to confuse the concept of javascript links with javascript as a whole.

6:35 pm on Oct 31, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 16, 2003
posts:592
votes: 0


In the past I have used document.write("<a href='link.html'>link text</a>"); in an external javascript file for menus and have had no problems with search engines spidering my site.

If your links are left in the html there is no problem using javasript for a menu.

7:31 pm on Oct 31, 2003 (gmt 0)

New User

10+ Year Member

joined:Oct 28, 2003
posts:2
votes: 0


I agree with Reflection...I have also used the document.write method and have had plenty of search engines pick up my sites.

You're gonna have to use javascript just to figure out what version of the DOM the client browser is using...you'll need to know that the browser can even handle the css menus, if they can't you'll have to write code to handle that scenario gracefully. From that point on, you can design very basic css drop down menus. If you want something that looks like a dropdown from an OS, you'll end up using plenty of javascript to accomplish that...or some WYSIWYG editor like dreamweaver, but that's no fun!

I would suggest checking a copy of Crawford Teague's "DHTML and CSS for the WWW"...it's been a few years since I've used that book, but I selected it for a JavaScript class that I taught. It was a great book to help new people access the dhtml/css arena. Of course, you'll need some basic javascript knowledge, but the book was pretty accessible.

HTH.....Scott

8:28 pm on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


A site that uses js drop-downs will almost certainly have externally located js code

To clarify what I meant and expand...

Any half-way decent looking js drop-downs use a fairly hefty chunk of code. The sensible course is to have this in a seperate js file, rather than duplicated on each page. The html for the panels and the links would typically be generated by document.write in a function called by a mouseover. These links are invisible to a bot.

Alternatively it is possible to have standard html panels which are are pre-loaded but with coordinates that keep them out of the display area until required, but this adds extra size to each page. These links would be visible to a bot.

11:32 am on Nov 3, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0



Blobfisk your tutorial is great.. can you put this in laymans terms for those of us who don't know .js

Thanks SuzyUK! Which tutorial? The dropdown menu one?

12:09 pm on Nov 3, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


yes that one... but I don't mean to put the tutorial in laymans terms as it's great as it is ;)

but this thread subject (or what it turned into ;))...
Q.What are SE friendly javascript links?

Although I think you did in a earlier post anyway!

msg#9 if I'm not mistaken is what I was trying to get at...were the url is actually visible in the HTML and not just in the Javascript event ...

Suzy

6:08 pm on Nov 3, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Yep - in that case the SE can read and follow the link, but the javascript function is run onClick and the default action (open in the same page) on the href is stopped by the return false;.
6:22 pm on Nov 3, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 16, 2003
posts:592
votes: 0


What about using document.write(s) in an external js file?

Ex.

document.write("<a href='link.html'>Link</a>");

10:41 am on Nov 5, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Interesting question... I doubt it, as the writing is done by JavaScript, rather than HTML - I'm not 100% sure on this one...
11:31 am on Nov 5, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


What about using document.write(s) in an external js file?

If an SE took the external js file, it could in theory read the URLs. If necessary it could be programmed to ignore any escape slashes that might be included.

However the js file is likely to include several functions, not all used on every page of the site. Unless the SE was extremely clever it would have no way of tying a URL to a page.

I think it unlikely that a company like Google for instance would find the effort worthwhile. However it would be possible to scan a js file for specific URLs that might be considered inappropriate.