如何在Outlook中创建类似于导航窗格的内容?

时间:2013-09-23 10:21:14

标签: jquery html css jsp

我在leftmenu.jsp文件中有一个菜单列表。在我的page.jsp中,我有一个垂直按钮(就像outlook中的导航窗格一样)。当我点击按钮时,我想在leftmenu.jsp文件中显示菜单列表。我怎么能这样做?

page.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>

leftmenu.jsp

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

1 个答案:

答案 0 :(得分:0)

你应该谷歌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>

这是一个非常基本的编辑,以满足您的需求。 工作example - &gt;点击“M”

如果他们有任何你想要的东西,你可以检查UI的Bootstrap或Flat UI ......

古德勒克!