Menu with Transition

In this post I am continuing the discussion of how I styled a navigation menu with transitions. The first post in the discussion is here: Vertical Navigation with a Border.

The problem I want to discuss next is how the transition caused some moving of the text, and the menu to look just a bit jumpy. I also want to demonstrate the reason you will normally add the transition properties to your normal state and not the hover state.

ul li { 
	list-style: none; 
	height: 44px; 
ul li a { 
	width: 100px; 
	height: 40px; 
	line-height: 53px; 
	border-bottom: 4px solid #999;  
	padding-left: 5px; 
	color: #333; 
	text-decoration: none; 
 	display: block;
	-webkit-transition: .2s all linear;
	-moz-transition: .2s all linear;
	-o-transition: .2s all linear;
	transition: .2s all linear;			
ul li a:hover { 
	border-bottom: 35px solid #999;
	height: 9px; 


The transition is added with this part of the code:
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;

The sliding up and down of the border will take place over .2 seconds. The transition will occur on all properties that change (at least all properties that take a transition.) The easing is “linear”. Any of these values can be adjusted to personal design.

If you look at the first two menus in the demo, both have a slight shift vertically when you hover over a menu item. It appears that the transition of the border-size is not happening at exactly the same rate as the transition of the height. So the box size of the anchor tag (height + border, in this case) is not a static number.

This problem is easily solved by giving a height to the parent of the anchor tags, which in this case is the “li” tag. By setting the height to 44px, the problem is solved.

You will also notice on the demo page, on the first menu, what happens when you put your transitions on the hover state – the transition only occurs in one direction.

Browser Support

The transition will work in all of the latest versions of modern browsers, except Internet Explorer. I consider this “icing” and not necessary to the design, so I am okay with that difference. However, if you really wanted it to work in every browser, you could use javascript to make this work.

Leave a Reply

Your email address will not be published. Required fields are marked *