Enlarger Button Menu

Before I start I must tell that yes I know that this does not work in Internet Explorer—do not wet yourself from shock now.

Inspired from many things, I thought up an idea for a navigation menu that used icons that would increase in size when the user placed their cursor over it.

Overlapping the Other Elements

This is the first on I came up with. When the icons grow larger they overlap the other elements.

HTML

<div id="menu"> <ul> <li> <a href="/"><img src="triangle.png" alt="Triangle" /></a> </li> <li> <a href="/about/"><img src="square.png" alt="Sqaure" /></a> </li> <li> <a href="/playground/"><img src="penta.png" alt="Pentagram" /></a> </li> <li> <a href="/rantsandlike/"><img src="circle.png" alt="Circle" /></a> </li> </ul> </div>

CSS

body #menu{ float: left; width: 100%; } /* Get rid of the spacing for the list*/ body #menu ul{ margin: 0; padding: 0; } body #menu ul li{ /* I need to keep them as block elements so I got rid of the marker and made them float left. The width and height are so they keep their spacing when the image increase in size. */ list-style: none; float: left; width: 32px; height: 32px; } body #menu ul li a img{ border-style: none; width: 32px; height: 32px; } body #menu ul li a:hover img{ width: 64px; height: 64px; position: relative; left: -16px; top: -16px; z-index: 2; }

Pushing the Other Elements

With the second one, the icons push the other icons when they grow larger. Part of this idea comes from the object bar on the Macintosh; but I cannot make things before the icon grow larger.

CSS

/* Everthing else in the code is same as before */ body #menu ul li:hover{ width: 64px; }

Version 2

Then I decided to make the icons even smaller at first and have them all become same size as in the prevoius examples.

CSS

body #menu{ float: left; width: 100%; height: 16px; position: relative; } body #menu:hover{ z-index: 3; top: -8px; /* causes the menu to overlap when it grows larger. */} body #menu ul{ margin: 0; padding: 0; } body #menu ul li{ list-style: none; float: left; width: 16px; height: 16px; padding: 0 8px 0 8px; /* I decided to add extra padding so it was not so hard on the eyes. */} body #menu:hover ul li{ width: 32px; height: 32px; padding: 0; /* Ged rid of padding*/} body #menu ul li a img{ border-style: none; width: 16px; height: 16px; } body #menu:hover ul li a img{ border-style: none; width: 32px; height: 32px; } body #menu ul li a:hover img{ width: 64px; height: 64px; position: relative; z-index: 2; top: -16px; } /* For the last example only. */ body #menu ul li:hover{ width: 64px; }

Return to CSS Play.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.