Wanted: JavaScript Slide Out Menu

[Websquad]

I am not a JavaScript coder, nor do I wish to become one. However, I have a client (a local church) that wants a slide-out menu, which, as far as I can tell, cries out for a JavaScript solution.

The one they like the most is at the St. Andrew site:

http://www.standrewumc.org/index.html

One of our forum members also has implemented one, which I'm guessing is based on some GoLive code.

http://www.harvestpointecc.com/

I've had success in the past in modifying JavaScript to make it meet my needs. So I searched the Internet and found a few candidates. In all cases, I've met with flustration trying to understand the underlying logic of the code, and my mods have failed.

Does anyone know of a source of some good, clean, free (hopefully), easily modifiable code that would result in a slide-out menu?

Thanks !!

[JackWolfgang]

I am not a JavaScript coder, nor do I wish to become one. However, I have a client (a local church) that wants a slide-out menu, which, as far as I can tell, cries out for a JavaScript solution.

Here's what you want using pure XHTML/CSS goodness: http://www.alistapart.com/articles/horizdropdowns/

Oops....take that back, it has JavaScript to make IE behave.

[Websquad]

http://www.alistapart.com/articles/horizdropdowns/

A very interesting approach, and 98% of what I want. I was able to copy the code, including the css and js files, and make it work in my test environment.

The bad news is that the CSS applies global changes to ul, li, and a elements. I normally define different classes to keep all of this sorted out; however, when I do that with this code, the menu falls apart. I then created what I thought would be a normal unordered list, defining the list-style as disk, the padding-left as 2em, and no bottom border; I also defined the list-style-position as be outside. This didn't help. The list was indented as expected and the bottom border went away, but the list-style:none was not overridden, and the text was presented on one line. Not what I wanted.

Of course, what I'd rather do is specify special things for the menu items (id="nav" ??) rather than globally ....

Do you have any ideas? The author's blog (Nick Rigby) appears to be dead and I think that he is well insulated .... I have his js, css, and html files in a zipped file if anyone can help ....

[JackWolfgang]

Bob--

I have not messed with the JavaScript, but I was able to get this to work by adding one class name and monkeying with the CSS. Here's my code.

XHTML:
<ul class="SlideOut">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet
Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>


