Page 1 of 1

CSS - diff background img for each menu item

Posted: Wed Apr 05, 2006 12:40 pm
by Luke
I often run into the problem of needing a different background image for each of my menu items (say I want to have an icon of home on the home page link, an envelope on the contact us page, etc.). I usually write a different css class for each of the menu links like this:

Code: Select all

#left_menu ul li a.home{
	background: #ccc url(images/home.jpg) no-repeat;
	color: #000;

}
#left_menu ul li a.home:hover{
	background: #ccc url(images/home.jpg) no-repeat;
        background-color: #fff;
}
#left_menu ul li a.contact{
	background: #ccc url(images/contact.jpg) no-repeat;
	color: #000;

}
#left_menu ul li a.contact:hover{
	background: #ccc url(images/contact.jpg) no-repeat;
        background-color: #fff;
}
#left_menu ul li a.page1{
	background: #ccc url(images/page1.jpg) no-repeat;
	color: #000;

}
#left_menu ul li a.page1:hover{
	background: #ccc url(images/page1.jpg) no-repeat;
        background-color: #fff;
}
Is there an easier/shorter way to do this?

Posted: Sat Apr 08, 2006 3:19 am
by Chris Corbyn
That looks pretty standard to me ;)

Posted: Mon Apr 10, 2006 10:07 am
by pickle
Ya, pretty standard, but you could shorten it a bit. You don't need to declare background-color if you've already put a colour in the 'background' declaration. For example:

Code: Select all

#left_menu ul li a.home:hover{
        background: #ccc url(images/home.jpg) no-repeat;
        background-color: #fff;
}

//can be shortened to
#left_menu ul li a.home:hover{
        background: #fff url(images/home.jpg) no-repeat;
}
You also don't need to redeclare the background color and image for the 'hover' state:

Code: Select all

#left_menu ul li a.home{
        background: #fff url(images/home.jpg) no-repeat;
}

#left_menu ul li a.home:hover{
        color:#000;
}