5.项目 1-博客前端：封装库--下拉菜单

学习要点：

1.界面设计
2.设置效果

本节课，我们主要探讨一下博客网站顶部下拉菜单的制作，其中会用到几个知识点，鼠
标移入移出的 hover()方法、隐藏和显示方法 hide()和 show()。

一．界面设计

创建一个顶部 header 局域，放入 logo 和个人中心，然后制作一个下拉菜单。

QQ截图20190513094314.png

颜色参数：背景色：FBF7E1、移入背景色：FFCC00

二．设置效果

创建下来菜单，我们第一步需要把完整的显示界面搭建起来。第二步，考虑需要隐藏的
部分。最后通过鼠标移入显示隐藏部分，然后移出继续隐藏。

//设置隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}
//设置显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'block';
}
return this;
}
//设置鼠标移入移出
Base.prototype.hover = function (over, out) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
}

最后我们需要对“个人中心”本身使用 this 调用的时候，需要对类库的构造部分进行扩
展。

//前台调用
var $ = function (_this) {
return new Base(_this);
}
//基础库
function Base(_this) {
this.elements = [];
if (_this != undefined) { //这里需要判断 undefined 的对象
this.elements[0] = _this;
}
}
//前台调用部分
$().getClass('member').hover(function () {
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
$().getClass('ul').show();
}, function () {
$(this).css('background', 'url(images/arrow.png) no-repeat 55px center');
$().getClass('ul').hide();
});

感谢收看本次教程！