Pure CSS Fish Eye Menu

This advanced CSS technique shows you how to create a Fish Eye menu from an unordered list without using any JavaScript. This pure CSS fish eye menu illustrates expand-down and expand-up versions of the menu.

Pure CSS Fish Eye Menu uses dynamic pseudo-class “:hover” on <li> tags and the adjacent sibling “+” selector for styling image navigation menu. Since “+” selector only allows styling of the item on the right of active item, 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+.

Developed by Jamp Mark Web Creations; You can find further information, demos & download on Jamp Mark Web Creations Website.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More




Leave Comment


Stay Updated, Subscribe to RSS Feed




Sponsored Links