HTML CSS/JS Bottom navbar Sliding Up

bottom navigation bar html
bottom navigation bar html template
bottom navigation bar html, css
bottom navigation bar examples
bottom navigation bar bootstrap
show navbar on scroll down
responsive bottom navigation
footer menu css example

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. Here's some edits I made to illustrate what I mean:

default position

after user presses "profile" button, for example

Not sure what JS library would help me with this or if there is a code-sample. 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:

weird space

EDIT 3:

Heres the HTML and 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;
}

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.

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>

How To Create a Bottom Navigation Menu, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� HTML CSS JAVASCRIPT SQL PYTHON PHP Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border slide up the navbar (50px

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.

How To Slide Down a Bar on Scroll, Learn how to slide down a navigation bar on scroll with CSS and JavaScript. When the user scrolls to the top of the page, slide up the navbar (50px out of the� The example below slides in the side navigation, and pushes the page content to the right (the value used to set the width of the sidenav is also used to set the left margin of the "page content"):

You can animate the navbar to slide between 2 vertical positions with css as such:-

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

Modify the "bottom" property to suit your page height and other requirements.

How To Create a Responsive Bottom Navigation Menu, Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Place the navbar at the bottom of the page, and make it stick */ The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars. When you will scroll down then along with sticky navbar there is a sliding underline on the bottom of menu items, that shifts according to the active section. So, Today I am sharing Sticky Navbar With Sliding Underline On Scroll. The whole program is created using HTML, CSS, and JavaScript, there is jQuery which is a JS library.

How To - Bottom Border Nav Links, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Get the CSS Responsive Navbar With HTML & JavaScript, Dropdown Menu with logo. As you know the menu bar or navbar is important for any kind website. Actually, the menu bar provides info about websites, which users need. There are various kinds of the navigation bar, 50% of websites style depends on

How To Hide Menu on Scroll, Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Learn how to hide a navigation menu on scroll down with CSS and JavaScript. #navbar { background-color: #333; /* Black background color */ position: fixed transition: top 0.3s; /* Transition effect when sliding down (and up) */ The designer thus utilizes HTML and CSS matrix and flexbox to effortlessly manufacture the navbar. Additionally, on a scroll, we can perceive how the navbar sticks and doesn’t vanish. Toward the finish of the correct side, you have space for a search symbol. Demo/Code. 14. CSS Navigation Bar Animation

How To Create a Fixed Menu, Learn how to create a "fixed" menu with CSS. To Create a Fixed Top Menu. Step 1) Add HTML: bottom: 0; /* Position the navbar at the bottom of the page */ Most of the navbars are built in HTML, CSS, and JavaScript or any JS library. Using JavaScript you can create a very creative and fully featured navbar. But today I will show you how to create a navigation bar using HTML and CSS only. Beginners who don’t know JavaScript or want a simple HTML and CSS based navbar, this is the perfect program

Comments
  • The best way for people to assist you is to post the minimum code itself that you have tried. minimal reproducible example
  • Use case described isn't clear at all.. why would you want to jump your navigation bar across screen on some buttons clicks. what are you trying to acheive ? and also what @imvain2 said,
  • This is verrrrry useful. ill give it a shot. much appreciated good sir.
  • No problem my friend!
  • width:100%; change to width:100vw;
  • add left:0; to nav CSS
  • so after some debug and finally getting around to doing the JS part, i notice that it doesnt quite work.i added an onclick event to the actual li item that executes the toggleNavLocation function and threw in an alert to ensure it was being called. It is and the alert went off, however the nav never actually shifts position. Updated OP.
  • yep, nothing complex..just want it to shift up to the top of the app. I haven't put any code in just yet as i wanted to start with a good idea for what code i would need.