WEB design Tutorial 5

Add Css transition effect to Navigation Link

visit our facebook page to see a short clip of CSS transition effect

guess you like the background colour transition

Now let get started

get to your layout view where you have created the Navigation links.
refer to previous tutorial if you cant create a Navigation Menu

next step, click on windows>>locate CSS transition click on it>>
see below

your aim is to target the list of item in an unordered list

#navbar ul li

choose hover, the effect is only felt when user mouse stays on the menu list

for this demo i chose 2s timing for the fade in and out.

if you want a delay,u can choose a value

next is to add property- what happens when mouse hover the menu list

select change background-color -for the purpose of this tutorial else there several property that can be selected , i advise you test others out depending on the aim you wish to achieve

with the above steps followed you should be able to achieve the hover effect seen in the demo video