how to INCLUDE a Suckerfish dropdown menu ?

[amoelle]

Now, here's a wicked one !!

I've been working on a website, where I use Suckerfish dropdown menus (please visit http://www.htmldog.com/articles/suckerfish/example/)

My problem is, that I don't want to maintain identical lists (the menustructure) in top of every page on the website

ie.
<ul id="nav">
<li id="first">
<div><a href="">Band</a></div>
<ul style="position: absolute; left: 0px; top: 18px; width: 108px">
<li><a href="pages/jp.htm">Bouzouki, guitar,vocal</a></li>
<li><a href="pages/lv.htm">Fiddle, vocal</a></li>
<li><a href="pages/sk.htm">Bodhrán, percussion, vocal</a></li>
<li><a href="pages/ml.htm">Sean Nós Step, vocal</a></li>
<li><img src="graphics/mclip5.jpg" width="100" height="65"/></li>
</ul>
</li>
<li>
<div><a href="">Music</a></div>
....
</li>
</li>
</ul>

etc

instead, I'd like to keep the ordered list in one file, ie menu.htm, and then include it in the 20 webpages.

....I don't want to use frames...
....I've tried Iframe, but the dropdown 'hides' when outside the iframe....
....<layer> is only suitable for NS......

... I'm about to give up

Can anyone give me a hint on this ??

/Anne

[jscheuer1]

I looked at that suckerfish menu awhile back. It not only was amusing but, also looked quite effective. The only idea that comes to mind is to write your menu as a document.write script and put it in the body of each page. An easy way to convert is at Convert HTML to JavaScript. Once you have that code, take out the opening and closing tags, line breaks and extra spaces (two or more spaces replace with one space) and save it to a file, say 'myfshmnu.js'. Then in the body of each page at the point where you want the menu displayed put this:

<script src="myfshmnu.js" type="text/javascript"></script>

Added Later:
You can do a similar thing with the suckerfish script itself but, here the method is easier. Simply save the script as is but, without the beginning and ending tags, to a file, say 'suckerfish.js'. Put this in the head of each document that uses it:

<script src="suckerfish.js" type="text/javascript"></script>

[jscheuer1]

I tried this out here and even included the style as an external stylesheet. It worked fine but a more refined example of what 'myfshmnu.js' could look like is:

with(document){
writeln('<HR><UL id=nav><LI id=first><DIV><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Overview</A></DIV><UL><LI><IMG height=27 alt=Remora ');
writeln('src="the Suckerfish_files/remora4.gif" width=100></LI> <LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Classification</A> </LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Physcial Characteristics</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Habitat</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Lifestyle</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Evolution</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Distribution</A></LI></UL></LI><LI><DIV><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Species</A></DIV><UL><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Ceylonese remora</A></LI> <LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Remora remora</A></LI> <LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Sharksucker</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Slender remora</A> </LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Spearfish remora</A></LI><LI><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Whitefin sharksucker</A></LI><LI><IMG height=80 alt="The ');
writeln('top of a remoras head" src="the Suckerfish_files/remora6.gif" width=59></LI></UL></LI><LI id=last><DIV><A ');
writeln('href="http://www.htmldog.com/articles/suckerfish/example/">Links</A></DIV><UL><LI><A ');
writeln('href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=168567">Remoras at ');
writeln('ITIS</A></LI><LI><A href="http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora remora at ');
writeln('ADW</A></LI> <LI><A href="http://www.oceanlight.com/html/remora_sp.html">Phillip Colla photographs</A></LI><LI><IMG ');
writeln('height=35 alt=Remora src="the Suckerfish_files/remora3.gif" width=100></LI> <LI><A ');
writeln('href="http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender suckerfish at Australian Museum ');
writeln('Online</A></LI><LI><A href="http://www.colzoo.org/animalareas/shores/remora.html">Remora at Columbus ');
writeln('Zoo</A></LI></UL></LI></UL><HR>');}

taken directly from the example.

[mwinter]

The only idea that comes to mind is to write your menu as a document.write script and put it in the body of each page.

The whole point of a mark-up based menu is to make it accessible, even if the script cannot be executed properly. To reintroduce a script dependency means you may as well use an inaccessible menu like HVMenu (or many other similar types).

The correct way would be to use server-side includes. That may, or may not, be supported by your host. An alternative would be to use a template- or macro-based editing tool. Whilst this would place the menu mark-up in every file, changes to the menu structure could take place without a lot of editing.

By the way, even if you do use document.write, you should only use one call. It is far more efficient to create an array of lines, join them, then write the resulting string:

document.write([
 '...',
 '...',
 '...'
].join(''));

Mike

[jscheuer1]

