最近在看bootstrap框架，随便看了点之后觉得框架确实方便，但是感觉用框架之后很拘束，而且bootstrap框架也挺大，为了实现某些功能而引入框架，实在有点大材小用，所以我想把一些功能自己复现一下。

个人比较喜欢一些炫酷的东西，所以可能会整理一系列CSS实现的效果的博客，作为第一篇，就以导航栏为内容吧。

胶囊导航栏

胶囊导航栏十分常见，基本很多网站都是用这种风格，我本人也比较喜欢这种风格，此篇博客将整理普通效果，带选中状态效果，以及带下拉标签的效果。

一、普通效果导航栏

该效果只需HTML和CSS即可实现，废话不多讲直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <title>胶囊导航栏</title>
  <link rel="stylesheet" type="text/css" href="task02.css">
  <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
  <div>  
    <ul>
      <li><a href="#test1">页一</a></li>
      <li><a href="#test2">页二</a></li>
      <li><a href="#test3">页三</a></li>
      <li><a href="#test4">页四</a></li>
      <li><a href="#test5">页五</a></li>
    </ul>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
*{
  margin: 0;
  padding: 0;
}

div{
  background-color: #222222;
  height: 60px;
}

ul{
  text-align: right;  /*右对齐*/
  padding-right: 40px;

  /*
  下面两行是为了删除inline-block之间的间隙，
  第二行为了兼容Chrome，
  内容来自张鑫旭博客
  */
  
  font-size: 0;
  -webkit-text-size-adjust:none;
}

ul li{
  display: inline-block;
  padding: 0 30px;  /*不用margin以便li导航项目选中时没有空隙*/
  
}

ul li a{
  text-decoration: none;
  width: 40px;      /*防止IE出现问题*/
  display: block;      /*允许我们使用width*/
  text-align: center;
  line-height: 60px;    /*上下居中*/
  font-size: 18px;
  color: #ffffff;
}

li:hover{
  background-color: #484FFD; 
}

效果：

说一下要注意的几点：

  • 浏览器默认有padding和margin，所以此处要设置一下
  • li其实也可以使用float，但是浮动是魔鬼这句话我谨记（自张鑫旭博客），所以能不用float我也尽量不用了
  • 尽量指定a的宽度，具体不指定会出现什么问题，目前没发现，但最好指定一下吧

二、选中效果导航栏

选中效果不是hover伪类，而是当鼠标选中时，该块会处于被选中状态，此处分享两种方法（不是我想出来的）。

方法一

1
2
3
4
5
6
7
8
9
10
//方法一：jQ实现选中效果，但是刷新后效果消失
$(document).ready(function(){
  $("li").each(function(index){
    $(this).click(function(){
      //下一行防止多个选中状态
      $("li").removeClass("selectState");
      $("li").eq(index).addClass("selectState");
    })
  })
})
1
2
3
.selectState{
  background-color: #484FFD;
}

方法一用each遍历li数组，并将index值作为参数，removeClass是为了防止出现多个选中情况

另外还有一处需要注意的是inline-block产生的间隙问题

解决方法有几种，此处提出一种font-size: 0;,-webkit-text-size-adjust:none;第二处为了兼容Chrome，详情请跳转张鑫旭博客inline-block间隙解决方案

方法一的不足之处很致命，刷新之后效果就会消失，所以一般不采用这种方案。

方法二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
  var urlCurrent = location.href;
  //当然此处也可以遍历li标签，只是下面结构要改一下，查找父元素改为子元素即可
  $("a").each(function(){
    //indexOf返回查找到的字符串中首次出现位置，没找到则返回-1，后一句判断不为空
    if(urlCurrent.indexOf($(this).attr("href")) > -1 &&  $(this).attr("href") != ""){
        $(this).parent().addClass("selectState");
        console.log("success");
    }else{
      $("li").parent().removeClass("selectState");
    }
  })
  $("li").each(function(index){
    $(this).click(function(){
      //下一行防止多个选中状态
      $("li").removeClass("selectState");
      $("li").eq(index).addClass("selectState");
    })
  })
})

方法二在方法一的基础上，加了一个对a标签的遍历（也可以遍历li标签），原理是，使用location.href获取当前页面url，然后对a标签href属性，使用indexOf方法检索，若找到，则返回大于-1的值，此时将样式表加上。此时再用刷新，则依然会被选中。

三、带下拉框式导航栏

这个练习代码是看完学校教务处主页的导航栏代码后写的，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
  <title>下拉标签导航栏</title>
  <link rel="stylesheet" type="text/css" href="task03.css">
  <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
  <div class="container">  
    <div class="navigation">
      <div class="Test1">
        <a href="#test1">页一</a>
          <div class="panel1">
            <ul>
              <li><a href="#t1">例1</a></li>
              <li><a href="#t2">例2</a></li>
              <li><a href="#t3">例3</a></li>
            </ul>
          </div>
      </div>
      <div class="Test2">
        <a href="#test2">页二</a>
          <div class="panel2">
            <ul>
              <li><a href="#t4">例4</a></li>
              <li><a href="#t5">例5</a></li>
              <li><a href="#t6">例6</a></li>    
            </ul>
          </div>
      </div>
    </div>
  </div>
</body>
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
  $(".Test1").mouseenter(function(){
    $(".panel1").stop(true,true).slideDown(100);
  })
  $(".Test1").mouseleave(function(){
    $(".panel1").stop(true,true).slideUp(100);
  })
  $(".Test2").mouseenter(function(){
    $(".panel2").stop(true,true).slideDown(100);
  })
  $(".Test2").mouseleave(function(){
    $(".panel2").stop(true,true).slideUp(100);
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*{
  margin: 0;
  padding: 0;
}

.container{
  background-color: #222222;
  height: 60px;
}

li{
  list-style: none;
}

.navigation{
  float: right;
  margin-right: 100px
}

.Test1, .Test2{
  float: left;
  width: 80px;
}


.Test2 a, .Test1 a{
  text-decoration: none;
  display: block;
  text-align: center;  
  line-height: 60px;
  font-size: 18px;
  color: #ffffff;
}

.Test1:hover, .Test2:hover{
  background-color: #484FFD; 
}

.panel1 , .panel2{
  display: none;
}

.panel1 ul, .panel2 ul{
  border: 1px solid #949494;
  background-color: #ffffff;
  box-shadow: 3px 3px 5px #ADADAD;
}

.panel1 ul a, .panel2 ul a{
  color: #000000;
  font-size: 15px;
}

效果：

代码实现思路

1、用navigation包裹住导航部分，并声明右浮动，此时脱离文档流，不会影响后面布局

2、每一个大标签声明左浮动，使顺序正确

3、每一个大标签和下拉框中标签同在一个块中，以便下拉框部分能和大标签部分位置相对，也可以声明panel标签来控制下拉框宽度大小

4、使用mouseenter与mouseleave分别控制鼠标移动至目标与离开目标的不同效果

5、使用stop来控制鼠标离开时动画立即完成

6、使用box-shadow来根据不同情况控制阴影效果

7、可以在下拉框上加hover伪类来控制选中效果（该代码没有使用）

8、注意mouseenter和mouseleave控制的元素，要控制字体和下拉框的父元素才能实现鼠标离开字体或下拉框时，下拉框收回

9、fixed和absolute都能使用z-index来控制层数

结语

这是CSS实现效果的第一篇，以后陆续将整理其他效果，以便后面的使用。另外，导航栏效果很多，以后如果有机会，将整理其他一些导航栏的效果。