CSS:
ul.SlideOut {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

ul.SlideOut li {
position: relative;
}

ul.SlideOut li ul {
border-bottom: 1px solid #ccc;
list-style: none;
margin:0;
padding:0;
position: absolute;
left: 149px;
top: 0;
display: none;
}


ul.SlideOut li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul.SlideOut li a ul {

margin:0;
padding:0 }

ul.SlideOut li a ul li {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
position: relative;
border: 1px solid #ccc;
border-bottom: 0;
}


* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


ul.SlideOut li a:hover { color: #E2144A; background: #f9f9f9; }

ul.SlideOut li ul li a { padding: 2px 5px; }

ul.SlideOut li:hover ul, ul.SlideOut li.over ul { display: block; }

[JackWolfgang]

OK, I did a little clean up on the CSS and a little formatting to match my personal preferences:

/* http://www.alistapart.com/articles/horizdropdowns/
*/

ul.SlideOut { border-bottom: 1px solid #ccc;
list-style: none;
margin: 0;
padding: 0;
width: 150px }

ul.SlideOut li { position: relative }

ul.SlideOut li ul
{ border-bottom: 1px solid #ccc;
display: none;
list-style: none;
left: 149px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 150px }

ul.SlideOut li a
{ background: #ffffff;
border: 1px solid #ccc;
border-bottom: 0;
color: #777777;
display: block;
padding: 5px;
text-decoration: none }

ul.SlideOut li ul li
{ position: relative }

ul.SlideOut li a:hover
{ background: #f9f9f9;
color: #E2144A }

ul.SlideOut li ul li a
{ padding: 2px 5px }

ul.SlideOut li:hover ul, ul.SlideOut li.over ul
{ display: block }


* html ul li { float: left;
height: 1% }

* html ul li a { height: 1% }

Strange, the post editor keeps snipping my first comment which says:

Based on Nick Rigby's Code from A List Apart

I removed a few of the redundancies, wherever they came from. The JavaScript should still do its job, but I haven't tried it yet.

[JackWolfgang]

Two things:


I was unable to get this to work in IE6. (Of course, the A List Apart Version worked, but I don't know why mine did not.).
The JavaScript to make this work in IE6 effectively locks out people who have JavaScript disabled (either by choice or by IT policy). You will want to provide an alternative for those with JavaScript turned off, most likely by using the NOSCRIPT tag.
It does work in IE7 & Firefox, because both recognize the :hover pseudoclass for the li tag.

[Websquad]

Thanks so much for your efforts!

I tired it in Firefox, Netscape, and Opera, and it worked correctly in all three. I also tried it in MSIE 6 and MSIE 7, and it would not work in either.

I've created a test page. Since I don't want spiders and crawlers to link to one of my two test domains, I will not provide a clickable link:

websquad [dot] biz [slash] menu [slash]

In MSIE (6 or 7):
* the slide-out does not work
* the three item UL does not work


Any ideas ??

[JackWolfgang]

Thanks so much for your efforts!

You're welcome!

Any ideas ??

You could use the new conditional code that Microsoft implemented into IE to do an alternate stylesheet for the nested menu.

This page talks about conditional comments: http://www.positioniseverything.net/articles/ie7-dehacker.html

The following Microsoft page describes it, but it is an older document:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

The following blog entry from the IE team also talks about them:
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

[JackWolfgang]

OK, disregard that last post for a minute, I see problems.

The page you linked does not validate.

Validation problems:

You self closed the META tag. In HTML 4.01, tags don't need to be and shouldn't be self-closed.

Self-Closed (not correct in HTML 4.01):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Correct HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Your closing H3 tag is doubled up.
<h3>This menu should have 4 items;
the last 3 should have slide-out submenus</h3></h3>


OK, I fixed the HTML errors and uploaded it to my server. No dice. I wonder if it's a problem with the stylesheet not being external. It seems weird, but IE has all kinds of quirks, so I wouldn't put this one past it either. However, that's not it either.

Perhaps it's an HTML 4 vs. XHTML 1 thing. I put my page together as XHTML. However, in Firefox, your page is working fine for me.

Something strange is going on in IE, however, there is no reason for the second list to be styled block. It's a list without a class slelector, so it should not display as block.

[Websquad]

I applied your fixes (I know how the h3 double closure crept in, but not the self-closing Meta tag) ... I added the two standard validation links that I use during development (I should have thought of that earlier), and CSS validates also (was their every any doubt) ....

With the CSS hack you pointed me to, this would make overriding the CSS that works for Mozilla-based browsers very easy ...

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->It is interesting to note that the example page:
http://www.alistapart.com/d/horizdropdowns/horizontal.htm
actually works with MSIE 6. So, I thought that the issue may be that I really need transitional XHTML 1.0 as a minimum ... I'm working on that using index2.html in the previously cited subdirectory .... debugging as we speak ...

As it is, the mouse over events work, but the slide outs do not; also, the global issue with the Link Items is still messed up.

[Websquad]

It now validates XHTML 1.0 ... no change: works in Mozilla, doesn't work in MSIE. :confused:

[JackWolfgang]

As it is, the mouse over events work, but the slide outs do not; also, the global issue with the Link Items is still messed up.

I've been using unordered lists as menus for a while now, and my lists aren't messed up in MSIE. So I looked, and the menu lists are using an ID tag. I wonder if that would change things in this case, but I am not sure it will since I use class-based unordered list with the list types changed, and it doesn't change my normal lists either.

[JackWolfgang]

I'm working on that using index2.html in the previously cited subdirectory .... debugging as we speak ...

I like the color choices here.

[JackWolfgang]

It now validates XHTML 1.0 ... no change: works in Mozilla, doesn't work in MSIE. :confused:

It works for me in MSIE 7, but not MSIE 6.

[Websquad]

I didn't try index2.html in MSIE 7 (which wasn't on-line when I last tested) ... confirming: it works in 7, but not 6. Maybe the secret is on the hack page,

http://www.positioniseverything.net/articles/ie7-dehacker.html

Gotta shut down for the evening ... thanks for your help, Jack. :)

[Websquad]

Another possible resource I found (before I'm off the dream land, where everything works as it ought to) .... the previously cited "CSS Hacks and IE7" page led me to their home page, http://www.positioniseverything.net/, which lead me a page on "Delux CSS Dropdowns and Flyouts", a page of hacks to make flyouts work in MSIE 6 ....

http://www.positioniseverything.net/css-dropdowns.html

Some more reading for tomorrow ....

[JackWolfgang]

Another possible resource I found (before I'm off the dream land, where everything works as it ought to) .... the previously cited "CSS Hacks and IE7" page led me to their home page, http://www.positioniseverything.net/, which lead me a page on "Delux CSS Dropdowns and Flyouts", a page of hacks to make flyouts work in MSIE 6 ....

http://www.positioniseverything.net/css-dropdowns.html

Some more reading for tomorrow ....

This might be better for you:

http://www.positioniseverything.net/css-flyout.html

[Websquad]

This might be better for you:
http://www.positioniseverything.net/css-flyout.html
The Position is Everything page has some nice stuff; however, implementing it as-is would require that every UL and LI have a class assigned, and I've found that in updating pages in the heat of the battle, that is just not practical. One of the two co owners of that site responded to my query:
Bob, we made that page as a demo of the method. We deliberately avoided the sort of detailed construction you mention because the idea was to let others handle such things on a case by case basis. Other coders have put up highly refined versions of the method, and we are happy to let them do that. Frankly we are primarily CSS theorists.He recommended the following site:
http://webhost.bridgew.edu/etribou/layouts/
I'm going to give their "Skidoo Redux" menu a try ... I'll let you know how it goes ....

[Websquad]

I'll end this thread here, unless someone has something else to offer. It seems that, at first glance, the "Skidoo Redux" script is going to do the job. An added bonus (for some) is that it is HTML 4.01, not XML, so that may make the coding a little easier.

Many thanks to Jack for his effort ... he put me on the right trail!

Here's the link:

http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/index.html

I dropped this down into my HTML editor, and added a simple non-qualifed (no classes, no ID) unordered list ... and it worked, in the following platforms:
HTMLPad 2006 (a wonderful HTML editor with browser, works great with dual monitors, which is my setup, and has fast FTP update of your code on the server). Highly recommended.
Latest FireFox
Latest Netscape
Latest Opera
MSIE 6
MSIE 7If you are interested, when you get to the skidoo-redux web pages, those indexes work (try the "Demos - Two Columns" menu), and I've found that they lead you to meaningful examples, such as a two column example.

The authors have placed their efforts in the public domain, so enjoy! :D

[JackWolfgang]

Many thanks to Jack for his effort ... he put me on the right trail!

You're welcome, Bob!

[JackWolfgang]

This might be better for you:
http://www.positioniseverything.net/css-flyout.html
The Position is Everything page has some nice stuff; however, implementing it as-is would require that every UL and LI have a class assigned

Bob--I wonder if the number of classes on that was due to the different background colors.

Bob, we made that page as a demo of the method. We deliberately avoided the sort of detailed construction you mention because the idea was to let others handle such things on a case by case basis. Other coders have put up highly refined versions of the method, and we are happy to let them do that. Frankly we are primarily CSS theorists.He recommended the following site:
http://webhost.bridgew.edu/etribou/layouts/
I'm going to give their "Skidoo Redux" menu a try ... I'll let you know how it goes ....

Bob, that looks interesting, but it looks more like a whole page solution.

[David Gillaspey]

Hi guys,

Sorry to join this thread so late.

Earlier in the week, I was desperately trying to prepare for yesterday's final class of my intro to interactive media class (at art school). The assignment was to redesign a home page, so I chose my own website (Great Church Websites). I wanted to add dropdown (or slideout) menus, among other changes.

http://www.dynamicdrive.com/ offers many scripts, including scripts for menus. I tried one Javascript based script downloaded from the site on Tuesday, but ended up wasting three hours when I couldn't get it to work. I went back to Google and found and downloaded a script from http://www.smartmenus.org that worked with some configuring. The result can be seen here:

http://www.greatchurchwebsites.org/index_IMD.php

Don't focus too much on the look of the menu -- everything can be changed in the configuration file for the script.

(The links on the left are dummy links.)

When I transition my site to the Drupal content management system soon, I'll use its built-in menu creation feature, so I won't be doing any more work on the demo site.

Sincerely,

David Gillaspey
President
Great Church Websites

[Websquad]

Thanks for the input, David.

I've just about come to the opinion that CSS and JavaScript alone may be too unstable to work in the world of conflicting CSS specifications on the various Mozilla and Microsoft platforms. I thought I had a solution and was just about to write a concluding note to this thread on your forum when I decided to test version 6 of my prototype ... it worked well in in the Mozilla platforms, but totally ignored a center spec in the body specification under MSIE 6 and 7.

One thing I just discovered today - the developer of my version 6 menu noted that "IE/Mac needs whitespace before <UL> and </UL> tags in the markup otherwise very odd things can happen" ... and I spent all that time making the format look "right" (at least to my eyes).

So, David, I'll beat a hasty retreat and give a PHP solution a try ... at least with PHP, you can have includes that you get with SSI, and there isn't a place on any of my five browsers where you can, as far as I can tell, turn PHP off the way you can turn JavaScript off.

I'll be in touch ... thanks again for the input!:)

[David Gillaspey]

"IE/Mac needs whitespace before <UL> and </UL> tags in the markup otherwise very odd things can happen" Hi Bob,

The instructions for the script I installed happen to also mention the need to put white space after the list tags (for any browser), so there must be some truth to this.

I'm not sure why you mention PHP. I do use PHP on my site, but not necessarily in connection with a dropdown or slideout menu (though PHP could be used to dynamically supply the content of menus). The script I used on the demo site, that worked, is based on a CSS-styled list (I neglected to mention that). The problem I still have with horizontally laid out CSS menus (typically based on lists) is they don't naturally fill the available space, something that is easy to accomplish with tables and cells.

Sincerely,

David Gillaspey
President
Great Church Websites

[Websquad]

I was just getting ready to post what I've found when your latest post popped up.

(1) I don't know where PHP came into my mind, but obviously it is not needed

(2) Only two support files apparently are required for the menu to work:
c_config.js
c_smartmenus.js(3) Smartmenu (http://www.smartmenus.org/) is licensed software; however, the non-commercial license is free.

(4) I had it working in about 10 minutes using HTMLPad2006.

(5) Still have more testing to do .... thanks, David !!

[David Gillaspey]

You're welcome.

Sincerely,

David Gillaspey

[JackWolfgang]

http://www.dynamicdrive.com/ offers many scripts, including scripts for menus. I tried one Javascript based script downloaded from the site on Tuesday, but ended up wasting three hours when I couldn't get it to work. I went back to Google and found and downloaded a script from http://www.smartmenus.org that worked with some configuring. The result can be seen here:

http://www.greatchurchwebsites.org/index_IMD.php

The problem with those menus, like Bob states above, is that the user (or the IT department) can turn off JavaScript or their browser may not be equipped with JavaScript. Then the drop-down menus fail. (in David's example, that would the Database, Directories, and Archive menus).

This is why I suggested a pure CSS solution, but IE's lack of standards compliance makes this difficult.

Therefore, my final recommendation would be that you make sure that users can access all areas of the site with JavaScript turned off (in all browsers). The easiest way to do this is use Chris Pederick's Web Developer Toolbar (http://chrispederick.com/work/webdeveloper/) in Firefox and Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en) for Internet Explorer.

[Websquad]

The problem with those menus, like Bob states above, is that the user (or the IT department) can turn off JavaScript or their browser may not be equipped with JavaScript. Then the drop-down menus fail. (in David's example, that would the Database, Directories, and Archive menus).
Jack, JavaScript has been at the heart of every expanding menu I've evaluated. Do you know of a non-JavaScript solution?

[JackWolfgang]

The problem with those menus, like Bob states above, is that the user (or the IT department) can turn off JavaScript or their browser may not be equipped with JavaScript. Then the drop-down menus fail. (in David's example, that would the Database, Directories, and Archive menus).
Jack, JavaScript has been at the heart of every expanding menu I've evaluated. Do you know of a non-JavaScript solution?

The closest thing is the CSS-based ones that we tried earlier in the thread.

So, since the answer is no, you need to ensure two things:


The root nodes (the items that cause flyouts) must be real links to real pages. They cannot be a javascript link.
The pages that the root nodes link to must have the links for the child pages on them.


Or, you can provide a <noscript></noscript> alternative menu that displays all the nodes (probably in a nested list, like above) and style it similarly to the flyout menu.

[tmreg]

I am much less patient than these guys, but needed a slide out menu also. I found that the menu offered at http://deluxe-menu.com/ was the easiest solution for me. It was $40 for the license or $100 for a multi-site license but is saved me far more time than that. I have them set up at my church site http://churchthatcares.org and at another ministry site http://churchdr.org as well as my personal site http://xoops.mattregister.com . It saved me alot of time. this thing can do horizontal and vertical, multi tiered menus with search engine friendly code.

[JackWolfgang]

I just found this, a pure CSS, no JavaScript flyout menu.

http://www.cssplay.co.uk/menus/flyoutt.html

[StubbyD]

I just found this, a pure CSS, no JavaScript flyout menu.

http://www.cssplay.co.uk/menus/flyoutt.html

Top find sir - because I really wanted a horizontal one for my personal website and I couldn't work out how to do it. Now I can crib :)

There are loads of examples for multi-level vertical ones, and almost as many for horizontal with a single drop down, but not multi-level.

[JackWolfgang]

I just found this, a pure CSS, no JavaScript flyout menu.

http://www.cssplay.co.uk/menus/flyoutt.html

Top find sir - because I really wanted a horizontal one for my personal website and I couldn't work out how to do it. Now I can crib :)

There are loads of examples for multi-level vertical ones, and almost as many for horizontal with a single drop down, but not multi-level.

Horizontal, like this one from the same site: http://www.cssplay.co.uk/menus/dd_valid.html

[StubbyD]

Horizontal, like this one from the same site: http://www.cssplay.co.uk/menus/dd_valid.html

Yeah - spotted that one after I'd already commented. :)