Pure CSS Fish Eye Menu
A pure CSS technique to transform your icon menu into an interactive zooming icon navigation menu inspired from Mac OSX Dock with fish eye effect. One of many ways to style html list tags into interactive, usable, and accessible menu using pure CSS.
What is a Fish Eye Menu?
Fish eye menu is an interactive navigation layout technique where menu icon images are displayed in a linear fashion. These icons respond to the mouse hover by expanding its size to become larger and more visible. The active icon which is under the mouse pointer is fully expanded while the icons before and after the active icon are slightly expanded to mimic the fish eye lens effect.
HTML Mark-up and CSS Code
This CSS technique demonstrates the use of advanced CSS such as the dynamic pseudo-class ":hover" on <li> tags and the adjacent sibling "+" selector for styling image navigation menu as unordered list mark-ups.
The "+" selector allows styling of the item right of the active item and since CSS does not have a selector to style the item on the left, fish eye effect only happens on the right of the active item.
Pure CSS Fish Eye menu works on Internet Explorer 7+ and 8+, Firefox 3+, Google Chrome, Safari 3.2+, Opera 9.52+, and Konqueror 3.5.7+. However, the expanding of images next to the active image with the use of "+" selector only works on IE7+, IE8+, Opera 9.52+, and Konqueror 3.5.7+.
Here are two types of CSS Fish Eye menu: expand-down and expand-up.
-
Expands image downwards on mouse over maintaining top alignment. See the demo.
The HTML Mark-up
<div class="expand-down">
<ul>
<li>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<!-- the image -->
<img src="/images/demos/w3c-valid-css-trans.png" />
<!-- the label -->
<span>Valid CSS</span>
</a>
</li>
<!-- make copies of <li>...</li> block to create more items ... -->
</ul>
</div>
The CSS Rules
<style type="text/css">
<!--
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:150px;
width:500px;
background: url(/images/demos/macosx-style-background.png) no-repeat;
margin-bottom:30px;
}
/* reset margins and paddings */
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px; /* initial width of images, 50% of width */
height:50px; /* initial height of images, 50% of height */
border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
/* show label on mouse hover */
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
/* expand the image to 100% on mouse hover.
** an image becomes active when mouse hovers it
** ideally, the image should have same width and height as below
*/
.expand-down ul li:hover a img {
width:100px;
height:100px;
}
/* expand the image next to the right of the active image to 60% using + selector */
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
/* expand the image second to the right of the active image to 55% using + selectors */
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}
-->
</style>
-
Expands images upwards on mouse over maintaining bottom alignment. See the demo.
The HTML Mark-up
<div class="expand-up">
<ul>
<li>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<!-- label should appear on top of image so it comes first -->
<span>Valid CSS</span>
<!-- the image -->
<img src="/images/demos/w3c-valid-css-trans.png" />
</a>
</li>
<!-- add items by making copies of <li></li> block -->
</ul>
</div>
The CSS Rules
<style type="text/css">
<!--
.expand-up {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
height:150px;
width:500px;
background: url(/images/demos/macosx-style-background.png) no-repeat;
overflow:visible;
margin-bottom:30px;
}
/* reset margins and paddings */
.expand-up * {
margin: 0;
padding: 0;
}
.expand-up ul {
margin-left:10px;
}
.expand-up ul li {
float:left;
list-style-type:none;
/* create a reserved space for expanded image to make this work in ie */
padding-top:65px;
/* margin to place the menu at the bottom */
margin-top:25px;
}
.expand-up ul li a {
text-decoration:none;
}
.expand-up ul li a img {
width:50px; /* initial width of images, 50% of width */
height:50px; /* initial height of images, 50% of height */
border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-up ul li a span {
display:none;
}
.expand-up ul li:hover a span {
/* show item label on mouse hover */
display:block;
font-size:14px;
text-align:center;
color:#fff;
/* move label up to move image up */
margin-top:-65px;
}
/* expand the image to 100% on mouse hover.
** again, ideal dimension of image is equal to width and height below
*/
.expand-up ul li:hover a img {
width:100px;
height:100px;
}
/* expand the image next to the right of active image to 60% using + selector */
.expand-up ul li:hover + li a img {
width:60px;
height:60px;
/* move image up by 10px so bottom aligns with other images */
margin-top:-10px;
}
/* expand the image second to the right of active image to 55% using + selectors */
.expand-up ul li:hover + li + li a img {
width:55px;
height:55px;
/* move image up by 5px so bottom aligns with the other items */
margin-top:-5px;
}
-->
</style>
Pure CSS Fish Eye Menu Download
Get the complete HTML+CSS code with sample images from the download page.
See it in action at the demo page
Comments
Rafeek
