创建带有活动链接的侧边栏

ゝ一纸荒年。 2024-02-18 12:54 54阅读 0赞

假设我们要创建一个跟踪活动链接的侧边栏菜单。

首先，让我们创建侧边栏容器 div：

  1. <div id="sidebar-container">
  3. </div>

假设我们的数据侧边栏链接是从 ERB 文件传递的：

  1. <div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>
  3. </div>

现在，让我们在侧边栏的顶部设置一个标题：

  1. <div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>
  2.   <div class="sidebar-heading">
  3.     <%= @title %>
  4.   </div>
  5. </div>

现在，我们可以循环遍历每个链接。我们可以在包含图标和链接标题的 div 周围放置一个 href：

  1. <div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>
  2.   <div class="sidebar-heading">
  3.     <%= @title %>
  4.   </div>
  5.   <div id="menuContainer">
  6.     <% @sidebar_links.each do |link| %>
  7.       <a href="/<%= link.fetch(:path,'') %>" class="list-group-item sidebar-link">
  8.         <i class="<%= link.fetch(:icon,'') %>"></i>
  9.         <%= link.fetch(:title,'') %>
  10.       </a>
  11.     <% end %>
  12.   </div>
  13. </div>

现在，让我们来处理我们的 JS。首先，我们将在内容加载到 DOM 中时添加一个侦听器，以确保我们在正确的时间将侦听器添加到侧边栏上：

  1. document.addEventListener('DOMContentLoaded', (event) => {
  4. });

现在，让我们在浏览器中获取 URL，看看哪个链接应该处于活动状态。我们还将设置对链接的引用：

  1. document.addEventListener('DOMContentLoaded', (event) => {
  3.   const currentPath = window.location.pathname;
  4.   const sidebarLinks = document.querySelectorAll('.sidebar-link');
  5. });

现在，让我们循环遍历每个链接并重置其活动状态。为此，我们将从所有链接中删除活动类样式，然后仅将活动类样式重置为 href 为浏览器 URL 的链接：

  1. document.addEventListener('DOMContentLoaded', (event) => {
  3.   const currentPath = window.location.pathname;
  4.   const sidebarLinks = document.querySelectorAll('.sidebar-link');
  5.   sidebarLinks.forEach((link) => {
  7.     link.classList.remove('active');
  8.     if (link.getAttribute('href') === currentPath) {
  10.       link.classList.add('active');
  11.     }
  12.   });
  13. });

最后，我们可以添加样式：

  1. #sidebar-container {
  3.   width: 20vw;
  4.   height: 100vh;
  5.   min-height: 100vh;
  6.   background-color: black;
  7.   color: #fff;
  8. }

#sidebar-container：这是一个 CSS ID 选择器。它选择带有 的 HTML 元素id=“sidebar-container”。它将宽度设置为视口宽度 (vw) 的 20%，将高度设置为视口高度 (vh) 的 100%，并将最小高度设置为 100vh，确保它始终至少占据视口的整个高度。它还将背景颜色设置为黑色，将文本颜色设置为白色。

  1. #sidebar-container .sidebar-heading {
  3.   font-size: calc(1.275rem + .3vw)!important;
  4.   border-bottom: 1px solid #EEEEEE;
  5. }

#sidebar-container .sidebar-heading：这是一个 CSS 后代选择器。.sidebar-heading它选择具有 的后代类的任何元素#sidebar-container。它使用函数设置字体大小calc()，该函数允许您执行计算以确定 CSS 属性值。该!important声明增加了该 CSS 规则的优先级。

  1. #sidebar-container .list-group-item {
  3.   display: flex;
  4.   text-decoration: none;
  5.   color: white;
  6.   transition: background-color 0.3s;
  7.   border: none;
  8.   font-size: 1rem;
  9. }

#sidebar-container .list-group-item：这将选择.list-group-item具有 的后代类的任何元素#sidebar-container。它将显示属性设置为 flex，允许灵活的布局。它还删除文本装饰（如下划线），将颜色设置为白色，为背景颜色添加过渡效果，删除边框并设置字体大小。

  1. #sidebar-container .sidebar-heading,
  2. #sidebar-container .list-group-item {
  4.   padding: 1.25rem;
  5. }

#sidebar-container .sidebar-heading, #sidebar-container .list-group-item：这会选择内部的.sidebar-heading和.list-group-item元素#sidebar-container并设置它们的填充。

  1. #sidebar-container .list-group-item:hover,
  2. #sidebar-container .list-group-item.active {
  4.   background-color: #343a40;
  5. }
  6. #sidebar-container .list-group-item:hover, #sidebar-container .list-group-item.active.list-group-item：

当元素悬停在其上（鼠标指针位于其上）或它们具有类时，这会将样式应用于元素active。

  1. #sidebar-container .list-group-item i {
  3.   font-size: 1.2em;
  4. }

#sidebar-container .list-group-item i：这会选择.list-group-itemelements 内的 i 个元素并设置它们的字体大小。

希望您喜欢创建侧边栏！

发表评论

表情：
评论列表 （有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读