Question

我的下面的菜单需要以一个小角度旋转：

我已经设法使用每个菜单条的嵌套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将相交。请参阅以下快照以获得澄清：

http://maroonlemoon.com/rotated2.png

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

Answer 1

您可以使用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/

Answer 2

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

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

Screenshot from Dreamweaver

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

6个更简单的标签行，将它们链接到您想要的位置，确保为屏幕阅读器和残疾人提供正确的替代文字，然后离开。

使用HTML热点来管理旋转的部分

2 个答案: