3

I received a design to convert to a website. It looks great and isn't to challenging, except for the menu.

The menu is a simple accordion menu, but the design itself is getting me under.

Here is what the menu should look like (not dropped and dropped respectively):

Not Dropped http://photostand.co.za/images/7otfr8llxeeochyq4h4i.jpg Dropped http://photostand.co.za/images/vyzfbxqj4cdiyaxmfbv6.jpg

The thing I'm struggling with is the green back bit.

I know how to rotate, but rotate rotates everything.

This is the accordion script I'm using:

$("#accordion > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

Here is the CSS:

#accordion { list-style: none; padding: 0 0 0 0; width: 175px; font-size:13px; }
#accordion div { font-weight: bold; margin-top: 10px; cursor: pointer; text-align:center; border:2px black solid; vertical-align:center; height:30px; padding: 5 5 5 7px; list-style: circle; }
#accordion ul { text-align:center; list-style: none; padding: 0 0 0 0; }
#accordion ul { display: none; }
#accordion ul li { font-weight: normal; vertical-align:center; height:30px; cursor: auto; padding: 0 0 0 7px; border: thin solid black; margin-top: 2px; width:110px; margin-left:55px; background:#ffffff; }
#accordion ul li:hover { background:#d0d4d7 }
#accordion a { text-decoration: none; color:#000; }
#accordion a:hover { text-decoration: none; color:#000; }

And here is the HTML:

<ul id="accordion">
    <div>Park Home</div>
    <li><div>Travel</div>
        <ul>
            <li><a href="#">Activities and Facilities</a></li>
            <li><a href="#">Code of Conduct</a></li>
            <li><a href="#">How to get there</a></li>
            <li><a href="#">Maps</a></li>
            <li><a href="#">What to Expect</a></li>
            <li><a href="#">Fees</a></li>
        </ul>
    </li>
    <li><div>Fauna and Flora</div>
        <ul>
            <li><a href="#">Birding</a></li>
            <li><a href="#">Mammals</a></li>
            <li><a href="#">Reptiles and Amphibians</a></li>
            <li><a href="#">Vegetation</a></li>
            <li><a href="#">Invertabrates</a></li>
        </ul>
    </li>
    <div>Construction Progress</div>
    <div>History</div>
    <div>Careers</div>
    <li><div>Contact Us</div>
        <ul>
            <li><a href="#">Contact Details</a></li>
            <li><a href="#">Enquiries</a></li>
        </ul>
    </li>
</ul>

Could anyone perhaps assist me. Everything I've tried thus far failed.

UPDATE 1 (20-Sept-12 16:49 CAT)

I made some progress with this. I actually got it to look how I want it to look. I now just need to have the green bits slide down like the rest. Have a look here: http://jsfiddle.net/pNxBU/1/ (sidenote: The spacing is a bit off since it's taken out of 'context' so to speak.

So now if someone could help me get those things to move with their divs... hmmm...

4

2 回答 2

2

我希望这段代码可以帮助你

var tranform_property = [ '-moz-transform', '-ms-transform', '-webkit-transform', '-o-transform'];

$("div.rotate-background").each(function(index, element){
   var angle = -((5-(index/2)) * Math.PI) / 180 ;
   var el = $(element);

   for(var i in tranform_property){
     el.css(tranform_property[i], "matrix(" + Math.cos(angle) + "," +
                  Math.sin(angle) + "," +
                  -Math.sin(angle) + "," +
                  Math.cos(angle) + ", " +
                  (-20 + index*2 ) + ", 1)");

     angle = angle * -1;
     el.find(":first-child").css(tranform_property[i], "matrix(" + Math.cos(angle) + "," +
                  Math.sin(angle) + "," +
                  -Math.sin(angle) + "," +
                  Math.cos(angle) + ", " +
                  (15 - index *4) + ", 1)");
  }
});

我只在 Firefox 和 google-chrome 上测试过。我提供了一个jsfiddle 示例。

编辑 ：

这里的例子可能看起来像给定的图像。

如果你想调整矩形位置，我会给你帮助我的文档

于 2012-09-20T13:38:21.650 回答
1

而不是旋转，您可能应该使用一个简单的图像（一个尚未旋转的绿色矩形，上面有一个黑色边框矩形）作为单元格的背景。

那就是：一切都减去文字。

于 2012-09-20T12:33:41.860 回答