s

CSS fish eye menu

Aug 22, 2006

As part of a design for a new website at work, Kim created a text effect on her mock-up of the site design for the main navigation. She was really married to the effect and wanted me to use an image rollover to achieve it. Being that we pride ourselves in making all of our current sites fully accessible to persons with disabilities, I really hate using images for text when it can be avoided. So, as a challenge to myself, I set forth to make the effect work using only CSS. I'm not really sure how difficult this would be for the average CSS person, but I got it done.

She wanted the text of the link to increase in size by about 100% when hovered over. So, to start out, I made the nav div with a set width (the sum of all of the nav elements, which there were four at 150px each) of 400px, gave it a background color, and centered it.

#nav {
  width: 600px;
  margin: 0px auto;
  background-color: #513C33;
}

Next, I made each li float left, gave them a set height, and set the overflow to hidden, so that even if the padding around the anchors extend past the li, it won't cause the div to expand.

#nav ul li {
  list-style: none;
  float: left;
  margin: 0px;
  padding: 0px;
  height: 37px;
  overflow: hidden;
}

Now, all I had to do is set the anchors. I made them display: block; so that they register the hover even when the mouse is over their padding, gave them a height and width, and gave them a top padding so they would be centered vertically.

#nav ul li a {
  display: block;
  width: 150px;
  height: 34px;
  font-size: 14px;
  color: #8AA7A6;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding-top: 12px;
}

Last of all, I set the hover style. I just gave it a larger font size and changed the top padding to keep the text centered vertically.

#nav ul li a:hover {
  font-size: 28px;
  color: #74635C;
  padding-top: 3px;
  font-weight: normal;
}

If you'd like to see this in action, you can check it out right here. (UPDATE: This file is no longer available, sorry.)

Tagged: xhtmlcss