江城子

CSS实现下拉菜单

本篇将介绍使用CSS以及JS实现下拉功能的方式。

使用纯CSS实现下拉菜单

首先定义HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div class="container">
        <input type="radio" id="item1" name="item">
        <label for="item1">Item1</label>
        <div class="context">1</div>

        <input type="radio" id="item2" name="item">
        <label for="item2">Item2</label>
        <div class="context">2</div>

        <input type="radio" id="item3" name="item">
        <label for="item3">Item3</label>
        <div class="context">3</div>
    </div>
</body>

我们希望得到的结果是，label里div的内容被隐藏。等待我们点击label标签让他们显现出来。
当然我们也可以写成

1
2
3
<label for="item1">
 <input type="radio" id="item1" name="item">
 </label>

或者通过a标签的跳转

1
2
3
4
<section>
     <a href="#item1"><h3>Item1</h3></a>
      <p id="item1">1</p>
            </section>

回到原来的方法,使用CSS3中的transition属性使动画流畅，-webkit，-moz，-ms分别是谷歌，火狐，IE的浏览器内核前缀。

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
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 80%;
        height: 400px;
        margin: 0 auto;
        margin-top: 30px;
        border: 1px solid #dddddd;
        border-radius: 1px;
    }

    input {
        display: none;
    }

    label {
        display: block;
        background-color: #F5F5F5;
        width: 99%;
        height: 40px;
        margin: 0 auto;
        border: 1px solid #dddddd;
        border-radius: 2px;
        margin-top: 5px;
        line-height: 40px;
    }

    .context {
        width: 99%;
        height: 0px;
        margin: 0 auto;
        border: 1px solid #dddddd;
        border-radius: 2px;
        visibility: hidden;
        transition: height 0.5s linear;
        -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
    }

    input:checked+label+.context {
        visibility: visible;
        height: 150px;
    }
    //伪类选择器
    </style>

使用JS实现下拉

页面结构

1
2
3
4
5
6
7
8
9
10
<div id="nav">
    <ul>
        <li onmouseover="display(this)" onmouseout="hide(this)"> //鼠标动作
            <a href="javascript:;">首页</a>
                <ul><li><a href="#">二级导航栏1</a></li>
                    <li><a href="#">二级导航栏2</a></li>
                </ul>
        </li>
   </ul>
</div>

显示和隐藏俩个函数，除了display也可以用visibility的hidden和visible属性

1
2
3
4
5
6
7
8
9
10
<script>
   
   function display(li) {
       var getNav = li.getElementsByTagName("ul"); 
       getNav.style.display = "block";
   }
   function hide(li) {
       var getNav = li.getElementsByTagName("ul");
       getNav.style.display = "none"; 
   </script>

对比俩种方式，JS实现下拉的思路十分清楚简单。所以页面的大部分交互动作都是由JS完成的。
读者若有兴趣可自己查找资料，尝试用原生JS完成一个轮播图。

本站总访问量次