FreeGameDev

Hi,

I'm working on a unified navigation bar for freegamedev.net

http://qubodup.net/lists/

I need two more things done:
1. make clicks outside the "more"-opened menu close the menu. A solution could probably be found with the help of http://stackoverflow.com/questions/3761 ... -catch-all
2. make clicking "more" not add "#" to the url without removoving the href or adding javascript to the href. (no idea how to do this).

I basically want to simulate the "more" link behavior of http://google.com

If somebody could fix this I would be much obliged.

here we go:
http://pastebin.com/xGjzXaWK
1. fixed: see the code above;
2. what if we change the <a> into something else like a <button> adapting the code for this?

I've removed the " var menuIsOpen=false;" because was never used in the code.

(tested with firefox and cromium)

Why should a JavaScript-less page rely only on JavaScript at the navigation bar? You don't need anywhere on FGD JavaScript, so why are you forcing people now to activate it?
That's a bit weird IMO. Isn't a CSS-only solution enough?

madbad: many thanks!

sam350 of #javascript helped with the "disable the link when js is on" using return false;

http://qubodup.net/lists/

what do you think?

I wonder how we could make this less google-ish. but there is really no other color scheme that would be good.

Crendgrim: there's no css-only solution that is aesthetically good. #2 of my problem was for js-less browsers. it requires js-less users to visit one more page and click a link there however.

qubodup {l Wrote}:I wonder how we could make this less google-ish. but there is really no other color scheme that would be good.

A week ago, I would have said "Orange-Grey-Black". Curse you, Google...
Another option might be white-light grey-dark grey.

Or you could keep the color scheme, but make the overall appearance less google-like. For example, highlight the text instead of the background on hover etc.

Just to throw it out there, here is my heavily altered version. Visually it's very similar, but if you look at the source code you'll see it's quite different.

I've added a doctype (plus the IE shim) for HTML5, removed all those spans/ul/li (they just aren't needed), and so re-implemented your menu. The menu is CSS based, and works without javascript. If you do have Javascript enabled then you'll get an added fade. I was working on a noscript fade version working using CSS transitions, however a bug in regards to it making the menu un-selectable when faded out stopped it's usage (but I'm fairly certain it's possible if I had of beat my head against it for another hour). I also leveraged the child selector over the all selector (i.e. 'foo > bar' rather then 'foo bar') as the CSS renders faster and it significantly speeds up jQuery animations.

I also found yours did not work in IE 9; mine is tested and works in FireFox, Chrome, IE 7 through 9 on Windows. It does not support IE 6, although probably would if you removed the >'s from the CSS. The menu fades also don't work in IE 8 and below; it needs some jQuery tinkering to fix this.

I've also moved scripts to the bottom (for faster rendering), added a CSS reset, now retrieve jQuery from Google (for faster page download and to leverage better caching), added utf8 at the top (speeds up rendering in old IEs) and added some other parts like the role for the main div. All of those are taken from HTML5 Boilerplate.

I hope that helps!

@StudioFortress
There's some sort of bug.
if you go in and out quickly repeatedly on the "more" menu at some point the menu no longer appears (or at least is no longer visible but seems to be clickable).
Not sure if is a bug in your code or in firefox5.

madbad: No, it's not a bug in FF. I can reproduce it with Firefox, Konqueror (KTHML engine) and rekonq (WebKit).

StudioFortress: this is amazing work.

Menus that expand on mouse-over are an annoyance that I would like to avoid though.
I'll have to fix the js menu for ie then.

The bug is probably a bug in my code. It's probably probably getting into a bad state somehow with both fade in/out being called in line with the other.

To change the menu to click in/out, you could just change the two hover functions to be bound to a 'document.click', and pick which one to run depending on if 'menu.is(':visible')' and if the mouse is clicked inside of the function (which you can check with the 'isInElement' function). If I get time, then I might do that myself and upload the changes (but note the 'if').