Hi everyone. I was hoping you could check out my navigation bar. It's styled after the OS X Dock and uses no javascript, all CSS! I don't think I've seen anything like it so far on the internet. I'd like to know if it works for you, especially if you have an older version of IE, current Opera, or Safari.
Try it out here: http://www.499angels.net/theantidote/macbar/
You can download the example and source here: http://www.4shared.com/file/744013/b4faa478/cupertino_navbar.html
I call it the Cupertino Navbar cause Apple is based in Cupertino, CA. Also if you've ever used Linux with KDE/Gnome you'll know that the Windows look-a-like theme is called Redmond.
For more information about it see the blog in my sig.
Check out my navigation bar
A link to a preview without having to download first would be useful.
Check out my navigation bar
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.
Check out my navigation bar
well I'm a n00b but thats pretty cool. Like the fact that there no nasty Java Script *shudders* i spoke its name >.<
Check out my navigation bar
well I'm a n00b but thats pretty cool. Like the fact that there no nasty Java Script *shudders* i spoke its name >.<
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.
Check out my navigation bar
In IE6 it shifts to the right a tiny bit when hovering
Same thing happens in Safari.
Check out my navigation bar
It looks a feth load more complicated, thats enough to put me off, thats about my only beef with it
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.
lol d00d you make it sound like SUCH a chore =P
Check out my navigation bar
lol d00d you make it sound like SUCH a chore =P
Check out my navigation bar
Okay got a free host and put the files up.
Try it out here: http://www.499angels.net/theantidote/macbar/
Check out my navigation bar
Okay got a free host and put the files up.
Try it out here: http://www.499angels.net/theantidote/macbar/You are going to want to add shifting in Safari to the bugs box.
Check out my navigation bar
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.
Check out my navigation bar
http://www.499angels.net/theantidote/macbar/
There's no images in your navbar.
Check out my navigation bar
theantidote wrote:http://www.499angels.net/theantidote/macbar/
There's no images in your navbar.
Clear your cache and reload.
Check out my navigation bar
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.
Check out my navigation bar
Tyssen wrote:theantidote wrote:http://www.499angels.net/theantidote/macbar/
There's no images in your navbar.
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.
Check out my navigation bar
A couple of nits to pick:
- Add some title attributes with appropriate text, or add captions. Mystery meat links are a PITA.
=========
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.


cheers,
gary
[/]Check out my navigation bar
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.
Check out my navigation bar
... But that kind of defeats the purpose of it being CSS. ...
Check out my navigation bar
The behaviour layer - yes.
Check out my navigation bar
The behaviour layer - yes.
Check out my navigation bar
Yes, yes yes!
Check out my navigation bar
You're starting to sound like Meg Ryan...
Check out my navigation bar
Either Meg Ryan or the Three Stooges. Which stooge am I?
Check out my navigation bar
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?
Check out my navigation bar
Chris,
Have you tried wrapping each function in an if interogative with an alert on failure?
cheers,
gary
Check out my navigation bar
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!
Check out my navigation bar
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 */ }
Check out my navigation bar
Anyways, who needs javascript. A cross-browser (windows ones anyway) friendly version. Hack free, doesn't require whatever:hover, don't use with pngbehaviour.htcexample
Check out my navigation bar
Gotta screenie? Or more details?
Do any of the other ones work?
Check out my navigation bar
Gotta screenie? Or more details?
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?
Check out my navigation bar
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.
Check out my navigation bar
I guess somehow, Safari loses track of the mouseout on the <a> element now that its completely overlaid by the larger <img> element.
