Check out my navigation bar

A link to a preview without having to download first would be useful.

Yeah I know, sorry. I don't really have a webhost right now.

Here's a screenshot though:

It looks crappy because the icons I used were crappy.

well I'm a n00b but thats pretty cool. Like the fact that there no nasty Java Script *shudders* i spoke its name >.<

Again, I must ask what is the giant problem everyone has with javascript?

I'm not exactly thrilled about downloading, uncompressing, opening it in a browser and then testing when I should only have to click a link to the site in the first place.

Same thing happens in Safari.

It looks a feth load more complicated, thats enough to put me off, thats about my only beef with it

lol d00d you make it sound like SUCH a chore =P

My philosophy is "if you want my free help you better make it easy to help you".

Okay got a free host and put the files up.

Try it out here: http://www.499angels.net/theantidote/macbar/

Try it out here: http://www.499angels.net/theantidote/macbar/You are going to want to add shifting in Safari to the bugs box.

Oh yeah thanks. I'm just curious, if you remove the _margin-left: -.7em from code (under ul a:hover img) does it work fine? I think Safari is just reading through the underscore.

There's no images in your navbar.

Clear your cache and reload.

Some tips to get yours looking better.

- Use large icons and shrink them for normal viewing. Don't go above the full-size on hover.
- Eliminate whitespace
- Change the padding or margins on the <a> element not on the image.
- Use font-size to persuade IE to behave.
- Use pixel sizes if at all possible to avoid browser rounding issues.

See example

Of course it can be done even better in javascript.

Clear your cache and reload.

Not being funny, but why would I have to clear the cache to view images on a page I've never visited before? Regardless, it didn't work. :? I can see the images on Chris' example fine though.

A couple of nits to pick:

• Add some title attributes with appropriate text, or add captions. Mystery meat links are a PITA.

You might reconsider using ems for the image sizing. It does not hold up well to font resizing. I'd go with px.

Remove the xml prolog/declaration. It is optional in xhtml if xml 1.0 and utf-8 or utf-16 are used, is unneeded for xml and is superfluous for html.

The prolog throws IE6 into quirks mode, which may be the cause of your shift.

XHTML 1.1 should be served as application/xhtml+xml, a MIME type that causes IE to vapor lock. Use the xhtml 1.0 DTD.

Otherwise, improve the image quality, and you have a nice little enhancement.
=========
Chris: You're being facetious, right? The javascript example is cute in a teeny bopper, crazy for boy bands, mall rat kinda way, but it gets really annoying really quickly. The effect is cool, just don't use it on a site I might visit.

cheers,

gary

[/]

The OP mentioned the OSX nav bar. The javascript* mimics the "fisheye" magnification effect of that nav bar pretty accurately (at least as far as I remember it).

I don't have any sites using it - but if someone's willing to pay to have it added to their site ...

Like you mentioned, the key I think is using images that are atleast as large as the "expanded" on hover side. If you use smaller images they will look pixelated on hover and ruin the effect.

The CSS version isn't too bad an effect, but I reckon requires too much spacing to look good. Maybe it would be ok with some javascript added to cinch up the spacing on the other images while still keeping the hovered image under the cursor. But that kind of defeats the purpose of it being CSS.

(*) The javascript is nothing to do with me but part of the Dojo Toolkit.

Which I still do not understand. To me this is behavior and belongs to the DOM.

The behaviour layer - yes.

Yes, yes!

Yes, yes yes!

You're starting to sound like Meg Ryan...

Either Meg Ryan or the Three Stooges. Which stooge am I?

Back on topic.

Here are three examples, one as before, one entirely with javascript and one entirely with :hover.

Some questions:

- to get vertical-align:center to work without changing the height of the containing ul element, I needed to use:

vertical-align: top; on either the <li> or the <a> and then vertical-align: middle; on the <img>. This leaves excess space at the top of the line box and ends up with a line box about 25% larger than the line-height (I put a border around one <li> element to show what I mean). Can anyone explain what is happening here?

- the javascript doesn't work in Opera (it seems like my javascript never does). Can anyone give any clues as to why?

Chris,

Have you tried wrapping each function in an if interogative with an alert on failure?

cheers,

gary

I hadn't, only having used tracing style alerts, but I did and its now fixed. Opera didn't like my IE normalisation code.

So thanks!

Anyways, who needs javascript. A cross-browser (windows ones anyway) friendly version. Hack free, doesn't require whatever:hover, don't use with pngbehaviour.htc

.menu {
  list-style: none;
	padding: 1em;	

/* to centre */
  margin: 1em auto;
	width: 24em;            /* <number of buttons> * <width of buttons in normal state> */
}

.menu:after {
  content: '.';
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

.menu li {
  float: left;
}

.menu li a {
  display: block;
	position: relative;
	width: 3em;
	height: 3em;
	z-index: 1;
}

.menu li a img {
  display: block;
	width: 100%;
	border: none;
}

.menu li a:hover {
  z-index: 2;
	background: white;  /* required by IE to trigger :hover changes */
}

.menu li a:hover img {
  position:absolute;
	width: 200%;       /* set this to any value higher than 100% */
	top: -50%;         /* set to (width - 100%)/2 */
	left: -50%;        /* ditto */
}

example

Fails in Safari.

Gotta screenie? Or more details?

Do any of the other ones work?

Do any of the other ones work?Yeah, sorry. Was on the way out the door.

The icons expand upon mouseover but they stay that way.

The others work fine (308a) but the bottom two are half obscured. See attachment. Is that intentional?

No, not intentional. I was using overflow:hidden to force the <ul> element to surround the <li> elements. Presumably safari doesn't like some part of that. I've changed to use clearfix (308b already was using that), its a better solution as it works with position:absolute better and allows me to even up the padding with IE and its expanding height model.

So, please try now.

Its odd with Safari and the elements not coming out of :hover state. There's not so much difference between 308a (li:hover) and 308b. The :hover changes are over two elements rather than three and instead of line-height, vertical-align and display: inline, its now display: block. I guess somehow, Safari loses track of the mouseout on the <a> element now that its completely overlaid by the larger <img> element.

Probably. The others are fine now with clearfix.