弯曲的菜单选项卡答案

【问题标题】：Curved Menu Tabs弯曲的菜单选项卡
【发布时间】：2009-12-18 07:05:07
【问题描述】：

我正在尝试使用 Drupal 和 dynamic-peristent-menu 模块在选项卡式动态菜单上制作圆角，（因此下面代码中的动态持久样式定义）您可以在这里看到代码和菜单 99%：http://vpscentre.co.uk/sandbox/ 谁能让我的解决方案 100% 正确，并让 navi_top_right.png 和 navi_top_left.png 同时显示？

我生成的用于制作活动菜单元素的 html 在这里：

VPS 服务器

我尝试了很多 css 组合，现在我认为我需要向社区公开这个问题！

以下是我目前使用的相关样式表定义：

a.dynamic-persistent-menu-menu-item { 背景： url(images/backgrounds/business/navi_top_left.png) 左上角无重复； }

.dynamic-persistent-menu-menu li.active, .dynamic-persistent-menu-menu a:hover {

背景：#093056 url(images/backgrounds/business/navi_top_left.png) 左上角无重复；

}

.dynamic-persistent-menu-menu-item a.active {

背景：#093056 url(images/backgrounds/business/navi_top_right.png) 右上角无重复；

}

【问题讨论】：

一旦我解决了问题，非常感谢你给我一些非常有用的理论

标签： css image background

【解决方案1】：

你可以在你的 CSS 中尝试border-radius，这样就不需要多个图形了。

在 FF、Safari 和 Chrome 中工作...在 IE/Opera 中默认为方角。

更多信息请参见here。

【讨论】：

感谢 Jony.. 我非常喜欢 IE 和 Opera 的曲线，但感谢您的想法。

【解决方案2】：

你需要的是“推拉门”效果：

http://www.alistapart.com/articles/slidingdoors/

一般来说，你给

一个左上角和一个右上角，使用背景图像和一些填充/边距。然后你让两边推开的内容让文本总是适合。

我在 www.mallorca.nl 上使用了相同的技术，左上角带有橙色圆角的块：

<div id="destwrapheader">
  <h2 style="font-size: 15px;">Vind jouw ideale Mallorca bestemming!</h2>
</div>

#destwrapheader {
  background:transparent url(images/mallorca/destinationblock/destination_top_right.png) no-repeat scroll right top;
}

#destwrapheader h2 {
  background:transparent url(images/mallorca/destinationblock/destination_top_left.png) no-repeat scroll left top;
margin:0 28px 0 0;
padding:0 0 0 12px;
}

页面下方的其他圆角也有类似的情况。

一个小问题：您需要向

表明里面的链接是活动的，而不是链接本身。

当然，您也可以忽略旧浏览器并使用 CSS3 边框半径：http://css3.info/preview/rounded-border

【讨论】：

谢谢，我一直在尝试使用这种技术，但知道这是正确的方法会有所帮助。现在我可以更有信心地继续试错了。如果您或其他任何人实际上可以看到我到目前为止所做的事情有什么问题，请大喊大叫！ :)
只是无法同时显示两个图像。每次其中一张图像似乎总是会删除另一张图像。如您所见vpscentre.co.uk/sandbox

【解决方案3】：

你总是可以尝试使用 SpiffyCorners - 一个 CSS 实现 - http://www.spiffycorners.com/ - 虽然所需的标记有点乏味

如果你不介意使用一点 JavaScript，你也可以试试 niftyCube - http://www.html.it/articoli/niftycube/index.html

说实话，我认为您应该使用border-radius 属性，然后阻止任何使用IE 访问您的网站:)

【讨论】：

前后添加div怎么样？

content

跨度>

【解决方案4】：

在之前和之后添加 div 怎么样？

<style type="text/css"> 
  .left_corner { 
    display:inline; 
    background: #093056 url(left.png) top left no-repeat !important; 
  } 

  .right_corner { 
    display:inline; 
    background: #093056 url(left.png) top right no-repeat !important; 
  } 
</style>
</head> 
<body> 
  <div>
    <div class="left_corner">&nbsp;</div>content<div class="right_corner">&nbsp;</div>
  </div>

这在所有浏览器中都有效！！！

【讨论】：