Active menu on creationtheory.org

[Darth Wong]

I'm playing around with an active popup menu on creationtheory.org. You can see it at http://www.creationtheory.org by dragging your mouse over the menu picks on the left-hand side of the screen.

I've only tested it in Firefox so far, but any technical problems with other browsers could be worked out over time, so that's not really the issue here. The questions are:

1) Does it look retarded?
2) If so, should it be improved, or discarded?
3) If it should be improved, do you have any ideas?

EDIT: Link changed. I decided the site was ready for public viewing so I moved it from its temporary location to the "live" location.

[Superman]

1) Does it look retarded?
2) If so, should it be improved, or discarded?
3) If it should be improved, do you have any ideas?

I think that's pretty damn impressive. I've played around with building websites, and it's not easy. The menu looks good and adds style.

[rhoenix]

Holy shit.

Not to be called a suckup or anything, but that's damn impressive.

I don't have IE, as I'm on a Mac, but it works just fine on Opera, and Mozilla (Camino & Firefox) on my Mac laptop.

[Darth Wong]

I think that's pretty damn impressive. I've played around with building websites, and it's not easy.

It's actually just a few CSS entries, if you can believe it. If you look at the stylesheet at http://www.stardestroyer.net/Creationism-New/style.css and check out every entry with #nav in it, that's the entire code to make it work. Other than that, it's just a bunch of list items. I'm sure Starglider could whip up something like that in 5 minutes while half-blind and nursing a hangover.

[rhoenix]

Thank you - I hope you don't mind, but I'm going to save that code snippet. I don't manage websites anymore, but you never know.

[Jericho Kross]

Looks good.

[Darmalus]

I like it. The only way I could think to improve it would be to have the window that pops up farther over to the right so it doesn't overlap the other topics.

[Zeond]

The menu looks good and works fine. Perhaps it could be improved by adding a second submenu straight to the subpages.

I also found a typo in this page

The RC church never even
excommunicated Hitler, nor did they add his "Mein
Kampf" to their long list of banned books! In fact, Pope Pius
XII himself ordered church officials in Berlin to send
"warmest congratulations" to Hitler on his birthday every
year, as shown in the picture at right of Archbiship Cesare
Orsenigo and Hitler on April 20, 1939.

That should be archbishop and the picture is on the left.

It also works in IE7.

[andrewgpaul]

It works in IE7, although the pop-up boxes go under the Recent Forum Discussion Topics box and the Google search box. Most wierd.

[Dooey Jo]

I can say without testing that it will not work in IE6 (but I did test it anyway, and it really doesn't work), because you're using the :hover pseudo-class on a LI-element, but IE6 only supports it for A-elements.

I have a Javascript that can partially fix it (but only for the elements you tell it to), so you don't have to mangle your CSS with expressions and IE-only stuff (which seem to be a bit dodgy anyway), but it could potentially interfere with other scripts, if they are using the "onload" event. (You could of course also put this code in an external JS file)

Code: Select all

<!--[if lt IE 7]>
<script type="text/javascript">
startList = function() {
	var navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		var node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
			node.onmouseover=function() {
				this.className+=" over";
			}
			node.onmouseout=function() {
				this.className=this.className.replace(" over", "");
			}
		}
	}
}

window.onload = startList;
</script>
<![endif-->

Also, add the "over" class to the CSS.

Code: Select all

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

[Dooey Jo]

Ghetto edit: And of course, that "endif" should be enclosed in square brackets; [endif]
(even though it works anyway)

[Twoyboy]

Works fine for me in IE7. Pretty ugly though. I know being and engineer I'm suppose to value practicality over aesthetics, but the audience you're trying to get across to if more of the "look at the pretty flashing lights" type.

At the minimum, if you could make the pop up menu not go over the topics, as mentioned above, it would help heaps.

[Majin Gojira]

Nicely done. Rather plain, but nicely done.

[salm]

1) Does it look retarded?

It looks fine

2) If so, should it be improved, or discarded?

Personally i´m no fan of popup menus like this but if you want to keep it i suggest increasing the "hitbox". I just tried this out and often when i wanted to click a subcategory in the popup box i missed the box while moving the mouse downwards and the popup would go away. That is very annoying.

3) If it should be improved, do you have any ideas?

For menus with many subcategories, like the hatemail menu i suggest making them two columns wide. The menu goes further than the screen and if i scroll down with the scroll wheel it often happens that it scrolls too far and the cursor leaves the popup making the menu disappear which is rather annoying as well.

[Darth Wong]

OK, I've tweaked it a bit.

[RogueIce]

Is it possible to not have it run off the side of the page like that? Or is that something which just can't be changed?

I did click refresh but I couldn't spot any differences in what you "tweaked" or not. And I'm one of the unwashed masses using IE6, so...

[RogueIce]

Is it possible to not have it run off the side of the page like that? Or is that something which just can't be changed?

I did click refresh but I couldn't spot any differences in what you "tweaked" or not. And I'm one of the unwashed masses using IE6, so...

Also, is there a way to put in something like this doohickey | to give some seperation between the various links? On the Hatmail especially it seems to run together a lot.

[Darth Wong]

Is it possible to not have it run off the side of the page like that? Or is that something which just can't be changed?

I did click refresh but I couldn't spot any differences in what you "tweaked" or not. And I'm one of the unwashed masses using IE6, so...

I honestly have no idea what it looks like on IE6, because I don't have a copy of IE6. That's one of the reasons I keep asking people for feedback.

[drachefly]

Looks great, and it works fine under Safari as well.

[RogueIce]

I honestly have no idea what it looks like on IE6, because I don't have a copy of IE6. That's one of the reasons I keep asking people for feedback.

Essentially, top get to the end of the Hatemail links, it runs so far off to the side that none of the regular page is there anymore.

Image

It looks like crap but that's how far it runs off the page. Nothing but the backgound out there.

[RogueIce]

It looks like crap but that's how far it runs off the page. Nothing but the backgound out there.

I should point out, the crappiness of the text is due to my rather lazy approach to make it fit the 800x600 limits of Photobucket. The text itself looks fine when browsing.

[Darth Wong]

OK, I tried tweaking it again, just for IE6. Any change?

[Melchior]

The "Hate Mail" list only entirely fits in the screen at very high resolutions; scrolling to see it work, anyway.

[Darth Wong]

The "Hate Mail" list only entirely fits in the screen at very high resolutions; scrolling to see it work, anyway.

Are all the lists arranged horizontally instead of vertically? What does the left-hand side of the screen look like in IE6?

[Melchior]

The "Hate Mail" list only entirely fits in the screen at very high resolutions; scrolling to see it works, anyway.

Sorry, should read like this.
The only problem I seem to have with IE6 is that pop-up lists are visualized under the "Recent discussion forum topics" zone.