其实普通的下拉菜单使用css就能够完成,但目前我们只是做最基础的操作,了解和学习JS的方法,所以css不太重要。

首先我们看下效果图:

JS 下拉菜单

我们先来分析一下我们js要做什么:

第一眼看去,当鼠标滑入个人设置里面,就会显示下拉菜单,那么这个滑入就对应onmouseover事件,当滑入后,下拉菜单弹出,那么这里我们要控制下拉菜单的显示css。

当鼠标滑出后,菜单关闭,这里对应onmouseout事件,那么依旧是使用连缀的方式来设置js。

html部分:

<header id="header">
    <div class="center">
        <img src="https://www.mulingyuer.com/usr/themes/Yodu/images/logo.png" alt="" class="logo" />
        <ul class="nav">
            <li class="nav-li">
                个人设置
                <ul class="nav-menu">
                    <li class="menu-li">设置</li>
                    <li class="menu-li">换肤</li>
                    <li class="menu-li">帮助</li>
                    <li class="menu-li">退出</li>
                </ul>
            </li>
        </ul>
    </div>
</header>

这里我们将menu菜单放入个人设置的li元素中,这样,当鼠标滑入到下拉菜单时,下拉菜单不会因为超出了个人设置的这个触发区域而消失(下拉菜单也是触发区域的一部分)。

CSS部分:

body,
.nav,
.nav-menu {
    margin: 0;
    padding: 0;
}

#header {
    height: 30px;
    font-size: 12px;
    background-color: #212427;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 70%, rgba(0, 0, 0, .2));
}

.center {
    max-width: 500px;
    margin: 0 auto;
}

.logo {
    vertical-align: middle;
    height: calc(100% - 5px);
    margin-top: 2.5px;
}

.nav {
    float: right;
    color: #fff;
    text-align: center;
}

.nav>.nav-li,
.nav-menu>li {
    list-style: none;
}

.nav>.nav-li,
.nav-menu>li {
    line-height: 30px;
    width: 100px;
    cursor: pointer;
    transition: background-color .3s;
}

.nav-menu {
    background-color: #212427;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 70%, rgba(0, 0, 0, .2));
    height: 0px;
    overflow: hidden;
    transition: height .3s;
}

JS调用:

window.onload = function() {
    $().getclass('nav-li', 'header').hover('滑入时', '滑出时');

}

我们首先获取到class为nav-li的元素集合,且是在id为header元素下的,都添加一个hover方法,这个方法会为每个元素添加一个滑入时做什么,滑出时做什么。

先做一个hover的方法:

Base.prototype.hover = function(over, out) {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i].onmouseover = over;
        this.arr[i].onmouseout = out;
    }
    return this;
};

这样的话我们为每个class为nav-li的元素加上了onmouseover 和onmouseout 事件。

下面我们就要写具体怎么操作了,我们需要让nav-menu的height为120px;因为一共四个选项,每个选项line-height:30px;30*4=120px。

window.onload = function() {
    $().getclass('nav-li', 'header').hover(function() {
        $().getclass('nav-menu', 'header').css(‘height’, ‘120 px’);
    }, function() {
        $().getclass('nav-menu', 'header').css(‘height’, ‘0’);
    });
}

当鼠标滑入时,找到class为nav-menu的元素,设置css中高度为120px;滑出时高度设置为0;这样就可以了。

下面就是深入一点的了:

我们再次看图片时会发现当鼠标滑入的时候,nav-li和下拉菜单中的li都会在鼠标滑入时背景颜色发生改变,所以我们还要对每个元素添加一个hover效果。

那我们可能会这么写:

$().getclass('nav-li', 'header').hover(function() {
        $().getclass('nav-li', 'header').css('background-color', 'rgba(0,0,0,.3)');
        $().getclass('nav-menu', 'header').css('height','120px');
    }, function() {
        $().getclass('nav-li', 'header').css('background-color', 'rgba(0,0,0,0)');
        $().getclass('nav-menu', 'header').css('height', '0');
    });
    $().getclass('menu-li', 'header').hover(function() {
        $().getclass('menu-li', 'header').css('background-color', 'rgba(0,0,0,.3)');
    },function() {
        $().getclass('menu-li', 'header').css('background-color', 'rgba(0,0,0,0)');
    });

效果图:
JS 下拉菜单2

你会发现当你滑动到任意一个元素上时,所有的元素都改变了背景色,原因就是 $().getclass('menu-li', 'header')和$().getclass('nav-li', 'header'),并不会返回单个元素啊,他是将所有的元素保存在了this.arr数组中的,然后在返回this,你再设置css,实际上for语句会将所有的元素都设置了css,这样导致所有的元素会一起改变,那么怎么办呢?

我们要将arr保存的对象改为单独一个的使用onmouseover和onmouseout的对象,也就是使用事件的元素自己本身,那么第一个切入点就是在 $().getclass('nav-li', 'header').hover(function() {},function(){});这里,这里是为这个每个对象添加事件,那么在function() {}中我们再修改css,那么我们可以将this丢入这个function中,我们都知道在事件函数中,this指向的就是调用这个事件的元素,那么我们只需要将arr重置,并arr[0]=this;就可以了。

重置的话一般可能又要写一个方法了,太过麻烦,毕竟我们$()方法也可以做到一样的效果,他是新建了一个新的实例化对象,其中就有新的arr数组,那么我们在原来的$()基础上稍微改动一下。

var $ = function(_this) {
    return new Base(_this);
}
//这里我们传入this

function Base(_this) {
    this.arr = [];
    if (_this != undefined) {
        this.arr[0] = _this;
    }
}

Base这里我们做if判断,由于我们传入的this并不是字符值,所以undefined不能加引号,然后判断这个this,如果不是undefined,说明有对象传入,那么this.arr[0] = _this; 完美。

调用:

$().getclass('nav-li', 'header').hover(function() {
    $(this).css('background-color', 'rgba(0,0,0,.3)');
    $().getclass('nav-menu', 'header').css('height', '120px')
}, function() {
    $(this).css('background-color', 'rgba(0,0,0,0)');
    $().getclass('nav-menu', 'header').css('height', '0')
});

//下面是对下拉菜单中的li添加背景色
$().getclass('menu-li', 'header').hover(function() {
    $(this).css('background-color', 'rgba(0,0,0,.3)');
}, function() {
    $(this).css('background-color', 'rgba(0,0,0,0)');
})

这样,$(this)可以获取到单独的当前使用事件的元素了。

分类: JavaScript 标签: JS 下拉菜单

评论

全部评论 3

  1. 木灵鱼儿'fans
    木灵鱼儿'fans
    Google Chrome Windows 10
    萌新前端求个压缩文件,组合不到一块555555
  2. jiuchi
    jiuchi
    Google Chrome Windows 7
    看起来都是可以替换的了
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @jiuchi替换啥?

目录