How to create Slide down bar with HTML CSS and Javascript





Try yourself >>



This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Javascript Instructions

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>


Visit our HTML Forms Guide to learn more about HTML Forms


Visit our CSS Forms Guide to learn more about CSS Forms


best way to learn programming on your own


Code Example:

             <div id="slidebar">
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#search">Search</a>
  <a href="#buy">Buy</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px">
<p><b>Your website heading or content will be here</b></p>
    <p> scroll down to see the effect. </p>
</div>  
  




Part 2


Add CSS

Add the style sheets:


Code Example:

        <style>
      /* back ground color and font type */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #B5DFDE;
}
  /* position of slidebar and speed time of slide action */
slidebar {
  position: fixed;
  top: -50px;
  background-color: #6C8585;
  display: block;
  width: 100%;
  transition: top 0.2s;
}
/* links inside the bar */
slidebar a {
  display: block;
  color: #f2f2f2;
  float: left;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
}
/* hover with mouse effects */
slidebar a:hover {
  background-color: #ddd;
  color: black;
}
</style>  
  
Try yourself >>


Visit our CSS Media Queries tutorial to create responsive mobile friendly navigation menus and more CSS Media Queries tutorial



Part 3


Add Javascript


Code Example:

        <script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("slidebar").style.top = "0";
  } else {
    document.getElementById("slidebar").style.top = "-50px";
  }
}
</script>  
  
Try yourself >>



we hope you enjoyed this lesson, we provide computer coding classes online free , we offer you the best coding courses, our main goal is to allow students to learn the best programming courses, learn front end development to server side development easily and free, we are one of the best online learning sites for programming



Navigation