Question

我删除了上一个问题，虽然它正在搜索相同的结果，但是稍微减少了一点。创建一个代码笔希望它会有所帮助，虽然它没有像我运行它时那样出现并且认为它可能是因为javascript / bootstrap或其他一些加载的库。这基本上是发生了什么以及我想要发生什么。

我需要2个面板，顶部固定标头和底部内容。底部将包含2个水平面板。左侧将包含一个菜单，当单击标题面板中的按钮时，该菜单将打开/关闭。使用CSS尝试了建议的答案，但面板只能垂直对齐而不是水平对齐。绑定了在线搜索和各种JQuery建议中的其他CSS属性。目前菜单在页面加载时打开和关闭，但是当点击页面链接时，标题中的按钮不再有要触发的事件来更改类以隐藏菜单。

任何帮助都将不胜感激。

See code pen

CodePen

Answer 1

＆＃13;

$(".js-togglemenu").on("click", function() {
  $("body").toggleClass("menu-open");
});

＆＃13;

body {
margin:0;
}

#applicaitonHeader div {
max-height: 50px;
vertical-align: middle;
padding-left: 5px;
}
#MainMenuPanel {
top: 90px;
padding: 0px;
margin: 0px;
position: absolute;
width: auto;
height: auto;
cursor: pointer;

transform: translateX(-100%);

transition: transform 0.3s;
}
#BodyContainer {
position: absolute;
width: 100%;
height: auto;
}

.menu-open #MainMenuPanel {
  transform: translateX(0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="js-togglemenu" id="MenuShowHide">toggle menu</button>

<div id="applicaitonHeader" class="navbar navbar-inverse navbar-fixed-top">
Header info goes here
</div>
<div id="MainMenuPanel" class="navbar-fixed-left">
Menu nodes go here
</div>
<div id="BodyContainer" class="container body-content">
Body content goes here
</div>

＆＃13;

所以你们都可以用css转换和转换来做到这一点。使用jquery animate是做旧动画的旧方法。关于javascript动画有一些话要说，但在这种情况下，css就足够了。

我希望这有帮助！

JQuery按钮将sidemenu移动到左侧，并使用animate not working将内容视图调整为全宽

1 个答案: