Question

您好我正在使用Weebly Pro，我想学习如何制作手风琴侧杆。现在它将打开菜单旁边的子菜单，它会造成巨大的混乱。

这是我的网站： www.exceptyebeconverted.com

我想要更像这样的东西： www.excatholicsforchrist.com

我需要一些极端的帮助。我已经搜索了谷歌和youtube的帮助，并且无法理解任何足以帮助我。这就是我在这里的原因。如何编辑此代码以获得手风琴效果？我是否还必须更改HTML？这是否意味着我改变了页面布局？

<body class="wsite-theme-light short-header-page">
<div id="container">
    <div id="sidebar">
        {logo}
        <div id="avmenu">{menu}</div>
    </div>
    <div id="main-wrap">
        <div id="header">
            <table id="header-right">
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td class="phone-number">{phone:text}</td>
                                <td class="social">{social}</td>
                                <td class="search">{search}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div style="clear:both"></div>
        </div>
        <div id="banner">
            <div class="wsite-header"></div>
        </div>
        <div id="main">
            <div id="content">{content}</div>
            <div id="footer">{footer}</div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
</body>

/* side-nav
--------------------------------------------------------------------------------*/

#avmenu {
    clear: left;
    margin: 70px 0 0;
    padding: 0;
}

#avmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#avmenu li {
    list-style: none;
}

#avmenu li a {
    font-weight: 400;
    text-decoration: none;
    color: #fff;
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-size: 15px;
    display: block;
    line-height: 1;
    margin: 0;
    padding: 10px 5px 10px 14px;
    border-bottom: 1px solid #903f3f;
}

#avmenu ul > li:last-child a,
#avmenu ul > span:last-child li a {
    border-bottom: none;
}

#avmenu li#active a,
#avmenu a:hover {
    color: #fff;
    background: #903f3f;
}

/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/

#wsite-menus .wsite-menu {
    border-top: 1px solid #903f3f;
    position: relative;
    top: -1px;
}

#wsite-menus .wsite-menu li a {
    padding: 8px;
    background: #903f3f;
    border: none;
    border-bottom: 1px solid #bd5353;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

#wsite-menus .wsite-menu li a:hover {
    color: #fff;
    background: #723131;
}

Answer 1

请尝试以下操作：

https://www.youtube.com/watch?v=gLy3vaIhyKA

此外，由于这是使用JQuery，您可以使用其他基于JQuery的手风琴小部件，例如https://jqueryui.com/accordion/和http://www.jqueryrain.com/example/jquery-accordion/

手风琴菜单轻松

1 个答案: