角材质导航栏 - HTML

简介

角材质导航栏是一种基于 HTML 和 CSS 技术实现的网站导航栏样式。通过使用角材质、平滑过渡动画和字体图标等特点，该导航栏展现出现代感、简洁美观的特点。

实现

HTML 结构

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="fa fa-home"></i>
        <span class="link-text">Home</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="fa fa-user"></i>
        <span class="link-text">About</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="fa fa-envelope"></i>
        <span class="link-text">Contact</span>
      </a>
    </li>
  </ul>
</nav>

该导航栏使用了 HTML5 的 nav、ul、li 标签，通常放置在网页顶部或底部。其中 nav 和 ul 标签分别表示导航栏和导航项的容器，每个导航项采用 li 标签表示。导航项中包含了一个 a 标签用于链接到相应的页面，以及一个 i 标签表示对应的图标，和一个 span 标签表示对应的文字。

CSS 样式

.navbar {
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}
  
.navbar-nav {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  padding: 0.5rem;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.nav-link i {
  font-size: 1.2rem;
  margin-right: 0.5rem;
  color: #f2f2f2;
}

.link-text {
  display: none;
}

.nav-item:hover .link-text {
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .navbar-nav {
    flex-direction: row;
  }
  
  .nav-item {
    margin-right: 1rem;
  }
  
  .link-text {
    display: inline-block;
  }
}

该样式文件定义了导航栏的样式，包括背景颜色、阴影、元素边距等外观特征。其中 .navbar、.navbar-nav、.nav-item 和 .nav-link 分别对应导航栏、导航项、导航链接的样式定义。通过 hover 和 focus 等伪类，还能实现鼠标悬停和选中样式表现的变化。

示例

在线示例：https://codepen.io/alexspring05/pen/xxEaqvR

结语

角材质导航栏是一种简洁美观、易于实现的导航栏样式，适合用于各种网站。程序员可以通过 HTML 和 CSS 技术结合 FontAwesome 字体图标，快速实现这一效果。