I want to introduce you to who I think is one of the best resources on the net for CSS and tableless design or just CSS in general. Ryan has been helpful in many occasions in times where I needed to figure out tricks in CSS and his website is full of very relevant articles.
Hats off to Ryan and may you realize this great resource in your daily workings with tableless design and CSS pains.
Keep up the great tips Ryan.
As I said before I’m doing a lot more CSS these days with tableless design. Now before I start on this post, none of this is new or complex. But you know it’s amazing that nobody talks about hover much working on elements other than just a hyperlink at least from what I see on the net overall.
Goal: I had an existing suckerfish menu. My top level nav items in the menu (what you mouse over) are images in my case, not just CSS boxes. So I need a mouseover that switches images when I mouse over my suckerfish menu image tabs.
So big deal right? Back to hover. You know hover of course, everyone does? yea, a:hover, etc. Well, it can be used on other elements and honestly I never really had wonder about this fact until I had a menu based solely on unordered lists where the top nav tabs did not need to be clickable..hence for example a suckerfish menu.
This is not a suckerfish menu per say below (that was just the scenario I had today at work) but for the example here just 3 top level menu tabs that when you mouse over, I simply want to change out the image during rollover to show a bit of highlight with the rollover image.
Well it’s very simple after you figure out how to do it with CSS, here it goes:
<style type="text/css">
#TopNavWrapper
{
margin: 0px auto;
}
#TopNavWrapper li
{
list-style: none;
}
#topnav_1
{
background: url(/content/images/navImage1.jpg) no-repeat;
width: 204px;
height: 40px;
float:left;
}
#topnav_2
{
background: url(/content/images/navImage1.jpg) no-repeat;
width: 204px;
height: 40px;
float: left;
}
#topnav_3
{
background: url(/content/images/navImage1.jpg) no-repeat;
width: 204px;
height: 40px;
float:left;
}
/* hover effect */
#TopNavWrapper #nav #topnav_1:hover
{
background: url(/content/images/navImage1a.jpg) no-repeat;
width: 204px;
height: 40px;
float:left;
}
#TopNavWrapper #nav #topnav_2:hover
{
background: url(/content/images/navImage1a.jpg) no-repeat;
width: 204px;
height: 40px;
float: left;
}
#TopNavWrapper #nav #topnav_3:hover
{
background: url(/content/images/navImage1a.jpg) no-repeat;
width: 204px;
height: 40px;
float:left;
}
</style>
<div id="TopNavWrapper">
<ul id="nav">
<li id="topnav_1"></li>
<li id="topnav_2"></li>
<li id="topnav_3"></li>
</ul>
</div>
I don’t have this example running in this post. Here is the code (.asp page + images). I supposed I should have put it into just an .htm but oh well…
