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

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

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

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

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

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

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

<div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>
      <div class="sidebar-heading">
        <%= @title %>
      </div>
      <div id="menuContainer">
        <% @sidebar_links.each do |link| %>
          <a href="/<%= link.fetch(:path,'') %>" class="list-group-item sidebar-link">
            <i class="<%= link.fetch(:icon,'') %>"></i>
            <%= link.fetch(:title,'') %>
          </a>
        <% end %>
      </div>
    </div>

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

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

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

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

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

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

#sidebar-container {
        
      width: 20vw;
      height: 100vh;
      min-height: 100vh;
      background-color: black;
      color: #fff;
    }

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

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

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

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

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

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

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

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

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

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

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

希望您喜欢创建侧边栏！