旋转时隐藏导航栏

旋转时隐藏导航栏是一种常见的界面设计需求，可以提高用户体验。以下是一些可以实现该功能的方法和技术：

1. 使用CSS媒体查询实现响应式布局。在屏幕旋转时，可以通过CSS媒体查询来检测屏幕方向，并相应地调整导航栏的显示方式。
2. 使用JavaScript监听屏幕旋转事件。在屏幕旋转时，可以通过JavaScript监听屏幕旋转事件，并相应地调整导航栏的显示方式。
3. 使用CSS Grid或Flexbox布局实现响应式布局。CSS Grid和Flexbox布局可以轻松地实现响应式布局，并且可以根据屏幕方向来调整导航栏的显示方式。

以下是一个使用CSS媒体查询实现响应式布局的示例代码：

/* 默认情况下，导航栏是可见的 */
nav {
  display: block;
}

/* 当屏幕宽度小于等于768px时，导航栏被隐藏 */
@media (max-width: 768px) {
  nav {
    display: none;
  }
}

在这个示例中，当屏幕宽度小于等于768px时，导航栏被隐藏。当屏幕宽度大于768px时，导航栏被显示。

总之，实现旋转时隐藏导航栏的功能需要使用响应式布局技术，并根据屏幕方向来调整导航栏的显示方式。