bootstrap实现简单侧边导航栏效果-猿码集

1. 前言

网页中的侧边栏导航是非常常见的设计，也是网页用户体验的重要组成部分。Bootstrap是一个前端开发框架，提供了丰富的UI组件，快速构建网页页面。在Bootstrap中，导航菜单是一个常见组件。本文将介绍如何使用Bootstrap实现简单侧边导航栏效果。

2. HTML结构

首先，我们需要在HTML中定义一个容器，用来包含我们的导航栏和主内容。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sidebar">
      <!-- 侧边导航栏 -->
    </div>
    <div class="col-md-9 main">
      <!-- 主内容 -->
    </div>
  </div>
</div>

我们使用Bootstrap的栅格系统，将整个容器分成两个部分。左侧是侧边导航栏的容器，右侧是主内容的容器。

3. CSS样式

接下来，我们需要定义一些CSS样式，来渲染我们的侧边导航栏。以下是一些基本的CSS样式：

.sidebar {
  background-color: #f5f5f5;
  height: calc(100vh - 51px); /* 这里的51px是顶部导航栏的高度 */
  padding: 20px;
}
.sidebar h3 {
  margin-top: 0;
  margin-bottom: 20px;
}
.sidebar ul {
  list-style: none;
  padding-left: 0;
}
.sidebar li a {
  color: #555;
  display: block;
  padding: 10px;
  text-decoration: none;
}
.sidebar li.active a {
  color: #fff;
  background-color: #337ab7;
}

其中，我们将侧边导航栏的背景色设置为灰色，高度设置为整个容器高度减去顶部导航栏的高度，这样可以使整个侧边导航栏占据浏览器整个可见区域。我们还将列表的样式设为无，去除默认的缩进与样式。链接设为块级元素，充满整个列表项。额外地，我们还为激活状态的链接（即选中的链接）设置了一个不同的样式。

4. JavaScript脚本

现在我们需要使用JavaScript脚本来实现以下功能：

当用户点击导航栏中的链接时，展开对应的内容

当页面滚动时，高亮显示当前所在的导航栏链接

4.1 展开内容

我们可以在导航栏中添加的链接的data-target属性来指定要展开的内容的id。然后，我们可以使用jQuery的.toggle()方法，控制内容的显示与隐藏。以下是JavaScript代码：

$('.sidebar li a').click(function() {
  var $this = $(this);
  
  $('.sidebar li').removeClass('active');
  $this.parent().addClass('active');
  
  var target = $this.data('target');
  $('.main > div').hide();
  $(target).show();
});

当用户点击导航栏中的链接时，首先我们要从父元素中移除所有的激活状态。将点击的链接所在的列表项添加激活状态。然后,我们使用jQuery的.show()和.hide()方法来控制内容的显示与隐藏。我们在每个内容中添加一个自定义属性data-target，来对应导航栏链接中所指定的id。

4.2 高亮当前链接

现在，我们需要在滚动页面时高亮显示当前所在的导航栏链接。我们可以使用jQuery的.scroll()方法和.offset().top属性来实现这个功能。以下是代码：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var curPage = '';
  
  $('.sidebar li a').each(function() {
    var curLink = $(this);
    var ref = curLink.data('target');
    var section = $(ref);
    
    if (section.position().top - 150 <= scrollTop) {
      curPage = ref;
    }
  });
  
  $('.sidebar li').removeClass('active');
  $('.sidebar li').find('a[data-target="' + curPage + '"]').parent().addClass('active');
});

我们使用.scroll()绑定滚动事件，然后遍历每个导航栏链接的目标元素的位置是否小于当前页面滚动的位置减去150像素。如果满足条件，我们就要将当前视窗所在的区域对应到导航栏链接上，并添加激活样式。

5. 完整代码

