HTML CSS / JS Нижняя панель навигации Скольжение вверх - PullRequest
Новая
       14

HTML CSS / JS Нижняя панель навигации Скольжение вверх

0 голосов
/ 21 марта 2019

Я провел некоторое исследование, и не похоже, что я могу найти именно то, что я ищу.Моя цель - иметь панель навигации в нижней части моего JS-приложения, и когда пользователь нажимает определенную кнопку, он запускает анимацию, когда панель навигации перемещается из нижней части приложения в верхнюю часть приложения.Вот некоторые изменения, которые я сделал, чтобы проиллюстрировать, что я имею в виду:

положение по умолчанию

после того, как пользователь нажмет кнопку "профиль", например

Не уверен, что библиотека JS поможет мне в этом или есть пример кода.Ключевым моментом здесь является то, что я не хочу, чтобы он сдвигался при нажатии любой кнопки, только определенных.Например, если пользователь нажимает на «Библиотека» из моего примера выше, я хочу, чтобы он оставался внизу.

Может кто-нибудь знает, как мне это сделать?

РЕДАКТИРОВАТЬ: поэтому я делаю это потому, что это электронное приложение, в котором я хочу, чтобы какой-то контент был локальным, а какой-то контент -дистанционный пульт.Вот почему, когда пользователи нажимают «Библиотека», я бы хотел, чтобы навигационная панель оставалась неподвижной.Однако, если пользователь нажмет «Профиль», он переместится наверх, а окно «контент» будет работать как веб-браузер, так как будет загружать страницу на удаленном веб-сервере.Надеюсь, это поможет.И спасибо за всю информацию!

РЕДАКТИРОВАТЬ 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;
}

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

Вы можете анимировать панель навигации для перемещения между двумя вертикальными позициями с помощью css: - 

@keyframes animatebottom {
from {
    bottom: -300px;
    opacity: 0
}
to {
    bottom: 0;
    opacity: 1
}
}

Измените свойство "bottom" в соответствии с высотой страницы и другими требованиями.

0 голосов
/ 21 марта 2019

Вы можете использовать JS, чтобы добавить класс к панели навигации для анимации, и вы можете добавить этот класс, нажимая кнопку с определенными идентификаторами.

Ниже приведен фрагмент, демонстрирующий это: 

$('#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, немного подумав о коде, который я предоставил.

0 голосов
/ 21 марта 2019

Это кажется довольно простым, но нам нужно знать, какое свойство вы использовали, чтобы расположить панель навигации внизу ?.Лучшим решением было бы создать два свойства CSS различных свойств в поведении flexbox, а затем просто использовать JavaScript для изменения идентификатора навигации, соответствующего свойствам при нажатии на профиль.

...