Static to fixed menu bar

Question

I am working on a website for a school project. I have a menu bar that is floating at the top of my screen, but i want things to look nice and fancy.

I did some research on how to create a menu bar that looks like this

https://nl.malwarebytes.org/mwb-download/

Can someone help me?

Answer 1

It is important to note that the header on the example site does not transition from 'static' to 'fixed' position. It is always positioned 'fixed'.

To recreate the effects of the provided link, you need to be somewhat savvy in your choices on what gets transitioned, types of transitioning and what properties are changing.

One way to accomplish this is using jQuery to create a condition when the user has scrolled beyond the top of the window.

For instance:

HTML:

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

<div class="content">
    <!--Site content-->
</div>

CSS:

.menu{
  position:fixed;
  width:100%;
  height:100px;
  background-color:transparent;
  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

.content{
  padding:100px 60px 60px 60px; /*accomodates the fixed position header space*/

  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

/* Styles for the menu after scrollTop >= 1 */
.menu.scrolled{
  height:60px;
  background-color:black;
  color:white;
}

.menu.scrolled + .content{
  padding-top:60px;
}

JS:

$(function() {
  $(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled >= 1) {
      $('.menu').addClass("scrolled");
    } else {
      $('.menu').removeClass("scrolled");
    }
  });
});

A version containg more stylistic CSS and additional CSS transitions can be seen here: http://codepen.io/eoghanTadhg/pen/PNRNOv