CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
michaelmcgurk
michaelmcgurk

Reputation: 6509

Navigation bar height transition using CSS

Currently I'm using the following JavaScript to animate my navigation bar. Is there a way to do this with CSS Transitions/Animations?

http://jsfiddle.net/v8fhn4qc/

$(function() {
  $('#header_nav').data('size', 'big');
});

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    if ($('#header_nav').data('size') == 'big') {
      $('#header_nav').data('size', 'small');
      $('#header_nav').stop().animate({
        height: '78px'
      }, 600);
      $("ul#menu-primary-menu").css("bottom", "35%");
    }
  } else {
    if ($('#header_nav').data('size') == 'small') {
      $('#header_nav').data('size', 'big');
      $('#header_nav').stop().animate({
        height: '100px'
      }, 600);
      $("ul#menu-primary-menu").css("bottom", "0");
    }
  }
});
#header_nav {
  background: #1588cb;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}
body {
  height: 1000px
}
nav {
  height: 100px
}
nav ul {
  position: absolute;
  bottom: 0;
  margin: 0px;
  right: 0px;
  transition: 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">

  <a id="cos_logo" href="#" title="">
    <img src="http://placehold.it/171/x30" alt="" width="171" height="30" class="no-scale" />
  </a>

  <nav class="primary menu">

    <div class="menu-primary-menu-container">

      <ul id="menu-primary-menu" class="menu">
        <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a>
        </li>
      </ul>

    </div>

  </nav>

</div>

Upvotes: 1

Views: 2571

Answers (3)

user5066707
user5066707

Reputation:

Basically don't set the #header_nav height by its ID on CSS.

Add CSS transition properties for the navbar's element height, like so:

transition:height 0.4s; -webkit-transition:height 0.4s;

Set navbar height "100px" in style attribute, at the HTML body.

The script would be something like this:

function transitionFor(e,p){
    $(e).css('transition',p);
    $(e).css('-webkit-transition',p);
    $(e).css('-o-transition',p);
    $(e).css('-ms-transition',p);
}

transitionFor('#header_nav','height 0.3s');

$(window).scroll(function(e){
    if($(window).scrollTop()<10){ // initial scroll position detected
         $('#header_nav').css('height','100px'); // big
    }else{ // scroll position bigger...
         $('#header_nav').css('height','60px'); // small
    }
});

*Recommended: make navbar overflow hidden*

Here's it working:

http://jsfiddle.net/r4xprh65/13/

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

You can add CSS transitions and then add/remove a class.

CSS

#header_nav{
    height:100px;
    transition: height .600s ease;
}

#header_nav.scrolled{
    height:78px;
}

#header_nav.scrolled ul#menu-primary-menu{
    bottom:35%;
}

Javascript

$(window).scroll(function(){
   $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});

Upvotes: 2

user5066707
user5066707

Reputation:

Yes.

nav{
   transition:height 0.5s;
   -webkit-transition:height 0.5s;
   -o-transition:height 0.5s;
   -ms-transition:height 0.5s;
} // Navbar height animated for now
.nav-small{
   height:60px; // Navbar = small
}
.nav-normal{
   height:100px; // Navbar = normal/big
}

Now change navbar's element class with jQuery:

$('nav').addClass('nav-small'); // make navbar small
$('nav').removeClass('nav-normal');

So the CSS will animate automatically.

Upvotes: 2

Related Questions