0

所以基本上，我正在研究一个在页面右上角有一个固定位置的 jquery 菜单。“导航”框将始终显示。单击时，它会展开以显示“应用程序、论坛、公会和项目”。单击子菜单时，它将展开并显示为应用程序。

http://i46.tinypic.com/xp6gox.png

我无法让 css 看起来像这张图片。一些细节是每个“框”中的 6px 填充，它们下方的 3px 底部边距，子菜单将具有灰色背景，每个框的宽度取决于其文本的宽度。

这是实际的 HTML/CSS www.jsfiddle.net/3HAKX/

任何帮助将非常感激。

4

2 回答 2

1

CSS 将如下所示：

www.jsfiddle.net/3HAKX/1/

你也想要一个下拉菜单的 JS 脚本吗？

于 2013-02-17T12:30:43.757 回答
1

我不知道我是否理解你的问题。但这里是我将如何完成的代码。

<ul id="accordion">
            <li>
                <a href="#recent" class="heading">Application</a>
                                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Forum</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Guilds</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Projects</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>

CSS

ul#accordion{
float:right;
}
ul#accordion, ul#accordion ul { list-style: none; margin: 0; }
ul#accordion a.heading { 
    color: black;
    display: block;
    font-size:16px;
    font-weight:bold;
    text-decoration: none;
    margin-right:30px;
}
ul#accordion li ul a { font-size:14px;color: black; text-decoration: none;}
ul#accordion li ul a:hover { text-decoration: underline; }

#accordion li ul { display: none; }
#accordion li.current ul { display: block; }

JS

$(document).ready(function() {
    $('ul#accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
        } else {
            $('ul#accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
        }
        return false;
    });
});

这是一个jsFiddle

于 2013-02-17T12:49:52.070 回答