完整的HTML、CSS和JavaScript代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Sidebar Navigation</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-EzXqn2FCS2L/cixKV6uWvDvfxlRU2TZ9QhhLIne6r8LR3ZmKeOJpIhJwipK/PNI5" crossorigin="anonymous">
    <style>
      /* 自定义样式 */
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3 sidebar">
          <h3>导航栏</h3>
          <ul>
            <li class="active"><a href="#" data-target="#section-1">Section 1</a></li>
            <li><a href="#" data-target="#section-2">Section 2</a></li>
            <li><a href="#" data-target="#section-3">Section 3</a></li>
          </ul>
        </div>
        <div class="col-md-9 main">
          <div id="section-1">
            <h2>Section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate interdum lacus, id congue mi tristique quis. Suspendisse vestibulum est tincidunt ornare pulvinar. Integer lacinia euismod dui, a dictum arcu volutpat id. Phasellus bibendum lacinia lectus, eget dictum dui. Aenean imperdiet ante velit, et varius lectus commodo id. Aliquam condimentum ex in odio mollis interdum. Sed gravida luctus aliquam. Fusce blandit ligula a enim tincidunt, at lacinia odio vulputate. Vivamus facilisis mollis nunc quis viverra. Nam pretium sem ac pulvinar imperdiet. Proin feugiat dolor eu tellus sodales rutrum. Quisque bibendum felis eget tellus mattis, et rutrum justo tristique. Morbi ut ullamcorper felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vestibulum dignissim urna diam, at commodo nibh aliquam ac. Donec vel blandit mauris.</p>
          </div>
          <div id="section-2">
            <h2>Section 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate interdum lacus, id congue mi tristique quis. Suspendisse vestibulum est tincidunt ornare pulvinar. Integer lacinia euismod dui, a dictum arcu volutpat id. Phasellus bibendum lacinia lectus, eget dictum dui. Aenean imperdiet ante velit, et varius lectus commodo id. Aliquam condimentum ex in odio mollis interdum. Sed gravida luctus aliquam. Fusce blandit ligula a enim tincidunt, at lacinia odio vulputate. Vivamus facilisis mollis nunc quis viverra. Nam pretium sem ac pulvinar imperdiet. Proin feugiat dolor eu tellus sodales rutrum. Quisque bibendum felis eget tellus mattis, et rutrum justo tristique. Morbi ut ullamcorper felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vestibulum dignissim urna diam, at commodo nibh aliquam ac. Donec vel blandit mauris.</p>
          </div>
          <div id="section-3">
            <h2>Section 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate interdum lacus, id congue mi tristique quis. Suspendisse vestibulum est tincidunt ornare pulvinar. Integer lacinia euismod dui, a dictum arcu volutpat id. Phasellus bibendum lacinia lectus, eget dictum dui. Aenean imperdiet ante velit, et varius lectus commodo id. Aliquam condimentum ex in odio mollis interdum. Sed gravida luctus aliquam. Fusce blandit ligula a enim tincidunt, at lacinia odio vulputate. Vivamus facilisis mollis nunc quis viverra. Nam pretium sem ac pulvinar imperdiet. Proin feugiat dolor eu tellus sodales rutrum. Quisque bibendum felis eget tellus mattis, et rutrum justo tristique. Morbi ut ullamcorper felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Vestibulum dignissim urna diam, at commodo nibh aliquam ac. Donec vel blandit mauris.</p>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-DrzLll2UJO9LIX5ngsVjO6w+iXzCwN7YYooViIuZnztEJ/1+aLcSJgfaqCEAHp2N" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-tef3URufZI2STTnLvqlKDx2rKIxNyCmCJQVFPt/ChddawsMxl1tVoO2rI6yyn+nj" crossorigin="anonymous"></script>
    <script>
      /* JavaScript脚本 */
    </script>
  </body>
</html>

在上面的代码中，我们使用了Bootstrap和jQuery的CDN链接。

6. 结论

在本文中，我们使用Bootstrap和JavaScript脚本实现了一个简单的侧边导航栏效果。以更好的用户体验，更好的网站反应速度越来越受到人们的重视与青睐。

bootstrap实现简单侧边导航栏效果

1. 前言

2. HTML结构

3. CSS样式

4. JavaScript脚本

4.1 展开内容

4.2 高亮当前链接

5. 完整代码

6. 结论

相关阅读

前端开发标签

Bootstrap热门

Bootstrap更新