31 replies [Last post]
theantidote
theantidote's picture
Offline
Regular
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2006-01-25
Posts: 12
Points: 0

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.

http//csstips.wordpress.com/

Please visit my blog to see my current CSS projects.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Check out my navigation bar

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

theantidote
theantidote's picture
Offline
Regular
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2006-01-25
Posts: 12
Points: 0

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.

http//csstips.wordpress.com/

Please visit my blog to see my current CSS projects.

Slipstream
Offline
newbie
Perth, West Australia
Last seen: 13 years 42 weeks ago
Perth, West Australia
Timezone: GMT+8
Joined: 2006-01-24
Posts: 4
Points: 0

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 >.<

Anonymous
Anonymous's picture
Guru

Check out my navigation bar

Slipstream wrote:
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.

Anonymous
Anonymous's picture
Guru

Check out my navigation bar

Quote:
In IE6 it shifts to the right a tiny bit when hovering

Same thing happens in Safari.

Slipstream
Offline
newbie
Perth, West Australia
Last seen: 13 years 42 weeks ago
Perth, West Australia
Timezone: GMT+8
Joined: 2006-01-24
Posts: 4
Points: 0

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

Triumph wrote:
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

Anonymous
Anonymous's picture
Guru

Check out my navigation bar

Slipstream wrote:
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".

theantidote
theantidote's picture
Offline
Regular
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2006-01-25
Posts: 12
Points: 0

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/

http//csstips.wordpress.com/

Please visit my blog to see my current CSS projects.

Anonymous
Anonymous's picture
Guru

Check out my navigation bar

theantidote wrote:
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.

theantidote
theantidote's picture
Offline
Regular
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2006-01-25
Posts: 12
Points: 0

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.

http//csstips.wordpress.com/

Please visit my blog to see my current CSS projects.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Check out my navigation bar


There's no images in your navbar.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

theantidote
theantidote's picture
Offline
Regular
Last seen: 13 years 42 weeks ago
Timezone: GMT-5
Joined: 2006-01-25
Posts: 12
Points: 0

Check out my navigation bar

Tyssen wrote:

There's no images in your navbar.

Clear your cache and reload.

http//csstips.wordpress.com/

Please visit my blog to see my current CSS projects.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Check out my navigation bar

theantidote wrote:
Tyssen wrote:

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 53 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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.

  • 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. Wink The effect is cool, just don't use it on a site I might visit. Laughing out loud

    cheers,

    gary

    [/]

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    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 ...

    Tongue

    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.

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Chris..S wrote:
    ... But that kind of defeats the purpose of it being CSS. ...
    Which I still do not understand. To me this is behavior and belongs to the DOM.

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Check out my navigation bar

    The behaviour layer - yes.

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Chris..S wrote:
    The behaviour layer - yes.
    Yes, yes!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 44 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Check out my navigation bar

    Yes, yes yes!

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 5 years 36 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    Check out my navigation bar

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

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Laughing out loud

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

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Check out my navigation bar

    Back on topic.

    Tongue

    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?

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 13 hours 53 min ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    Check out my navigation bar

    Chris,

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

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    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!

    Smile

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    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 */
    }
    

    example

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Chris..S wrote:
    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
    Fails in Safari.

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    Check out my navigation bar

    Gotta screenie? Or more details?

    Do any of the other ones work?

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Chris..S wrote:
    Gotta screenie? Or more details?

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

    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?

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 7 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    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.

    Anonymous
    Anonymous's picture
    Guru

    Check out my navigation bar

    Chris..S wrote:
    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. Smile