0

我有以下菜单，需要以一个小角度旋转：


（来源：maroonlemoon.com）

我已经设法使用每个菜单条的嵌套 div 来实现外观（容器 div 具有黄色背景图像，嵌入式 div 具有链接到带有每个菜单部分文本的图像的背景图像）

<div id="the-menu" style="position:absolute; z-index:9998; left:120px; top:-5px; width:255px; height:300px;">
    <div id="home-strip" align="right" style="position:absolute; z-index:1; left:0px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('home');" style="cursor:pointer; position:relative; width:90px; height:35px; top:9px; left:6px;  background-image:url('images/menu-text.png');"></div>
    </div> 
    <div id="about-strip" align="right"  style="position:absolute; z-index:2; left:10px; top:30px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('about');" style="cursor:pointer; position:relative; width:90px; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -38px; background-repeat:no-repeat"></div>
    </div> 
    <div id="classes-strip" align="right"  style="position:absolute; z-index:3; left:20px; top:60px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:35px; top:6px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -76px; background-repeat:no-repeat"></div>
    </div> 
    <div id="team-strip" align="right"  style="position:absolute; z-index:4; left:30px; top:90px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:37px; top:7px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -116px; background-repeat:no-repeat"></div>
    </div> 
    <div id="facilities-strip" align="right" style="position:absolute; z-index:5; left:40px; top:120px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-3px;  background-image:url('images/menu-text.png'); background-position: 6px -157px; background-repeat:no-repeat"></div>
    </div> 
    <div id="schedule-strip"  align="right" style="position:absolute; z-index:6; left:50px; top:150px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -196px; background-repeat:no-repeat"></div>
    </div> 
    <div id="contact-strip"  align="right" style="position:absolute; z-index:7; left:60px; top:180px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-5px;  background-image:url('images/menu-text.png'); background-position: 8px -234px; background-repeat:no-repeat"></div>
    </div> 
</div>

不要介意内联样式。我的问题是我想为每个菜单部分（带有角度）创建悬停和单击状态，但是使用原生 HTML 实现这一点似乎有点挑战性，因为 div 会相交。请参阅以下快照以进行说明：


（来源：maroonlemoon.com）

非常感谢您的帮助，我想要一个适用于所有主要浏览器的解决方案（我研究了一个 jQuery 插件，它可以做到这一点，但不兼容跨浏览器）我应该使用经典的 html 热点来做到这一点。我有点讨厌使用它们，并且觉得它们不再用于此目的

4

2 回答 2

2

你可以用 CSS 解决这个问题：

您必须应用变换：rotate(150deg); 样式到您或您想要旋转的标签。

div{
    transform: rotate(150deg);
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Safari and Chrome */
}

这是一个使用 CSS 旋转物体的例子。

http://jsfiddle.net/MathiasaurusRex/hTx2w/1/

于 2013-11-07T17:39:58.520 回答
0

有时旧技术是最好的技术。

<html><head></head><body>
<img src="http://maroonlemoon.com/rotated2.png" name="example" usemap="#nav_map" id="example" />
<map name="nav_map">
    <area shape="poly" coords="201,4,89,47,100,75,216,29" href="#">
</map>
</body></html>

Dreamweaver 的屏幕截图

如果您碰巧使用了上述软件，Dreamweaver 甚至会构建用于将它们直接放入基本界面的工具 - 但是有很多在线工具可以帮助您绘制方框，它也会生成代码供您使用。

6 多行简单的标签，将它们链接到您希望它们去的地方，确保为屏幕阅读器和残疾人提供正确的替代文本，然后就可以了。

于 2013-11-07T17:52:55.927 回答