ADD HOVER EFFECT TO NAVIGATION BAR
In tutorial 3 we showed how a navigation bar can be added to your website design layout. adding a user feel to this NavBar will make it interactive, and Hover Effect is one of the easiest and most commonly used.
with Hover effect integrated into your NavBar, when a mouse roll over the menu list, the color changes to indicate clickability (if there is any word like that) what i mean is that it is click able. #wink !
lets get started !
the aim is to achieve this effect shown below
below is the view before the mouse roll over the Home navigation link
but after adding Hover Effect; immediately user mouse rolls over the navigation links this effect is seen
Time to move to the design view where we'll be adding this effect
creating the NavBar as seen above shouldnt be a problem if you have been following the class progressively
click on <li> and create a new CSS rule
take note of the :hover in front of the CSS rule name
very important
what we are actually doing is adding a background color that only becomes active when the mouse rolls over the menu list
add which ever color that blends with your design
Note : this color will not be visible in the design view and only becomes active when previewed in a browser
final result
DONE !!! you be smiling and feeling good
yah thats the fun !
like us on facebook
0 comments:
Post a Comment