Angularjs auto-hide navigation

Question

i would like to make my navigation menu that is fixed to the top of my page to auto-hide the same way you can make the taskbar in windows hide when you have "auto-hide taskbar" enabled

I would like it to hide and then when you move your mouse close to the top of the screen for it to become visible again and then hide again when you move your mouse away from the top.

What is the best way i can make this happen?

Thanks in advance for your answers!

juco · Accepted Answer · 2015-03-17 11:30:26Z

3

So many different ways to do this but a very quick think about it ...

You have your HTML nav bar...

<div nav-directive>
  <div class="nag" ng-class="{ 'visible': visible }"></div>
</div>

Directive

.directive('navDirective', function() {
  return {
    restrict: 'EA', 
    link: function(scope, el) {
      scope.visible = false;

      el.bind('mouseover', function() {
         scope.visible = true;
         // You shouldn't do but may need a scope apply here, not sure... 
      });

      el.bind('mouseout', function() {
        scope.visible = false;
        // again not sure scope apply?
      });
    }
  }
});

This will get you your basic adding and removing the class visible.

Then you can use some CSS3 to get some sliding motion in.

.nav {
  top: 0px;
  position: absolute;
  transition: transform 1s ease-in;
  transform: translate(-100%, 0);
}

.nav.visible {
  transform: translate(0, 0);
}

edited Mar 17, 2015 at 11:30

juco

6,3423 gold badges27 silver badges42 bronze badges

answered Aug 6, 2014 at 19:03

dev

4,0093 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3537630 Over a year ago

Thanks, this was helpful, but when it moves up, its not possible to move the mouse onto it to reveal it again as it isn't within the frame of the window anymore, i solved this by moving it up 80% and leaving a small portion for the user to move the mouse onto. but ideally i would like it to reveal itself when the user places the mouse on the area where it would have been if it where visible. But none the less, i found this helpful and it is working alright for me

Collectives™ on Stack Overflow

Angularjs auto-hide navigation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related