HTML CSS/JS底部导航栏向上滑动 [英] HTML CSS/JS Bottom navbar Sliding Up
本文介绍了HTML CSS/JS底部导航栏向上滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了一些研究，似乎找不到我想要的东西。我的目标是在我的JS-app的底部有一个导航栏，当用户点击某个按钮时，它会启动一个动画，导航栏从应用程序的底部移动到应用程序的顶部。以下是我所做的一些编辑，以说明我的意思：
after user presses "profile" button, for example
不确定哪个JS库会在这方面帮助我，也不确定是否有代码样例。这里的关键是，我不想让它在单击的任何按钮上移动，只移动到特定的按钮上。例如，如果用户在上面的示例中单击"Library"，我希望它停留在底部。
有人知道我怎样才能做到这一点吗？
编辑：所以我这样做的原因是因为这是一个电子应用程序，我希望一些内容是本地的，一些内容是远程的。这就是为什么当用户按下"Library"时，我希望导航栏保持静止。然而，如果用户按下"配置文件"，它将移动到顶部，并且"内容"窗口的行为有点像网络浏览器，因为它将在远程网络服务器上加载一个页面。我希望这能帮上忙。感谢您提供的所有信息！编辑2：有点离题，但是我得到了这个奇怪的填充物，我不确定是从哪里来的：
编辑3：
以下是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：
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;
}
推荐答案
您可以使用一些JS向您的导航栏添加一个类来制作动画，并且您可以在单击具有特定ID的按钮时添加此类。
下面是演示这一点的代码片段：
$('#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>如果您不想让它有动画效果，只需跳到顶部或底部，则可以删除所有这些行：
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
以下是演示这一点的代码片段：
$('#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>这些示例提供了一些JQuery，但是如果您想要纯JS，您应该能够将其移植到Vanilla，并在我提供的代码中稍加考虑。
这篇关于HTML CSS/JS底部导航栏向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
