纯css实现蓝色圆角效果水平导航菜单代码

接下来我将分享一份实现纯css水平导航菜单的代码攻略。首先，我们需要明确的是，要实现蓝色圆角效果是通过CSS属性 border-radius 来控制元素的边框半径实现的。而通过HTML元素的嵌套结构，我们可以实现水平导航菜单的布局。下面详细介绍实现过程。

步骤 1: 准备 HTML 结构

在 <ul> 标记中嵌套 <li> 标记，用于横向导航菜单的排列，如下所示：

<nav 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>
    <li><a href="#">菜单5</a></li>
  </ul>
</nav>

步骤 2: CSS的样式设置

通过CSS选择器及属性设置，设置横向导航菜单的菜单项样式，实现蓝色圆角效果。以下是示例代码：

/*导航菜单容器样式*/
.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #0077cc;
  border-radius: 10px;
  display: inline-block;
}

/*导航菜单项样式*/
.menu li {
  float: left;
  border-right: 1px solid #fff;
}

/*导航菜单链接样式*/
.menu li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
}

/*鼠标经过导航链接时的样式*/
.menu li a:hover {
  background-color: #fff;
  color: #0077cc;
}

将以上代码保存为 .css 文件，和 HTML 结构文件连接起来，就完成了水平导航菜单的样式设置。通过设置 .menu、.menu li、.menu li a 和 .menu li a:hover 四项选择器，实现了导航菜单容器、导航菜单项及其链接的样式设置。

步骤3: 示例说明

下面我们演示两个示例让大家更好的理解这份攻略：

示例1

创建一个带标签页切换效果的水平导航菜单，只需要在HTML效果上加点改动，使用CSS来实现：

<nav class="menu">
  <ul>
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
    <li><a href="#tab3">选项卡3</a></li>
  </ul>
  <div id="tab1" class="tabcontent">选项卡1的内容</div>
  <div id="tab2" class="tabcontent">选项卡2的内容</div>
  <div id="tab3" class="tabcontent">选项卡3的内容</div>
</nav>

在 CSS 样式中添加以下代码：

/*隐藏所有选项卡内容*/
.tabcontent {
  display: none;
}

/*仅显示当前选项卡内容*/
.tabcontent:target {
  display: block;
}

在实现示例1中，我们额外添加了三项 <div> 标记用于放置选项卡内容。然后在导航菜单链接中，使用 # 符号添加所在文件中的 ID 属性，这样点击菜单链接时就会调用相应选项卡的ID。利用 CSS 样式设置 .tabcontent 和 .tabcontent:target 两个选择器，可以控制导航菜单如何切换不同标签签页的内容。

示例2

创建带动画效果的导航菜单，只需稍加改变通过 CSS 的 hover 伪类实现：

<nav 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>
    <li><a href="#">菜单5</a></li>
  </ul>
</nav>

在 CSS 样式中添加以下代码：

/*导航菜单链接样式*/
.menu li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  position: relative;
}

/*鼠标经过导航链接时的样式*/
.menu li a:hover {
  background-color: #fff;
  color: #0077cc;
}

/*鼠标经过导航链接时的动画效果*/
.menu li a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform 0.5s ease-out;
}

.menu li a:hover::before {
  transform: scaleX(1);
}

在实现示例2中，我们使用伪类 ::before 和 transform 属性以及 transition 属性来实现鼠标经过导航链接时的动画效果。当鼠标悬停在链接上时， ::before 伪类将出现并慢慢放大，同时颜色从白色变成蓝色。