• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 网页设计 » CSS » 正文

如何使用CSS和JavaScript创建一个粘性工具栏

小码哥 • 2年前 (2022-05-12) • CSS

在这个新教程中，我们将学习如何创建一个粘性（或固定）工具栏——也称为垂直导航菜单——带有动画工具提示，您可以在您的网站上使用这些工具栏来做各种事情。

例如，如果您是店主，您可以使用它来包含快速链接功能，用于促销特价产品、特色类别、愿望清单和联系页面等。同样，如果您是主题作者，您的工具栏可以包含主题和语言切换器、社交媒体链接、搜索框、快速可访问性选项（例如增加网站的字体大小）等等。 

我们将使用简单的 html 和 css 构建这个组件。我们将只使用一点 javascript 来切换 CSS 类以使工具栏可见和隐藏。但是，如果您喜欢冒险并且想尝试在不使用任何 JavaScript 的情况下构建这些东西，请查看我以前的教程之一。 

如何使用CSS和JavaScript创建一个粘性工具栏 第1张CSS 快速提示：如何使用纯 CSS George Martsoukos 创建画布外反馈表单

我们的粘性工具栏演示

检查我们完成的组件：


1.从一些图标开始

出于本教程的目的，我们将使用 TanahAirStudio 的一些svg UI 图标，这些图标来自 Envato Elements。TanahAirStudio 拥有大量图标集，因此如果您要查找的图标集不在下面看到的 25 个图标集中，您可以打赌您会在其他相关图标集中找到它。

如何使用CSS和JavaScript创建一个粘性工具栏 第2张

2.定义 HTML 标记

我们将定义一个包装元素，其中包含：

  • 打开工具栏的按钮。

  • 工具栏本身。在其中，我们将放置三个链接以及它们的图标和用于关闭工具栏的按钮。data-tooltip当我们将鼠标悬停在目标链接上时，每个链接都将具有将出现的属性。

默认情况下，工具栏可以可见也可以不可见。在我们的示例中，最初它将被隐藏。show-toolbar但是，我们可以通过将类附加到外部容器来更改此状态。

这是我们工具栏所需的结构：

<div class="sticky-toolbar-container">
  <button aria-label="open toolbar" type="button" class="open-toolbar toggle-toolbar">
    <svg aria-hidden="true" xmlns="https://www.w3.org/2000/svg" xml:space="preserve" width="40" height="40" viewBox="0 0 24 24">
      <path d="M12.293 20.707 3.586 12l8.707-8.707 1.414 1.414L6.414 12l7.293 7.293z" />
      <path d="M18.293 20.707 9.586 12l8.707-8.707 1.414 1.414L12.414 12l7.293 7.293z" />
    </svg>
  </button>

  <div class="sticky-toolbar">
    <a aria-label="go to the cart page" href="" data-tooltip="view cart">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40" height="40" viewBox="0 0 24 24">
        <path d="M17 16H8.387l.334-1h10.034l2.571-9H6.644l-.9-3H3v2h1.256l2.695 8.984-.708 2.125A2.995 2.995 0 0 0 4 19c0 1.654 1.346 3 3 3s3-1.346 3-3c0-.352-.072-.686-.184-1h4.369A2.943 2.943 0 0 0 14 19c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3zm1.674-8-1.429 5H8.744l-1.5-5h11.43zM8 19c0 .551-.449 1-1 1s-1-.449-1-1 .449-1 1-1 1 .449 1 1zm9 1c-.551 0-1-.449-1-1s.449-1 1-1 1 .449 1 1-.449 1-1 1z" />
      </svg>
    </a>

    <a aria-label="give us a call" href="" data-tooltip="call us">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40" height="40" viewBox="0 0 24 24">
        <path d="M15.894 22.239c-3.018 0-6.569-1.602-9.551-4.582-4.758-4.759-6-10.971-2.828-14.143a5.89 5.89 0 0 1 3.392-1.696l.76-.11 2.797 6.522-2.797 1.398c.648 1.228 1.63 2.497 2.919 3.786 1.229 1.229 2.497 2.204 3.77 2.896l1.314-2.573 6.483.926.038.827c.095 2.059-.495 3.786-1.706 4.996-1.184 1.184-2.793 1.753-4.591 1.753zM6.461 3.972a3.9 3.9 0 0 0-1.532.958c-2.3 2.299-1.004 7.48 2.828 11.313 3.834 3.833 9.014 5.126 11.314 2.828.766-.766 1.042-1.776 1.11-2.67l-3.367-.481-.646 1.294a1.974 1.974 0 0 1-1.186 1.01 2.044 2.044 0 0 1-1.583-.157c-1.44-.783-2.863-1.873-4.228-3.238-1.43-1.43-2.529-2.859-3.268-4.248a2.008 2.008 0 0 1-.14-1.561 1.989 1.989 0 0 1 1.012-1.182l1.106-.553-1.42-3.313z" />
      </svg>
    </a>

    <a aria-label="go to the contact page" href="" data-tooltip="email us">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40" height="40" viewBox="0 0 24 24">
        <path d="M2 4v16h20V4H2zm18 2v.465l-8 5.333-8-5.333V6h16zM4 18V8.869l8 5.334 8-5.334V18H4z" />
      </svg>
    </a>

    <button aria-label="close toolbar" type="button" class="close-toolbar toggle-toolbar">
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40" height="40" viewBox="0 0 24 24">
        <path d="m11.707 20.707-1.414-1.414L17.586 12l-7.293-7.293 1.414-1.414L20.414 12z" />
        <path d="m5.707 20.707-1.414-1.414L11.586 12 4.293 4.707l1.414-1.414L14.414 12z" />
      </svg>
    </button>
  </div>
