Question

任何人都可以帮助我在不同的浏览器上使我的Polygon导航更准确，因为它可以在Chrome上运行但在Firefox上看起来很丑，也不支持IE。任何人都可以帮我添加一些jQuery / css3代码，使其至少在Chrome＆amp; Firefox浏览器。建议一些代码让它变得更好..谢谢！ HTML标记：

  <div id="left_rot"></div>
  <div id="str"></div>
  <div id="right_rot"></div>
  <div id="nav">
    <input type="checkbox" id="switch" name="switch" class="chkbx">
    <label for="switch" class="pin"><span class="open">Open</span>
    <span class="close">Close</span> Menu</label>   
    <span class="link1"><a href="#link1">Link1</a></span>
    <span class="link2"><a href="#link2">Link2</a></span>
    <span class="link3"><a href="#link3">link3</a></span>
    <span class="link4"><a href="#link4">link4</a></span>
    <span class="link5"><a href="#link5">link5</a></span>
    <span class="link6"><a href="#link6">link6</a></span>
 </div>

css的小提琴链接：http://jsfiddle.net/thekiddev/d8MLQ/

Answer 1

我参与了你的项目，改变了两件事。

我已经更改了你的HTML，主要是将类link1，link2等更改为类链接和ids link1 link2 link3 ..这使得代码更加紧凑，因为我可以为所有链接设置共享属性。

另外，我改变了你定位三角形的方式。我没有为它们中的每一个设置顶部和左侧的位置，而是以相同的方式定位它们。然后，我用旋转中心在三角形的下部顶点旋转它们。这使得定位它们变得更加容易。

修改后的HTML

<div id="nav">
    <!-- Option for Opening or Closing menu -->
    <input type="checkbox" id="switch" name="switch" class="chkbx">
    <label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label> 
    <!-- Links -->
    <span class="link" id="link1"><a href="#link1">Link1</a></span>
    <span class="link" id="link2"><a href="#link2">Link2</a></span>
    <span class="link" id="link3"><a href="#link3">link3</a></span>
    <span class="link" id="link4"><a href="#link4">link4</a></span>
    <span class="link" id="link5"><a href="#link5">link5</a></span>
    <span class="link" id="link6"><a href="#link6">link6</a></span>

</div>

CSS是

* {
    margin: 0;
    padding: 0;
}
body {
    background:#3498DB;
}
#nav {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 350px auto;
    position: absolute;
    text-align:center;
}
#left_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#right_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
#str {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    text-align: center;
}
span {
    z-index:555 !important;
}
span a {
}
span a:hover {
    background:rgba(0, 0, 0, .1);
    box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
    margin-left: -80px;
    top:-142px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    background:transparent;
    color:#fff !important;
    padding: 0px;
    position:absolute;
    text-shadow:0 2px 1px rgba(0, 0, 0, .2);
    -webkit-transition: all ease 0.50s;
    transition: all ease 0.50s;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    height: 140px;
    width: 162px;
}
#link2 a {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#link3 a {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}
#link4 a {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#link5 a {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}
#link6 a {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}
.link a:before {
    position: absolute;
    content:'';
    width:0;
    height:0;
    top:0;
    left:0;
    border-style:solid;
    border-width: 140px 81px 0px 81px;
    border-color:transparent;
    border-top-color: #fff;
    margin:0px;
    z-index:5;
    -webkit-transition: all 0.55s linear;
    transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
    border-top-color: #ECF0F1; 
}
.chkbx {
    display: none;
    margin: 0px auto;
}
.pin {
    display: block;
    width: 200px;
    padding: 10px 25px;
    font-family: century gothic;
    background:rgba(252, 252, 252, 1);
    position: fixed;
    top: -300px;
    left: 0;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    color: #666;
    position: relative;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.chkbx:checked ~ .pin {
    color: #fff;
    background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
    border-color: transparent !important;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

.close {
    display: none;
}
.chkbx:checked ~ .pin span.close {
    display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
    display: none !important;
}
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
footer h2, p {
    font-family: century gothic;
    color: #fefefe;
}
footer p a {
    text-decoration: none;
    font-weight: bold;
    color: #1f2f3f;
}

fiddle

我有现代浏览器不需要的去除前缀属性，以保持示例简短。它适用于最新的Chrom，Firefox和IE。

需要帮助来制作带过渡的多边形导航样式

1 个答案:

fiddle