如何设置顶部和居中文本上的图像的水平菜单的样式？

Question

通过考虑以下图像，表示此菜单交互的3种状态：

知道：

1）我们不能为所有水平菜单创建一个图像，每个项目（因此，每个项目都应该有自己的图像）;

2） 背景图像定位将受到青睐，因为它对于跨浏览器问题会更好;

第3） 这些按钮上的文字（应该是）文字而不是图像;

实现这一目标的最佳方式是什么？ 我只需要在这里开球。

感谢。

更新

这是一个没有交换图像的测试： http://jsfiddle.net/Cq5JY/

Answer 1

我认为很简单，你自己就是在解释你的解决方案了。

导航中的每个项目都需要1个图像，其中有三个状态用于翻转和活动状态。然后，您将根据布局图像的方式使用CSS移动背景图像。

让css有点棘手的事情（好吧你会写得相当多）是按钮上的文字定位，如果文本从很多不同的y坐标开始那么显然你会写下这些中的每一个进入CSS。

我会根据每个按钮的单独图像使用类似于下面的代码（未经测试）设置导航，其中包含按钮的常规状态，翻转下方和下方，活动状态按钮。

/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{

    display:block;
    width:150px;
    height:100px;
    text-align:center;
    background-position:0 0;
}

ul li{

    float:left;
}

/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }

/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }

/* define each button (background image and text position) */
ul li a.dashboard
{
    background-image:url(images/dashboard.png); /* define image url */
    padding-top:40px; /* position the text using a combination of padding / height) */
    height: 60px;

}
ul li a.products
{
    background-image:url(images/products.png); /* define image url */
    padding-top:30px; /* position the text using a combination of padding / height) */
    height: 70px;

}
...

然后我会非常简单地使用html：

<ul>
    <li><a href="dashboard.html" class="dashboard active">Dashboard</a></li>
    <li><a href="products.html" class="products">Products &amp; Services</a></li>
    ...
</ul>

如果您有任何疑问，请告诉我，我实际上没有测试过代码，但这是我对大多数基于html / css的导航的一般方法，无论是垂直还是水平（尽管我会使用1张大图像进行所有翻转所有按钮的状态）。