jQuery側邊欄隱藏和顯示導航

admin發表於2017-10-31
jQuery

本章節分享一段程式碼例項它利用jquery和css3實現了側邊欄導航選單功能效果。

當滑鼠點選的時候能夠實現導航選單展開和摺疊，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.nav-toggle {
  z-index: 2;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 10px;
  border: 2px solid red;
  background: black;
  width: 50px;
  height: 50px;
}
.nav-toggle .toggle1,
.nav-toggle .toggle2,
.nav-toggle .toggle3 {
  transition: all linear 0.5s;
  position: absolute;
  left: 10px;
  width: 28px;
  height: 1px;
  background: white;
}
.nav-toggle .toggle1 {
  top: 15px;
}
.nav-toggle .toggle2 {
  top: 25px;
}
.nav-toggle .toggle3 {
  top: 35px;
}
.nav-open .toggle1 {
  transition: all linear 0.5s;
  top: 25px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  animation: linear rotation1 0.5s;
}
.nav-open .toggle3 {
  transition: all linear 0.5s;
  top: 25px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  animation: linear rotation2 0.5s;
}
.nav-open .toggle2 {
  transition: all linear 0.8s;
  opacity: 0.0;
  animation: linear opacity1 1.0s;
}
.nav-menu {
  z-index: 1;
  border: 2px solid red;
  background: black;
  position: absolute;
  top: 0;
  left: -210px;
  width: 200px;
  height: 360px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $('.nav-toggle').click(function () {
    if ($(this).hasClass('nav-open')) {
      $(this).removeClass('nav-open');
      $('.nav-menu').animate({
        left: '-210'
      })
    } else {
      $(this).addClass('nav-open');
      $('.nav-menu').animate({
        left: '70'
      })
    }
  })
});
</script>
</head>
<body>
  <div class="nav-toggle">
    <span class="toggle1"></span>
    <span class="toggle2"></span>
    <span class="toggle3"></span>
  </div>
  <div class="nav-menu"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.<div class="nav-menu"></div>，這是可以摺疊的導航選單，預設情況下是隱藏的。

（2）.<div class="nav-toggle"></div>，這是可以點選的按鈕，點選可以實現選單的隱藏和顯示。

（3）.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（4）.$('.nav-toggle').click(function () {})，為按鈕註冊click事件處理函式。

（5）.if ($(this).hasClass('nav-open')) {}，判斷是否具有指定的class樣式類。

（6）.$(this).removeClass('nav-open')，刪除指定的樣式類。

（7）.$('.nav-menu').animate({

  left: '-210'

})，以動畫的方式社會自元素的left屬性值，也就是讓其隱藏。

（8）.else {

  $(this).addClass('nav-open');

  $('.nav-menu').animate({

    left: '70'

  })

}，為元素新增指定的樣式類，並且同樣以動畫方式設定left屬性值。

二.相關閱讀:

（1）.hasClass()可以參閱jQuery hasClass()方法一章節。

（2）.removeClass()可以參閱jQuery removeClass()方法一章節。

（3）.animate()可以參閱jQuery animate()方法一章節。

相關文章