jquery - 如何在 Outlook 中制作类似于导航窗格的内容？

Question

我在 leftmenu.jsp 文件中有一个菜单列表。在我的 page.jsp 中，我有一个垂直按钮（就像 Outlook 中的导航窗格一样）。当我单击按钮时，我想在 leftmenu.jsp 文件中显示菜单列表。我怎样才能做到这一点？

页面.jsp

<div id="content">
    <div id="pageNav"  style="z-index:9999; position:relative;height:180px;">
   <button id="showmenu" type="button">Hide menu</button>
    </div>
</div>

左菜单.jsp

<div class="sidebarmenu" style="position: absolute;">
        Menu List
</div>

Answer 1

你应该用谷歌搜索 jQuery 菜单滑块、菜单切换器或 jQuery Outlook 之类的菜单行为……或者你可以使用 jQuery 自己编写一些东西。

jQuery：

$('#menu-wrapper').hide();

$('#btn-toggle-menu').on('click', function(e) {
    var menu = $('#menu-wrapper');
    if(menu.is(':hidden')) {
        menu.show();
    } else {
        menu.hide();
    }
});

html:

<div id="btn-toggle-menu">M</div>
<div id="menu-wrapper">
    <ul>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
    </ul>
</div>

这是一个非常基本的内容，应根据您的需要进行编辑。一个工作示例- >单击“M”

如果他们有任何你喜欢的东西，你可以检查 UI 像 Bootstrap 或 Flat UI...

祝你好运！