Thursday, February 9th, 2006

CSS Navigation Magnification

Category: CSS, Examples

Paul Armstrong put together an example of CSS navigation magnification, which brings the fishbowl effect to links.

I am not sure if these techniques help UI, but the CSS implementation is interesting.

  1. li { font-size: 1em; }
  2. li:hover { font-size: 2.5em; }
  3. li:hover + li { font-size: 2em; }
  4. li:hover + li + li { font-size: 1.5em; }

This magic even works on IE!! Well, IE 7 ;)

Posted by Dion Almaer at 8:46 am
14 Comments

+++--
3.7 rating from 95 votes

14 Comments »

Comments feed TrackBack URI

Yay for creative selector usage!

Boo for annoying web tricks…

That strikes me as an example of taking technologies used in making things accessible and using them to make navigation more difficult. Try to imagine having a mobility-restrictive disability and having your links resize and move around. Or ADD and having your navigation distract you from the reason you wanted to use a link.

Comment by Shawn — February 9, 2006

IE/Win does not support the “+” CSS Selector (nor the hover-state of LI elements). If it could, nav menus would be easy:

HTML:
<ul class="nav">
 <li>
  <a href="#">Link 1</a>
  <ul>
   <li>Text 1.1</li>
   <li>Text 1.2</li>
  </ul>
 </li>
</ul>

CSS:
ul.nav > li > a + ul{display:none}
ul.nav > li > a:hover + ul{display:block}

Comment by Matthew Foley — February 9, 2006

[…] CSS Navigation Magnification: […]

Pingback by Sam’s random musings » CSS Navigation Magnification — February 9, 2006

Well, usable or not that is a handy bit of CSS, thanks for bringing it to my attention.

Also I thought instead of changing the font-size you could go for changing the colour or another attribute such as background-image.

Just a pity you can’t go “li:hover – li – li {” for preceding elements.

Comment by Paul Watson — February 9, 2006

Not to be rude, or overly intrusive but isn’t this post a few years behind the times (as far as ‘discovering’ CSS techniques) and generally lacking in Ajaxian goodness to be worth posting up here?

Comment by Peter Cowburn — February 9, 2006

I have to say that was a pretty useless tipp, sorry! If the user has problems with text being to small, he can simply press ctrl + to magnify the text. Hopefully the website is developed so the website looks good with bigger fonts…

Comment by José Jeria — February 9, 2006

Cool thing!

@Matthew:
IE7B2 does.. I stumble daily on things, crappy IE6 doesn’t. I have to develop for IE5+ so I can sing a sad song… Let’s hope IE7 will penetrate the browsing world fast and free uns developers of writing code for anything older.

Comment by Mario Heiderich — February 9, 2006

Look, everyone is right that this is useless and frankly pretty irritating. But I think everyone is missing the point: It’s freakin’ brilliant! I mean, seriously, it’s such an elegant solution to a difficult, if purely academic, problem. So lay off, homies, this guy earned his street cred.

Comment by Mark Kawakami — February 9, 2006

[…] Una curiosa forma de implementar CSS para mejorar la navegación. En realidad no está muy claro que la mejore, habrá que verla en acción, pero así de entrada tiene una pinta interesante. Archivado en dnx […]

Pingback by dnx blog » CSS y navegación — February 10, 2006

I have to agree with Shawn, having things balloon up that much would be a killer for a person with a mobility disability, like me. But then again I understand how sites are structured, so I can click in the general area, and use tab. But then again I also can use Firefox’s live find and navigate that way.

Comment by RyanB — February 10, 2006

Currently, I have not yet enough idea for using this method for usable applications.
But, it’s very cooooool.

P.S. I made same method for Japanese characters (UTF-8) and it correctly works.

Comment by Shinichi Kaji — February 12, 2006

[…] Ajaxian » CSS Navigation Magnification A CSS Trick to make text larger (tags: CSS) […]

Pingback by Ryan ’s Blog » Blog Archive » links for 2006-02-11 — February 12, 2006

Cool effect. Totally lame.

Comment by bob — February 23, 2006

http://www.cssplay.co.uk/menus/magnifier_text.html

Comment by Jesse Jarzynka — March 9, 2006

Leave a comment

You must be logged in to post a comment.