Question

我收到了转换为网站的设计。除了菜单外，它看起来很棒并且不具有挑战性。

菜单是一个简单的手风琴菜单，但设计本身就让我失望。

这是菜单应该是什么样子（不分别丢弃和丢弃）：

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

我正在努力的是绿背。

我知道如何旋转，但旋转会旋转所有内容。

这是我正在使用的手风琴脚本：

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

这是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; }

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

任何人都可以帮助我。到目前为止，我尝试过的一切都失败了。

更新1（20-Sep-12 16:49 CAT）

我在这方面取得了一些进展。我实际上是想看看我希望它看起来如何。我现在只需要像其他人一样让绿色位滑下来。看看这里：http://jsfiddle.net/pNxBU/1/（旁注：间距有点偏，因为它可以说是从'上下文'中删除了。

所以现在如果有人可以帮我把这些东西和他们的div一起移动......嗯......

Answer 1

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

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

css样式来实现这种背景效果

1 个答案: