使用 CSS 构建自定义粘性导航栏

pxr007

于 2022-10-20 09:29:24 发布

阅读量1k

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_47967031/article/details/127420389

版权

本文介绍了如何仅使用 CSS 构建一个自定义的响应式粘性汉堡导航栏，适用于不同屏幕尺寸。通过HTML和SCSS实现，包括导航栏样式、汉堡菜单的创建和媒体查询，以及动画效果。文章强调了CSS在构建此类功能中的潜力，鼓励开发者探索无需JavaScript的解决方案。

摘要由CSDN通过智能技术生成

导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。

人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。

为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。

在这篇文章中，我们将看到如何创建一个自定义的粘性导航栏，它可以响应所有屏幕尺寸并具有强大的功能，只使用 CSS 来创建它。CAD看图王手机会员版App，支持看图、改图、批注、测量CAD图等功能！我们还将学习如何使用 SCSS 的语法糖更快、更简洁地编写我们的 CSS 代码。

那么，让我们开始吧。

使用 HTML 和 SCSS

我们将从一些简单的东西开始，随着本文的进展逐渐深入到更复杂的东西。我们可以做的第一件事是创建导航栏，编写一些 HTML。因此，首先将此 HTML 代码复制到您最喜欢的代码编辑器或 Codepen 中。

上面给出的 HTML 代码非常简单，其中没有任何复杂的内容。我希望您注意我用于为每个元素编写类名的约定。这种为 HTML 元素编写类名的小约定称为BEM，它代表 Block、Element-、Modifier。

我们为 HTML 代码中的每个包装器元素指定一个块名称。Mikutools在线工具箱(tools.miku.ac)，内置超多实用工具，还支持图片无损放大！在这种情况下，包装器是我们的. 您也可以将其描述为父元素。<header class="header">

包装器或父级中的每个子元素都有其父级的类名，后跟两个带有唯一标识符的下划线。您可能已经注意到，在我们的例子中，它是：

<导航类= “header__nav” ID = “导航栏” >

现在，我们可以像这样为包装器中的每个子元素指定一个类名。这里要注意的另一件事是header，即使它们是标题的子子项，我也以单词开头它们的类名。这样做是为了保持一致性，在编写 SCSS 代码时，它最终会对我们有很大帮助。我们稍后会看到这一点。

要继续，您可以在 SCSS 文件中复制以下给定的 SCSS 代码：

$color -蓝色: #00315c; 
$color -紫色：#6f479f; 
$颜色-黑色：#202020；
$color -灰色：#edebeb; 
$颜色-白色：#fcfcfc；     

html {
  字体-大小：62.5 %; 
  滚动行为：平滑；_ } 


html ,
正文{
  宽度: 100 %; 
  边距：0px ；
  填充：0px ；
  溢出-x ：隐藏；_ }   


body { 
  font - family : "Montserrat" , sans - serif ; } 


.header {
  height: 20vh;
  background-color: $color-gray;
  padding: 1.5rem;
  position: relative;

  &__nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 4rem 5rem;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    width: 100%;
    transition: 0.6s;
  }

  &__list {
    list-style: none;
    display: flex;
  }

  &__item {
    &:not(:last-child) {
      margin-right: 5rem;
    }
  }

  &__link {
    font-size: 1.6rem;
    color: $color-blue;
    font-weight: 400;
    text-decoration: