Creating a menu that changes background on mouse-over
This recipe will teach you to create a menu that will allow you to highlight a menu item when the mouse pointer hovers over it. Other menus will be faded and only the menu having mouse focus will be highlighted.
Getting ready
Create a folder named Recipe2 inside the Chapter7 directory. Also create a file named index.html inside the Recipe2 folder. Create three images that will serve as backgrounds for our menu items. I have used the following three images. Each image has dimensions of 120px * 41px:
How to do it...
First of all create the HTML structure for menus. Create an unordered list with three list items. Each list item has a class name
menuHeaderthat will be used by jQuery. Another class name will add a background image to it. Put ananchortag inside eachlielement and set itshrefto the page that you wish to navigate to.<html> <head> <title>jQuery Fading Menu</title> <link rel="stylesheet" type...
