Width transitioning from fixed size to “auto” using CSS without Javascript

Question

I\'m having a bit of a problem making script-less CSS-only animated transition of an element that\'s initially set to a fixed width and should expand on mouse over to auto w

Answer 1

You can make use of the max-width trick, it's not perfect, but it gets around the problems with transitioning a numeric value to a string state:

http://jsfiddle.net/Cqmuf/1/

(the above has been updated with float:left)

The downside to this method is that you have to set a max width for your menu, but then I usually find that this is a good thing to do anyway.

markup:

<div class="menu">
  <a href="#">[i] Hello</a>
  <a href="#">[i] There</a>
</div>

css:

div a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.menu {
  transition: all 2s;
  max-width: 17px;
  /*
   here you can set float:left or position:absolute
   which will force the menu to collapse to it's minimum
   width which, when expanded, will be the actual menu
   item widths and not max-width.
  */
  float: left;
}

.menu:hover {
  /*
   If you have the possibility of varied widths, i.e. multilingual
   then make sure you use a max-width that works for them all. Either
   that or do what a number of multilingual sites do and set a body
   class that states the current language, from there you can then
   tailor your max-width differently e.g. wider for German.
  */
  max-width: 300px;
}

Example of seperate dimensions for multilingual:

.lang-de .menu:hover { max-width: 400px; }
.lang-gb .menu:hover { max-width: 300px; }

So instead of transitioning the width, you are actually modifying the max-width property, which you can set a fixed value to more easily, all because it will only come into use when this limit has been reached, and remains invisible until then.