IT geeks: Assistance needed

[danaeris]

EDIT: I was wrong, folks! What they actually want is a situation where you click on the item you want, and it drops down a menu (so not when you mouseover). When you select an option that opens a different page rather than another level of the menu tree, the above section of the tree should still be visible. You can see some really ugly implementations of this which fail to highlight for the most part here:
http://www.imint.com

Then select iSlide, and look at the same menus linked to in the bottom right hand menu.

The old post:
Basically, I want to know if this is possible. The guy we have who handles this stuff says it can't be done, and I'm skeptical. An example website which does it exactly this way would do the trick too...

It has to do with navigation. The idea is a menu bar down the left side of the page.

As you run your mouse over it, it is highlighted and the subcategories come sliding out from underneath expanding the entire menu downward (so, not sticking out the side).

Then, if you click on one of those options, that information will load in the browsing section of the page, and the menu bar will stay with that drop down menu open, and the category AND subcategory selected highlighted to indicate where you are.

The following links are close but no cigar:
http://www.diabetes.org/home.jsp
http://www.aphanet.org/
http://www.aaa.com

Anyone know if this can be done, and if so, what type of leet coding needs to be done to make it work?

Comments

[epicureanangel.livejournal.com]

Sounds like javascript *might* do the trick. If someone else gives you an answer.. cool... because i don't actually have webspace to work on right now...

[etherlad.livejournal.com]

Yes, it can be done. However, I can't think of a way to "keep" the menu bar when loading a new page.

It would be a simple matter to load a new menu, though, which looks exactly the same as the original, except the new one has the subcategory automatically highlighted.

It'd be Javascript, or CSS, or both.

[curgoth]

Having spent some time 6 months ago trying to make a left-hand menu *not* shift down on mouseover, I can guarantee you that that part can be done.

In all, I am 98% certain that it can be done with a combination of javascript and CSS, though making it work in all browsers will be a headache, because IE is b0rken badly.

[guru-pixel.livejournal.com]

Totally possible. Ansuming I understand your question correctly you can use something just like the code found at http://www.tutorio.com/tutorial/javascript-expanding-menu

In order to have the menu retain it's current state from one page to the next you will need to add some extra code to the example above that checks for a cookie value stating which menu to expand.

The following is just an example of how to use cookies to store the information needed.

function setMenuState(menuItem)
{
if(menuItem)
{
var expdate = new Date ();

//This cookie will expire after 180 days. Adjust accordingly.
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 180));
setCookie("menuState", menuItem, expdate);
}
}

And then you would simply need to call setMenuState() everytime a top-level menu item is clicked.

And you can use the following to get that state back on each page:

function getMenuState()
{
var menuState = getCookie("menuState");

if(menuState)
{
.....set the menu to expand here.....
}
}


That should give you enough to get you going. Obviously the example isn't the sexiest menu ever but the whole point is to personalize it.

NOTE: The code found above is done freehand and hasn't been tested so it may contain errors/browser compatibility issues. If all else fails. www.w3schools.org is your best friend.

Hope this helps.

[tunape.livejournal.com]

ooh, on a related note, would you also know how to rotate images, but also grab the appropriate caption for the image, in a static html page? It can call a script, but how would you insert the text?

eg, img src="myscript.php?randomimage", but then in another part of the page grab the correct text to be inserted into a div section?

[guru-pixel.livejournal.com]

Sorry. By rotate you mean display a random image on each page refresh?

[tunape.livejournal.com]

yes, load up a random image on each page refresh, with the appropriate caption.

but I think that can be achieved with an array of images, and an array mapping the images to the caption. All can be done in javascript.

[guru-pixel.livejournal.com]

You can also the cheap route and have the menu in a frame/iframe. Means you don't have to worry about cookies but makes it way less cool (and good luck getting it work in a browsers/display sizes).

[tunape.livejournal.com]

oops, nevermind. I just do the randomization in javascript rather than in a separate script. silly me.

[tunape.livejournal.com]

I'd do with two approaches:

1) cookies, yummy.

2) preload pages such as that clicking on the menu only switches the proper page from invisible to visible.

[beowabbit]

You can do that with a combination of Javascript and CSS. That would not work for people who have (very reasonably) turned off JavaScript, or who don't have browsers that support JavaScript, nor for people on browsers that don't support CSS. It would also probably be a bear to get working with both IE on the one hand (which has a somewhat broken implementation of CSS) and other browsers (which have better CSS implementations but may have trouble with the kludges you need to do to make IE work).

That said, people do do stuff like this. And it's possible to make it degrade reasonably in the absence of JavaScript and/or CSS (eg, instead of changing the page you're looking at, the links actually go to a new page with the menu expanded or with the content loaded on the right).

Personally, I think the expanding menu would be a little disconcerting to use, but it ought to be possible to do.

(DISCLAIMER: I have done nothing with JavaScript, ever. I just pick up some stuff by osmosis.)

You might be interested in Designing with JavaScript, and maybe also Cascading Style Sheets: The Definitive Guide for this project.

[aberrantvirtue.livejournal.com]

Are there actually non-CSS compliant browsers? *gasp* ;)

[beowabbit]

Are there actually non-CSS compliant browsers? *gasp* ;)

Well, there's the one in my phone, and there's the one in my PDA, and there's lynx, which some of my blind friends use with screen readers, and there's the Google cache, and there's my little script that archives my LiveJournal posts, and...

:-)

[aberrantvirtue.livejournal.com]

Hence my winky face. :)

(I use Lynx a lot when I don't need the pictures. Makes things faster.)

[ericsilverbear.livejournal.com]

What your talking about is basic DHTML, which as mentioned elsewhere in comments is a combination of JavaScript and CSS... In essense, you have the Sub-Menu notated as invisable until you put the curson over the subject head.

This is called an OnMouseOver EVENT.

Basically, OnMouseOver turn on the visibility of the sub menu. OnMouseOut, turn it back off. Persistance is set when each pages menu knows which page it is on and always shows that sub menu.