Magicdawn
0%

CSS彻底研究(5) - 链接&导航

发表于 分类于

1.链接

<a> 标签,href 标签表示链接地址
a:pseudo(伪类) 设置不同状态的链接
有 link-hover-active-visited
分别表示 链接正常时/悬停时/链接被激活时,也就是点击了该链接/已访问过的链接

a{}与 a:link{} 设置的都是 a 标签正常时的效果,区别在于当 a 标签的 href 属性没有设置时,a:link 无效
a:hover 悬停时效果
a:visited 以访问效果
a:active 点击链接时,但用户点击链接,关注点已经转移,通常对这个不做设置

链接按钮

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
/*链接按钮*/
a.button, a.button:visited
{
    color: #aaa;
    background-color: #000;
    text-decoration: none;
    padding: 5px 20px;
    border-radius : 5px;
}

a.button:hover
{
    color : #fff;
}
</style>

<a href="#" class="button">这是a标签造的按钮</a>

效果 :

这是 a 标签造的按钮

  • 为统一效果,设置 a,a:visited 即正常和访问过的标签为一样的样式
  • 再设置一个 hove 效果就 OK 了

2.导航

横向导航

html

1
2
3
4
5
6
7
<ul id="nav">
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
    <li><a href="#">导航5</a></li>
</ul>

做出图示效果

CSS

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
#nav
{
    list-style: none;
}

    #nav li
    {
        float: left;
        margin-left: 1px;

    }

        #nav li a, #nav li a:visited
        {
            display: block;
            text-decoration: none;
            color: aqua;
            background-color: #000;
            padding: 5px 30px;
            margin: 0;
            border-radius: 5px;
        }

            #nav li a:hover
            {
                background: red;
                color:white;
            }

在于

  • 将 li 与 a 设置为重合:将 a 设置 display:block 撑满 li
  • 给 li 设置 margin-left 分隔各按钮
  • 使用 li 的 float:left 使 li 横向排列

纵向导航

还是上面的 html 代码

效果

css 改变的地方

  • 去掉 float:left
  • 改 margin-left 为 margin-top 纵向分隔各菜单项
  • 需要给整个 ul#nav 设置一个宽度

css

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
#nav
{
    list-style: none;
    width:200px;
}

    #nav li
    {
        margin-top :1px;
    }

        #nav li a, #nav li a:visited
        {
            display: block;
            text-decoration: none;
            color: aqua;
            background-color: #000;
            padding: 5px 30px;
            margin: 0;
            border-radius: 5px;
            text-align:center;
        }

            #nav li a:hover
            {
                background: red;
                color: white;
            }

同样

  • 设置 a 标签, display:block; 使 a 标签填满所在的 li

横向级联下拉菜单

html 使用 emmet 生成

emmet 简写:

1
ul#nav>li*5>a[href="#"]{主导航$}+ul>li*5>a[href="#"]{导航$}

生成 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
44
45
46
47
48
49
50
51
52
<ul id="nav">
  <li>
    <a href="#">主导航1</a>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主导航2</a>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主导航3</a>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主导航4</a>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">主导航5</a>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
  </li>
</ul>

效果


这个需要借助 JS 来完成,在主 li hover 的时候,显示这个 li 下面的 ul

css

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
53
54
55
56
57
58
59
#nav
{
}
    /*主导航*/
    #nav > li
    {
        float: left;
        list-style: none;
    }
        /*主导航链接*/
        #nav > li > a
        {
            text-decoration: none;
            background-color: black;
            color: #999;
            margin-right: 10px;
            padding: 5px 20px;
            border-radius: 5px;
        }

            #nav > li > a:hover
            {
                color: white;
                background-color: red;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

/*子ul*/
li ul
{
    list-style: none;
    padding: 0;
    margin-top: 5px;
    background-color: red;
    display: none;
    margin-right: 10px;
}

    /*子菜单的li*/
    li ul li
    {
        /*padding: 2px 0;*/
    }

        /*子菜单a*/
        li ul li a
        {
            display: block;
            padding: 2px 0;
            text-align: center;
            text-decoration: none;
            color: white;
        }

            li ul li a:hover
            {
                background-color: black;
            }

js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
    $("#nav>li").hover(function () {
        $("ul", this).show();
        $("a", this).css({
            "border-bottom-left-radius": 0,
            "border-bottom-right-radius": 0
        });
    }, function () {
        $("ul", this).hide();
        $("a", this).css({
            "border-bottom-left-radius": "5px",
            "border-bottom-right-radius": "5px"
        });
    });
});

要点

关于圆角,这个效果是在,不 hover 的时候,有圆角,hover 的时候将顶部 a 的下圆角去掉.
要点总结:

  • 在 hover 一个 #nav>ul>li>a 时,显示#nav>ul>li>ul,这个不要设置成 hover a,而要设置成 hover li,因为子菜单(li 下的 ul)显示出来,去点子菜单时,a 标签的 hover 就不行了,显示出来了 ul,还是父 li 的一部分

纵向级联菜单

html 同上

效果

代码

css 代码

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
53
54
55
56
57
/*导航ul*/
#nav
{
    list-style: none;
    width:200px;
}
    /*主导航li*/
    #nav > li
    {
        position:relative;
    }
        /*主导航li下的a*/
        #nav > li > a, #nav > li > a:visited
        {
            text-decoration: none;
            color: #999;
            background-color: black;

            display:block;
            text-align:center;

        }

            #nav > li > a:hover
            {
                color:white;
                background-color:red;
            }

/*子菜单ul*/
li ul
{
    display: none;
    position:absolute;
    border:1px solid yellow;
    width:150px;
    list-style:none;
    padding:0;
}
    /*子菜单li*/
    li ul li
    {
    }
    /*子菜单li下的a*/
    li ul > li > a, li ul > li > a:visited
    {
        display:block;
        background-color:azure;
        color:ButtonText;
        text-align:center;
        text-decoration:none;
    }

        li ul > li > a:hover
        {
            background-color:blueviolet;
        }

js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function () {
    $("#nav>li").hover(function () {
        /*
         *ul
         *  li ----> this
         *      a
         *      ul
         */
        $("ul", this).css({
            "left": $(this).width(),
            "top" :0
        }).show();
    }, function () {
        $("ul", this).hide();
    });
});

注意

  • 将各子菜单隐藏,在主菜单 hover 的时候展开子菜单,出现在主菜单的右侧
  • 将#nav>li 设置 position 为 relative,不设置 top/bottom/left/right , 这样它们仍旧在原始位置,而且处在标准流中,成为子 ul 出现在主菜单右边的定位基础
  • 将#nav>li>ul 设置为 position : absolute ,脱离标准流,并且以最近的父元素(即上一步设置的 li position=relative)为定位基础
  • 在 js 代码中,li hover,将下面的 ul 展开,设置 top = 0 , left 为这个 li 的宽度,刚好就出现在主菜单项的右边