</div>


3.指定主要样式

现在让我们专注于核心样式。

如何使用CSS和JavaScript创建一个粘性工具栏 第3张

以下是值得注意的事情：

  • 工具栏容器将是放置在屏幕右中位置的固定位置元素，并且具有 80 像素的固定宽度。

  • 打开工具栏的按钮将绝对定位并放置在其父级的中间。正如我们之前所讨论的，工具栏最初会在屏幕之外，这要归功于transform: translateX(100%)属性值。

  • 工具栏链接的工具提示最初将被隐藏并在我们将鼠标悬停在相关链接上时出现。要创建它们，我们将使用它们::before和::after伪元素。两者都将以正确的right值绝对定位，并且必须pointer-events: none忽略指针事件。::before伪元素将显示从其父链接的属性派生的工具提示文本，data-tooltip而::after伪元素将用作创建三角形的装饰元素。

对应的样式：

:root {
  --white: #fff;
  --cyan: #cce9eb;
  --darkcyan: #a8dadc;
  --darkblue: #023047;
}

.sticky-toolbar-container {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 80px;
  z-index: 2;
  text-align: center;
}

.sticky-toolbar-container .toggle-toolbar {
  background: var(--cyan);
}

.sticky-toolbar-container .toggle-toolbar.open-toolbar {
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
}

.sticky-toolbar-container .sticky-toolbar {
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
}

.sticky-toolbar-container .toggle-toolbar.open-toolbar,
.sticky-toolbar-container .sticky-toolbar {
  transition: transform 0.2s;
}

.sticky-toolbar-container svg {
  fill: var(--darkblue);
}

.sticky-toolbar-container .sticky-toolbar > *,
.sticky-toolbar-container .toggle-toolbar.open-toolbar {
  padding: 12px;
}

.sticky-toolbar-container .sticky-toolbar a {
  position: relative;
  display: inline-block;
  margin-bottom: 1px;
  background: var(--darkcyan);
}

.sticky-toolbar-container .sticky-toolbar a::before,
.sticky-toolbar-container .sticky-toolbar a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.sticky-toolbar-container .sticky-toolbar a::before {
  content: attr(data-tooltip);
  right: calc(100% + 5px);
  font-size: 14px;
  white-space: nowrap;
  padding: 4px 8px;
  color: var(--white);
  background: var(--darkblue);
}

.sticky-toolbar-container .sticky-toolbar a::after {
  content: "";
  right: 100%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--darkblue);
}

.sticky-toolbar-container .sticky-toolbar a:hover::before,
.sticky-toolbar-container .sticky-toolbar a:hover::after {
  opacity: 1;
}


4.添加javaScript

每次单击.toggle-toolbar按钮时，我们都会通过类切换打开工具栏按钮和工具栏本身的可见性show-toolbar。

这是所需的 JavaScript 代码：

const toggleToolbar = document.queryselectorAll(".toggle-toolbar");
const stickyToolbarContainer = document.querySelector(
  ".sticky-toolbar-container"
);

toggleToolbar.forEach(function (element) {
  element.addEventListener("click", function () {
    stickyToolbarContainer.classList.toggle("show-toolbar");
  });
});


以及相关样式：

.sticky-toolbar-container.show-toolbar .open-toolbar {
  transform: translateY(-50%) translateX(100%);
}

.sticky-toolbar-container.show-toolbar .sticky-toolbar {
  transform: none;
}


结论

在这个快速教程中，我们创建了一个动画粘性工具栏，旨在激发访问者的兴趣并提供需要立即访问的信息。希望您对此实现感兴趣，并将其包含在您即将进行的项目中。

作为练习，您可以通过仅在桌面设备上隔离切换行为并在移动设备上采用不同的方法来扩展此演示。例如，默认显示所有工具提示。


文章目录
  • 我们的粘性工具栏演示
  • 1.从一些图标开始
  • 2.定义 HTML 标记
  • 3.指定主要样式
  • 4.添加javaScript
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何使用CSS和JavaScript创建一个粘性工具栏
    文章地址：https://www.weixiaolive.com/en/index.php/post/3611.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云