HTML CSS / JS底部导航栏向上滑动
[英]HTML CSS/JS Bottom navbar Sliding Up
问题描述
I've done some research and it doesn't seem that I can find exactly what I'm looking for. 
我做了一些研究，似乎我找不到我正在寻找的东西。 My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. 我的目标是在我的JS-app底部有一个导航栏，当用户点击某个按钮时，它会启动一个动画，导航栏从应用程序的底部移动到应用程序的顶部。 Here's some edits I made to illustrate what I mean: 这是我做的一些编辑来说明我的意思：
after user presses "profile" button, for example 用户按下“配置文件”按钮后，例如
Not sure what JS library would help me with this or if there is a code-sample. 不确定JS库会对我有什么帮助，或者是否有代码示例。 The key here is that I dont want it to shift on any button clicked, only certain ones. 这里的关键是我不希望它在点击的任何按钮上移动，只有某些按钮。 For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom. 例如，如果用户点击上面示例中的“库”，我希望它保持在底部。
Might anyone know how I can accomplish this? 有谁知道我怎么能做到这一点？
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. 编辑：所以我这样做的原因是因为这是一个电子应用程序，我希望一些内容是本地的，一些内容是远程的。 This is why when the users presses "Library" i would want the navbar to remain stationary. 这就是为什么当用户按下“库”时我希望导航栏保持静止。 However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. 但是，如果用户按下“配置文件”，它将转移到顶部，“内容”窗口有点像网络浏览器，因为它会在远程网络服务器上加载页面。 I hope that helps. 我希望有所帮助。 And thanks for all the info! 并感谢所有的信息！
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from: 编辑2：有点偏离主题，但我得到这个奇怪的填充，我不知道来自哪里：
EDIT 3: 编辑3：
Heres the HTML and CSS: 继承人HTML和CSS：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS: CSS：
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
3 个解决方案
解决方案1
0 2019-03-21 16:16:41
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. 看起来很简单，但是我们需要知道你用哪个属性将导航栏放在底部？ Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked. 最佳解决方案是在flexbox行为中创建两个不同属性的css属性，然后在单击配置文件时使用JavaScript更改与属性对应的nav id。
解决方案2
0 2019-03-21 16:22:08
You can animate the navbar to slide between 2 vertical positions with css as such:- 您可以使用css为导航栏设置动画以在两个垂直位置之间滑动，如下所示： -
@keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements. 修改“bottom”属性以适合您的页面高度和其他要求。
解决方案3
0 已采纳 2019-03-21 16:46:12
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs. 您可以使用某些JS向导航栏添加类来执行动画，并且可以在单击具有特定ID的按钮时添加此类。
Below is a snippet that demonstrates this: 以下是演示此内容的代码段：
$('#profile').on('click', function(){ toggleNavLocation(); }); function toggleNavLocation() { $('nav').toggleClass('top'); }
nav { width:100vw; height:50px; background:#000; bottom: 0; color:#fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; position: absolute; } nav.top { bottom:calc(100% - 50px); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } li { display:inline-block; width:100px; height:25px; background:rgba(255,255,255,0.2); text-align:center; line-height:25px; cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <nav> <ul> <li id="profile">Profile</li> <li id="library">Library</li> </ul> </nav> </body> </html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines: 如果你不想让它动画，但只是跳到顶部或底部，那么你可以删除所有这些行：
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this: 这是一个片段，展示了这一点：
$('#profile').on('click', function(){ toggleNavLocation(); }); function toggleNavLocation() { $('nav').toggleClass('top'); }
nav { width:100vw; height:50px; background:#000; bottom: 0; color:#fff; position: absolute; } nav.top { bottom:calc(100% - 50px); } li { display:inline-block; width:100px; height:25px; background:rgba(255,255,255,0.2); text-align:center; line-height:25px; cursor:pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <nav> <ul> <li id="profile">Profile</li> <li id="library">Library</li> </ul> </nav> </body> </html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied. 这些示例我们使用了一些JQuery，但是如果你想要纯JS，那么你应该能够将它移植到Vanilla中，并将其放入我提供的代码中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.