28 replies to this topic

[Cris D.]

File Name: pro Dropdown Menu
File Submitter: Cris D.
File Submitted: 9 Mar 2008
File Updated: 12 Mar 2008
File Category: Menus & Navigation

Snippet: ProDropMenuV3
Author: Cris D
Date: 2008/03/03
For Etomite 0.6.1.4
Use: Creates a drop-down menu.

• It is multi-browser compatible:Tested in IE6, IE7, Firefox, Opera, Netscape, Mozilla and Safari (PC).
• It is Valid XHTML Strict, CSS Validated.

The snippet is adapted from lloyd_borrett's NavMenu

CSS and images is from Stu Nicholls CSSPLAY site:
URL: <a rel='nofollow' href="http://www.cssplay.c...enus/pro_drop2" target="_blank">http://www.cssplay.c...s/pro_drop2</a>
There are copyright issues for that you should check out at his site before use.
(Donation for commercial use and link in css file for non-commercial use.)

CHANGELOG: 2008/03/09

• Added the ability to highlight the current top parent
• Defined the classes outputed by the snippet so you can use your own css definitions and images to style

Classes outputted by snippet code:

<ul class="menu2">			#menu wrapper
   <li class="top">			#top level parents
	 <a href  class="top_link">	 #top level parent link
		<span class="down">		 #top level parent link with children
	 <a href class="current_link">	#top level that is a direct ancestor of the current page
  <ul class="sub">					  #second level unordered list
	 <li class=	"mid">				#second level list item
	  <a href class="fly">		#second level and below link that has children

Thanks to Cathode who initiated this menu development.
Thanks to Dean and Karen for helping me work out all the bugs!

See live version in action here.

Click here to download this file

Edited by Cris D., 11 May 2008 - 11:53 AM.

[Cris D.]

I contacted Stu Nicholls (who wrote the css and original HTML) and this is his response:

Hi Cris,

Whilst I have no objection to my menus being used on personal 'non-profit' websites
providing that the copyright comment is kept intact in the stylesheet, I do ask that when used on
commercial 'for-profit' sites that a donation is made to support my work on CSSplay.

I am now a self employed web designer/adviser and as such rely upon donations to keep CSSplay
up and running.

So I think that this should be made clear to your users.
Donations for commercial use have ranged from 10GBP to 200GBP.

Best wishes,

Stu

Edited by Dean, 12 March 2008 - 10:32 PM.
removed redundant info

[cathode]

Looks great Cris - that is some real excellent work, and thanks to Stu at CSSPlay as well. Just give me a holler when you need design work!

Knowing that Stu is now a full-time freelance like me, I certaily hope that everyone who uses this snippet on any commercial website pays attention to the copyright notice with this snippet and sends a donation his way.

[Dean]

Hey Cris, is access keys working in this version?

[Cris D.]

They should be, but they need to be set to the id of the corresponding page in the snippet config (hardcoded).

[TedD]

Looks great Cris - that is some real excellent work, and thanks to Stu at CSSPlay as well. Just give me a holler when you need design work!

Knowing that Stu is now a full-time freelance like me, I certaily hope that everyone who uses this snippet on any commercial website pays attention to the copyright notice with this snippet and sends a donation his way.

DropDownMenu isn't compatible with Opera 9.26
Menu causes strange errors

[Dean]

They should be, but they need to be set to the id of the corresponding page in the snippet config (hardcoded).

Hmm, I wonder why they aren't working for me then... I'll take a look.

[Dean]

DropDownMenu isn't compatible with Opera 9.26
Menu causes strange errors

This menu works for me on Opera 9.26 on OSX :/

[Cris D.]

DropDownMenu isn't compatible with Opera 9.26
Menu causes strange errors

I tested it in Opera

Version
9.22
Build
8801
Platform
Win32
System
Windows XP
Java
Sun Java Runtime Environment version 1.5
XHTML+Voice
Plug-in not loaded
Browser identification

Opera/9.22 (Windows NT 5.1; U; en)

What do you mean "Strange errors?"

[Cris D.]

Hmm, I wonder why they aren't working for me then... I'll take a look.

I just confirmed that the access keys work fine, through all levels with the latest version of the code.

[TedD]

I tested it in Opera

What do you mean with "Strange errors?"

See attachment for errors DropDownMenu in Opera version 9.26 (Windows XP) versus Firefox
DropDownMenu

 DropDownOpera.png   9.22K   43 downloads

and in FireFox....

 DropDownFireFox.png   16.01K   37 downloads

I'm testing this menu on my site: VelvetNoize

[Dean]

I don't understand why it's doing it there for you, as it doesn't do it here for me & the standard non-eto menu has been tested in opera by stu at cssplay too :/

[Cris D.]

I just downloaded Opera2.6 to check your site and stu's. Both look perfectly fine to me.

I'm testing on Opera
9.26
Build:8835
Platform: Win32
System: Windows XP

[TedD]

I just downloaded Opera2.6 to check your site and stu's. Both look perfectly fine to me.

I'm testing on Opera
9.26
Build:8835
Platform: Win32
System: Windows XP

After reading your replies and checking on other computers I reinstalled Opera. I got the same errors so I uninstalled Opera again and decided to install Opera in a different folder. This time I got no errors with the CSS menu from Stu.

BTW The errors probably began when I upgraded Opera to version 9.26....

Now I'm experimenting with the Etomite snippet and CSS .....
Stu's menu template # 01
Stu's menu template # 02

Thanks for testing
Ted

[jon]

For anyone testing this Menu, and not seeing any drop-down menus when you mouse over a top level menu item, the first thing to check is the HTML generated, i.e. - right mouse click and View Source in IE:

• a simple <html> at the top is not good enough. You need to specify XHTML in both the html tag, and precede it with a !DOCTYPE tag.
• check if the <li> entries are present for the second level menu items. If you see the second level menu items listed, but they don't appear when you mouse over the parent, it is probably an issue with item #1 (above).
• check colours specified in the pro Dropdown CSS file, as menu text and backgrounds can disappear amid the background colour specified in your main CSS

Good work on this, Cris and everyone involved!

I really like the menu, and my only concern is relatively minor: if you have Wide top level Menu and/or a Narrow Window, the menu does not scroll horizontally as you might expect. Everything sort of breaks down at that point, i.e. - text in one place and background in another.

Of course, I'd be interested in hearing if anyone has solved that minor annoyance. If I come up with a solution, I'll let you know.

And, finally, for anyone reading this who hasn't actually tried it, unlike some other popular menus, this one is placed normally in text like most HTML elements. You don't have to worry about it being positioned over top of a heading, etc.

Edit: don't laugh, but all of the above comments were made before realizing that I wasn't actually seeing the graphics referenced in the CSS. Because I installed the CSS into the prodrop2 directory, all of the url(templates/... CSS clauses had to be changed to url(/templates/.... Otherwise, the references were relative to the prodrop2 directory, instead of the root, i.e. - looking for the non-existent /templates/prodrop2/templates/....

All that said, it makes a pretty interesting menu system even without the button images. With the added bonus that you can change colours of the menu simply by changing the CSS. In fact, adding back just the arrow graphics, I've actually gone into Production mode until I decide about changing the button graphics' colours, which currently clash with the background colour of the entire site.

Edited by jon, 09 October 2008 - 03:27 PM.

[jon]

my only concern is relatively minor: if you have Wide top level Menu and/or a Narrow Window, the menu does not scroll horizontally as you might expect. Everything sort of breaks down at that point, i.e. - text in one place and background in another.

Of course, I'd be interested in hearing if anyone has solved that minor annoyance. If I come up with a solution, I'll let you know.

OK, I've found a solution: enclose the menu in a fixed size table at least as large as the menu bar.

<center>
<table width=1000>
<tr>
<td>

</td>
</tr>
</table>
</center>

where 1000 is the approximate (slightly greater than) pixel width of the menu bar.

I also added the <center> because menu bars have to be centred on wide screens on my web sites or they look "odd", as I centre the titles above the menu bar, and some of the pages have pictures centred for most of the page.

[Tonyb]

Hi guys

I am trying out this menu and I can't see any drop down items only top level items. I have tried varoius different Doc Type's as mentioned here already, but it has made no difference.

If anyone can shed some light on this for me that would be great as I would like to use this menu system if possible. By the looks of this support thread there has not been many problems with this snippett, so hopefully it may be just something silly that I haven't done,

Cheers

[Cris D.]

Do you have published children of the top level?
[edit] there are only 2 variables that can be set in the snippet or in snippet calls to control what is displayed, the default is to show all for the whole site if it is published and selected to "show in menu". Have you hcanged or added any variables to the snippet or snippet call?

Otherwise, have a look at the source code and see if the tables and child pages are being outputted. If they are, the css might be to blame.

Edited by Cris D., 30 March 2009 - 08:36 PM.

[katherholt]

Are you calling the snippet as:

[!prodrop2!]

I use this menu a lot and love it, if you need css help, or code, let me know.

Hi guys

I am trying out this menu and I can't see any drop down items only top level items. I have tried varoius different Doc Type's as mentioned here already, but it has made no difference.

If anyone can shed some light on this for me that would be great as I would like to use this menu system if possible. By the looks of this support thread there has not been many problems with this snippett, so hopefully it may be just something silly that I haven't done,

Cheers

[Tonyb]

Are you calling the snippet as:

[!prodrop2!]

I use this menu a lot and love it, if you need css help, or code, let me know.

Thanks guys it would seem it was the css side of things. I have everything working ok now.