Question

我正在尝试使用Drupal和动态持久菜单模块在选项卡式动态菜单上制作圆角（因此下面代码中的动态持久样式定义）您可以在此处看到代码和菜单的99％：http://vpscentre.co.uk/sandbox/任何人都可以100％正确使我的解决方案正确并使其同时显示navi_top_right.png和navi_top_left.png吗？

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

VPS服务器

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

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

a.dynamic持久菜单菜单项目 { background：url（images / backgrounds / business / navi_top_left.png）左上角不重复; }

.dynamic-persistent-menu-menu li.active，.dynamic-persistent-menu-menu a：悬停 {

背景：＃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）右上角不重复;

}

Answer 1

您可以在CSS中尝试border-radius，无需多个图片。

适用于FF，Safari和Chrome ...在IE / Opera中默认为方角。

有关详细信息，请参阅here。

Answer 2

您需要的是“滑动门”效果：

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

一般来说，你给＆lt; li＆gt;左上角和＆lt; a＆gt;使用背景图像和一些填充/边距的右上角。然后你将推两边的内容分开，这样文字总是适合。

我在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;
}

类似于页面中较低的其他圆角。

一个小问题：你需要向＆lt; li＆gt;表示。内部链接是活动的，而不是链接本身。

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

Answer 3

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

如果您不介意使用一些javascript，也可以尝试使用niftyCube - http://www.html.it/articoli/niftycube/index.html

老实说，我认为你应该使用border-radius属性，然后阻止任何使用IE的人访问你的网站：）

Answer 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>

这适用于所有浏览器!!!

弯曲的菜单选项卡

4 个答案: