[分享]css3手机菜单导航

CSS3手机菜单导航是一种好看而且方便的UI设计。通过使用CSS3，可以轻松地创建一个响应式的菜单，使移动设备用户可以轻松浏览网站。 / 定义菜单样式 / menu { display: none; ...

CSS3手机菜单导航是一种好看而且方便的UI设计。通过使用CSS3，可以轻松地创建一个响应式的菜单，使移动设备用户可以轻松浏览网站。

/* 定义菜单样式 */
#menu {
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  overflow: auto;
}

/* 定义菜单项样式 */
.menu-item {
  display: block;
  font-size: 1.2rem;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

/* 定义菜单切换按钮样式 */
#menu-toggle {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 1rem;
  z-index: 100;
  background-color: rgb(0, 0, 0);
}

/* 定义菜单切换图标样式 */
#menu-toggle span {
  display: block;
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 2px;
}

/* 定义菜单打开状态的样式 */
body.menu-open {
  overflow: hidden;
}
#menu {
  display: block;
} 

这里，我们定义了一个隐藏的菜单，一个可以展开或折叠的菜单按钮，菜单项以及菜单项被选中时的样式。当按钮被点击时，菜单会显示或隐藏。

通过使用CSS的@media查询，可以为不同的设备定义不同的样式。例如:

/* 在小屏幕下将菜单隐藏起来 */
@media only screen and (max-width: 768px) {
  #menu-toggle {
    display: block;
  }
  #menu {
    display: none;
  }
} 

在这个示例中，当屏幕宽度小于768像素时，菜单被隐藏，菜单切换按钮显示出来。

总之，使用CSS3手机菜单导航可以帮助网站在移动设备上更好地表现，提高用户体验。