Thursday, February 9th, 2006
CSS Navigation Magnification
<p>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.
CSS:
-
-
li { font-size: 1em; }
-
li:hover { font-size: 2.5em; }
-
li:hover + li { font-size: 2em; }
-
li:hover + li + li { font-size: 1.5em; }
-
This magic even works on IE!! Well, IE 7 ;)
Related Content:
3.7 rating from 89 votes
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.
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}
[...] CSS Navigation Magnification: [...]
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.
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?
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…
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.
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.
[...] 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 [...]
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.
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.
[...] Ajaxian » CSS Navigation Magnification A CSS Trick to make text larger (tags: CSS) [...]
Cool effect. Totally lame.
http://www.cssplay.co.uk/menus/magnifier_text.html