新浪微博下拉菜单制作（DOM小练习）

摘要：

运用 DOM 操作元素知识点，记住鼠标的各类事件，利用 for 循环处理事件，该项练习考察 HTML + CSS + JavaScript 的运用，首先用 HTML 准备几个盒子模型，一开始想到下拉菜单用到标签 select 中的 option ，但经过实践，决定采用 <ul> 和 <li> 标签 还有链接标签 <a> 。第二部给 HTML 的盒子模型添加 CSS 样式，此处十分注意盒子模型的大小（本人在此耗费时间过多，基础不牢的缘故），下拉列表的箭头可以用字体图标表示，icomoon 字库 http://icomoon.io 上可以找到很多字体图标 。最后，给盒子添加 JavaScript 效果，先获取元素 ，后注册事件 鼠标经过触发 onmouseover ，当鼠标离开触发 onmouseout ，由于是多个小 li 之间的操作，想到用 for 循环 可以使每个子元素都实现触发效果。

代码如下：

HTML 代码：

<div class="nav">
        <li class="item">
            <a href='#' class="web">微博</a>
            <ul>
                <li>
                    <a href='#'>私信</a>
                </li>
                <li>
                    <a href='#'>评论</a>
                </li>
                <li>
                    <a href='#'>@我</a>
                </li>
            </ul>
        </li>
 </div>

CSS样式属性：

<!-- CSS样式属性  注意css优先级、盒子大小的计算方法 -->
    <style>
        /* 字体图标*/
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?3nf2od');
            src: url('fonts/icomoon.eot?3nf2od#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?3nf2od') format('truetype'),
                url('fonts/icomoon.woff?3nf2od') format('woff'),
                url('fonts/icomoon.svg?3nf2od#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            font-size: 18px;
            color: #333;
        }

        .nav {
            position: relative;
            margin: 5px;
            padding: 5px;
            width: 100px;
            height: 50px;
            line-height: 20px;

        }

        .nav ul {
            margin: 0;
            padding: 0;
            display: none;
        }

        .nav>.item a:hover {
            color: orange;
            background: #fef5d7;
        }

        .nav .web {
            display: block;
            padding-left: 20px;
            padding-right: 1px;
            width: 80px;
            line-height: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            /* margin-bottom: -4px; */
            background: transparent;
            /* background: #ced0d2; */
            font-size: 18px;
        }

        .nav>li>.web:hover {
            background: #ced0d2;
        }

        .nav::after {
            position: absolute;
            top: 8px;
            right: 10px;
            font-family: 'icomoon';
            content: '\ea50';
            color: orange;
            font-size: 24px;
        }

        .nav>ul>li {
            display: block;
            padding-left: 100px;
            width: 80px;
            height: 20px;
            padding-top: 6px;
            margin: -1px -1px 0px -1px;
            font-size: 18px;
        }

        .nav ul li a {
            display: block;
            padding-left: 20px;
            width: 80px;
            height: 20px;
            padding-top: 12px;
            margin-top: -1px;
            padding-bottom: 12px;
            align-content: center;
            border: 1px solid orange;
        }
</style>

JavaScript 代码：

<script>
        // 1.获取元素 nav 和 lis
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        // 2. 注册事件，鼠标经过就触发（onmouseover)，鼠标离开不触发（onmouseout）
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
</script>

效果图：

★★★ 欢迎批评指正！

参考：http://t.csdn.cn/mKzdf