The whole point of a mark-up based menu is to make it accessible, even if the script cannot be executed properly.

I thought about that but, the sad truth is that as wonderful as this menu is, even in its original form, it is inaccessible if the user has no JavaScript capability. So, I'm not sure what you mean.

[amoelle]

Hi all,
thank you for valuable help and hints.

I managed to include the menu (and join the array)

Another problem showed up: Special characters like danish and irish letters æ,ø,å and ó doesn't show properly in the menu.
But I take it, that proper escaped characters will do the job.

Have a look in the sandbox http://www.movingcloud.rootsmusicage.../sweetnyaa.htm

The graphics and the skin is not final, I'm merely working on the structure...

I'll look into the possibility of running serverside scripts (it is possible at www.surftown.dk), but I'll need to research further.

... but I didn't get the last comment ??
are you saying, that some browsers don't support JacaScript, or that people, who turn the JavaScript option off, won't see the menu ?

All the best
Anne

[amoelle]

the sandbox is located at

http://www.movingcloud.rootsmusicage.../sweetnyaa.htm

/Anne

[amoelle]

"http://www.movingcloud.rootsmusicagency.com/pages/sweetnyaa.htm"

[jscheuer1]

Don't worry, we got the link the first time, this editor just makes it look cut off. Looks good! Yes. Without JavaScript available and enabled to do the mouseOver drop downs, suckerfish is dead in the water. Go to the example page and turn off JavaScript. No drop downs. The only difference is that with the original, the main headings are still visible and you can have them link to a page from which the content of its drop down is available via conventional links. To maintain this functionality in your setup, you need to leave the main headings on your pages as regular HTML, the rest (markup for the drop downs) can still be external script for ease of portability. Also, for example, your page:

http://www.movingcloud.rootsmusicagency.com/index.htm

Should have on it conventional links for all the content in the drop down for the 'Band' header on the main page's menu. This is the way if you want the fullest possible accessibility with this menu.

An alternative is to provide a limited set of conventional links via the <noscript></noscript> tag. Or at least language advising the user that JavaScript must be enabled. Most folks are using JavaScript and don't even know it so, don't fret too much. However, it sometimes happens that a site attracts mostly people without JavaScript. If this is the case, JavaScript is a poor choice. Oddly enough I master two sites dedicated to three music festivals, one of which is a roots festival focusing on the music of the Americas. On those sites I use JavaScript enhanced menus that work fine without JavaScript enabled. They have no dropdowns though, and must be written on each individual page. This web authoring is tough work and there are few real shortcuts if your goal is maximum accessibility. Efficient markup repeated across numerous pages takes time. With a good editor though, many pages can be changed at once. I like Edit Pad Pro. There are many available.

[mwinter]

I thought about that but, the sad truth is that as wonderful as this menu is, even in its original form, it is inaccessible if the user has no JavaScript capability.

I'm afraid you're wrong. If you disable the style sheet for the Suckerfish demo, you'll see the menu as a list - exactly what it's marked-up to be. The system would be more accessible if the menu started as a plain list and was altered afterwards, but it is better than most as it is.

All the script does is apply a style to the menu items so that IE will show submenus when a parent becomes the target of a mouseover event. Decent user agents don't need this as they support the :hover pseudo-class on more elements than just a. In any case, it is the author's responsibility to make the top-level items usable links so that an IE user who isn't prepared to disable CSS support temporarily (and most IE users wouldn't know they'd have to, let alone how) can navigate to section overview pages or to a site map.

Another problem showed up: Special characters like danish and irish letters æ,ø,å and ó doesn't show properly in the menu.
But I take it, that proper escaped characters will do the job.

Really? They seem to display fine. However, as a general rule it isn't appropriate to use SGML character entities (&#nnn; or &name;) in scripts as a script engine has no real concept of entities. Instead, they should be escaped.

For example, a acute has the á and &aacute; entity references. 225 in hexadecimal is 0xe1, so it would be escaped as '\u00e1'. If you look at the entity references list in the HTML specification, you'll see that the hexadecimal values are written in the comments as U+xxxx.

I'll look into the possibility of running serverside scripts [...]

You don't need full-blown script support, just SSI (server-side includes). It literally just includes one file within another.

... but I didn't get the last comment ??
are you saying, that some browsers don't support JacaScript, or that people, who turn the JavaScript option off, won't see the menu ?

Yes, to all of those questions. Client-side scripting (on the Web, at least) should always be considered unreliable and optional. It should never be used to provide critical functionality such as navigation unless you have a fool-proof alternative available. A well designed system will degrade properly to that alternative so you wouldn't need to duplicate any information.

The number of possible visitors which will have scripting disabled will vary according to your target audience, so it's pointless to quote numbers.

Mike