菜单按钮帮助

Question

基于此菜单结构：

menu system

我想纯粹使用基于CSS的菜单系统，但我不确定在“Home”和“About Us”的基础上获得蓝色凝胶2D按钮的最佳方法是什么？

我基本上想知道如何实现这个按钮外观然后在CSS中使用这个背景按钮，然后能够通过html / css添加标签。

这可能吗？

要实现这一目标的任何示例教程都将非常感激。我也可以访问Photoshop。

感谢。

Answer 1

所以，这是一个多部分答案：

你所说的按钮设计是在图形本身完成的（所以如果你想获得真正的技术，它不完全是PURE css）这里有一个如何制作“宝石光泽外观”的例子：{{3}它可以很容易地适应你想要的外观。还要注意，有几个网站将创建一个宝石web 2.0像按钮（我讨厌那个术语！）没有photoshop。只需谷歌“web 2.0按钮生成器”

为了简化操作，我将假设你使用嵌套的

标签来实现菜单。只需将相应列表项的背景设置为图像，不进行重复，并将高度和宽度设置为适合图像本身的正确大小。瞧，背景中的图像而不是目前的css风格背景。

改进将使用精灵来加速加载并缩短响应时间。有关详细信息，请参阅此处：http://iris-design.info/photoshop/web-20-style-buttons/

好的，现在，说了这么多，很多人已经攻击了这个问题，并且有一些非常优雅的解决方案基本上都是为你完成的。考虑在Smashing等网站上寻找现成的解决方案来提供帮助。就个人而言，我是超级大牌的忠实粉丝，以及Jquery带来的suckerfish类菜单。无论你是否想要走这条路线当然是个人喜好。

祝你好运。