jQuery底部跟隨水平導航選單

antzone發表於2017-04-18
jQuery

更多導航選單效果可以查閱特效版塊導航選單分類。

下面分享一個使用jQuery實現的底部具有跟隨效果的導航選單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
 
/*設定預設div的寬度為100%,高度自動,並且可以追加類名新增背景顏色或圖片, 最後清除浮動*/
.container {
  width: 100%;
  height: auto;
}
.container:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}
/*設定居中效果,並且賦予最小寬度,解決:拉伸瀏覽器時,擠壓元素*/
.wrapper {
  margin: 0 auto;
  width: 90%;
  min-width: 1240px;
  height: auto;
  position: relative;
}
nav {
  width: 600px;
  margin: 0 auto;
}
.nav-list {
  width: 100%;
  list-style-type: none;
}
.nav-list li {
  display: inline-block;
  margin: 5px;
  width: 90px;
  float: left;
}
.nav-list li a {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #0DAF90;
}
.slidenav {
  margin-top: 10px;
  width: 100%;
  height: 3px;
  float: left;
  box-sizing: border-box;
  box-shadow: 0 1px 10px #ccc;
}
.slide-span {
  border-bottom: 3px solid #0daf90;
  box-shadow: 2px 2px 10px #0DAF90;
  float: left;
  width: 100px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  var slideli = $(".nav-current").index() * 100;
  $(".slide-span").css({
    "margin-left": slideli
  }, 500);
  $("nav ul li a").hover(function() {
    var slidelistart = $(this).parents().index();
    var slideli = ($(this).parents().index()) * 100;
    $(".slide-span").stop().animate({
      "margin-left": slideli
    }, 500);
  }, function() {
    var slideli = $(".nav-current").index() * 100;
    $(".slide-span").stop().animate({
      "margin-left": slideli
    }, 500);
  })
})
</script>
</head>
<body>
  <div class="container">
    <div class="wrapper">
      <nav>
        <ul class="nav-list" id="nav-list">
          <li class="nav-current">
            <a href="#"><span class="nav-span"></span></a>
          </li>
          <li>
            <a href="#"><span class="nav-span">螞蟻部落一</span></a>
          </li>
          <li>
            <a href="#"><span class="nav-span">螞蟻部落二</span></a>
          </li>
          <li>
            <a href="#"><span class="nav-span">螞蟻部落三</span></a>
          </li>
          <li>
            <a href="#"><span class="nav-span">螞蟻部落四</span></a>
          </li>
          <li>
            <a href="#"><span class="nav-span">螞蟻部落五</span></a>
          </li>
        </ul>
        <div class="slidenav"><span class="slide-span"></span></div>
      </nav>
    </div>
  </div>
</body>
</html>

相關文章