基于CSS实现网页悬浮菜单效果

在此我将详细讲解一下“基于CSS实现网页悬浮菜单效果”的完整攻略。

准备工作

在开始实现悬浮菜单之前，我们需要先准备好以下内容：

HTML结构

在页面中添加一个菜单导航的HTML结构，如下所示：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</div>

CSS样式

在页面中添加一个基本的CSS样式，如下所示：

.menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.menu li {
  margin-right: 20px;
}
.menu li:last-child {
  margin-right: 0;
}
.menu a {
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s ease;
}
.menu a:hover {
  border-bottom: 2px solid #333;
}

实现悬浮菜单效果

接下来就可以实现悬浮菜单的效果了。我们可以通过添加CSS样式来实现鼠标移上去时菜单的展开和收起。

.menu ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.menu:hover ul {
  max-height: 200px; /* 菜单最大高度 */
}

通过将菜单的最大高度设置为0，再将鼠标悬浮在菜单上时，将其最大高度设置为一定值，即可实现菜单的展开和收起效果。

以下是完整的示例代码：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</div>

<style>
.menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.menu:hover ul {
  max-height: 200px; /* 菜单最大高度 */
}
.menu li {
  margin-right: 20px;
}
.menu li:last-child {
  margin-right: 0;
}
.menu a {
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s ease;
}
.menu a:hover {
  border-bottom: 2px solid #333;
}
</style>

示例说明

以下是两个实际示例，展示了如何使用不同的HTML结构和CSS样式来实现悬浮菜单效果：

示例1

在这个示例中，我们使用了另一种HTML结构和CSS样式来实现悬浮菜单的效果。

<div class="menu">
  <a href="#" class="menu__btn">菜单</a>
  <ul class="menu__list">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</div>

<style>
.menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.menu__btn {
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.menu__btn:hover {
  background-color: #333;
  color: #fff;
}
.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  border: 2px solid #333;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.menu:hover .menu__list {
  opacity: 1;
  visibility: visible;
  margin-top: 10px;
}
.menu__list li {
  margin: 0;
}
.menu__list li a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  transition: all 0.3s ease;
}
.menu__list li a:hover {
  background-color: #333;
  color: #fff;
}
</style>

示例2