jquery+css实现侧边导航栏效果

下面我就来详细讲解“jquery+css实现侧边导航栏效果”的攻略。

1. 准备工作

首先需要准备的是jquery和css文件。可以通过相应的CDN链接或者下载文件到本地。

2. HTML结构

侧边导航栏的HTML结构主要包括两个部分：导航栏头部和导航栏内容。可以通过以下示例粘贴到HTML代码中：

<div class="nav-header">
  <h3 class="logo">Logo</h3>
  <button class="nav-toggle"><i class="fa fa-bars"></i></button>
</div>
<div class="nav-content">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

3. CSS样式

接下来需要通过CSS样式来实现侧边导航栏的效果。可以使用以下代码：

/* 导航栏整体样式 */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #333;
  color: #fff;
}

/* 导航栏logo样式 */
.logo {
  margin: 0;
  padding: 0 20px;
  font-size: 24px;
}

/* 导航栏toggle样式 */
.nav-toggle {
  margin-right: 20px;
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* 导航栏内容整体样式 */
.nav-content {
  position: fixed;
  top: 0;
  left: -200px;
  z-index: 100;
  width: 200px;
  height: 100%;
  background-color: #2c3e50;
  overflow-x: hidden;
  transition: 0.5s;
}

/* 导航栏内容ul、li样式 */
.nav-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav-content ul li {
  margin: 20px 0;
}

.nav-content ul li a {
  display: block;
  padding: 10px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.nav-content ul li a:hover {
  background-color: #34495e;
}

4. jQuery代码

接下来需要使用jQuery代码来实现侧边导航栏的展开和关闭。可以使用以下代码：

$(function() {
  $('.nav-toggle').click(function() {
    $('.nav-content').toggleClass('show-nav');
  });
});

示例

这里提供两个示例供大家参考：

1. 侧边导航栏同时支持PC和移动端显示

由于移动端和PC端的屏幕尺寸不同，在展示侧边导航栏时需要进行不同的布局。可以使用以下代码实现：

/* PC端导航栏样式 */
@media (min-width: 768px) {
  /* 导航栏内容整体样式 */
  .nav-content {
    position: static;
    top: auto;
    left: auto;
    z-index: 0;
    width: 100%;
    height: 60px;
    background-color: transparent;
    overflow-x: visible;
    transition: none;
  }

  /* 导航栏内容ul、li样式 */
  .nav-content ul {
    display: flex;
    flex-direction: row;
  }

  .nav-content ul li {
    margin: 0 10px;
  }

  .nav-content ul li a {
    display: inline-block;
    padding: 10px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
  }
}

/* 移动端导航栏样式 */
@media (max-width: 767px) {
  /* 导航栏内容整体样式 */
  .nav-content {
    position: fixed;
    top: 0;
    left: -200px;
    z-index: 100;
    width: 200px;
    height: 100%;
    background-color: #2c3e50;
    overflow-x: hidden;
    transition: 0.5s;
  }

  /* 导航栏内容ul、li样式 */
  .nav-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: block;
  }

  .nav-content ul li {
    margin: 20px 0;
  }

  .nav-content ul li a {
    display: block;
    padding: 10px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
  }
}

1. 侧边导航栏展开后遮盖整个页面

可以通过后面添加一层全屏遮罩来实现：

/* 导航栏遮罩层样式 */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

/* 导航栏展开时遮罩层显示 */
.show-nav + .nav-overlay {
  display: block;
}

同时，在侧边导航栏的HTML结构中加入以下代码：

<div class="nav-overlay"></div>

然后在jQuery代码中修改为以下代码：

$(function() {
  $('.nav-toggle').click(function() {
    $('.nav-content').toggleClass('show-nav');
    $('.nav-overlay').toggle();
  });
});

可以实现侧边导航栏展开时遮盖整个页面。

以上就是“jquery+css实现侧边导航栏效果”的完整攻略，希望对您有所帮助。