首页 » JavaScript » JS 下拉菜单

最后更新于 2018年11月14日

其实普通的下拉菜单使用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)可以获取到单独的当前使用事件的元素了。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao
  1. jiuchi

    发表于:
    来自 Google Chrome 63 in windows 7

    看起来都是可以替换的了

    回复
    1. 木灵鱼儿

      发表于:
      来自 Google Chrome 72.0.3626.109 in Windows 10
      @jiuchi

      替换啥?

      回复