[分享]css3悬浮顶端导航菜单

CSS3是CSS的最新标准之一，它引入了许多新的特性和功能，其中之一便是悬浮顶端导航菜单。这种菜单可以固定在网页的顶部，使用户可以方便地访问网站的不同部分。/ 设置导航菜单样式 / nav { : f...

CSS3是CSS的最新标准之一，它引入了许多新的特性和功能，其中之一便是悬浮顶端导航菜单。这种菜单可以固定在网页的顶部，使用户可以方便地访问网站的不同部分。

/* 设置导航菜单样式 */
nav {
  position: fixed; /* 固定在页面顶部 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px;
  z-index: 999; /* 显示在页面最顶层 */
}

/* 设置菜单项样式 */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
}

nav li {
  margin: 0 20px; /* 菜单项之间的间距 */
}

nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* 添加渐变效果 */
}

/* 鼠标悬浮时变色 */
nav a:hover {
  background-color: #666;
} 

通过上述代码，我们可以轻松地实现一个简单的悬浮顶端导航菜单。当然，根据实际需求，我们可以对样式进行定制，添加特效和交互效果，使导航菜单更加美观和实用。