Question

我想将我的导航菜单固定在页面顶部以自动隐藏，当您启用“自动隐藏任务栏”时，可以将窗口中的任务栏隐藏起来相同

我希望它隐藏，然后当您将鼠标移动到屏幕顶部以便再次可见时，再将鼠标移离顶部时再次隐藏。

我能做到这一点的最佳方式是什么？

提前感谢您的回答！

Answer 1

有很多不同的方法可以做到这一点，但很快就会想到它......

你有HTML导航栏......

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

指令

.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?
      });
    }
  }
});

这将为您提供基本的添加和删除课程visible。

然后你可以使用一些CSS3来获得一些滑动动作。

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

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

Angularjs自动隐藏导航

1 个答案: