JS实现博客前端页面（三） ——封装下拉菜单

_Suqin 发布于2019-08-22 10:37 / 2814人阅读

摘要：在实现博客前端页面一和实现博客前端页面二中已经实现了对获取元素和样式相关的方法的封装，本文将实现下拉菜单组件封装。

在JS实现博客前端页面（一）和JS实现博客前端页面（二）中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将实现下拉菜单组件封装。

下拉菜单 界面设计

创建一个顶部header区域，放入“logo图片”和“个人中心”，鼠标滑过“个人中心”时，会显示下拉菜单，鼠标移出时会隐藏，对于下拉菜单的每一项，鼠标划过有背景样式的切换。

搭建HTML界面

设置CSS样式

body {
    margin:0;
    padding:0;
    background:#fff url(../images/header_bg.png) repeat-x;
    font-size:12px;
    color:#333;
}
ul {
    padding:0;
    margin:0;
}
ul li {
    list-style-type:none;
}
#header {
    width:900px;
    height:30px;
    margin:0 auto;
}
#header .logo {
    width:100px;
    height:30px;
    float:left;
}
#header .logo img {
    display:block;
}
#header .member {
    position:relative;
    width:70px;
    height:30px;
    left: 0;
    line-height:30px;
    float:right;
    background:url(../images/arrow.png) no-repeat 55px center;
    cursor:pointer;
}
#header .login{
    float: right;
    width: 35px;
    height: 30px;
    line-height: 30px;    
    cursor: pointer;
}
#header ul {
    position:absolute;
    top:30px; 
    background:#FBF7E1;
    width:100px;
    height:120px;
    border:1px solid #999;
    border-top:none;
    padding:10px 0 0 0;
    display:none;
}
#header ul li {
    height:25px;
    line-height:25px;
    text-indent:20px;
    letter-spacing:1px;
}
#header ul li a {
    display:block;
    text-decoration:none;
    color:#333;
    background:url(../images/arrow3.gif) no-repeat 5px 45%;
}
#header ul li a:hover {
    background:#fc0 url(../images/arrow4.gif) no-repeat 5px 45%;
}

设置效果

在base.js中继续封装show()方法，用于设置显示元素

//设置显示
Base.prototype.show = function(){
    for (var i=0;i
在base.js中继续封装hide()方法，用于设置隐藏元素
//设置显示
Base.prototype.hide= function(){
    for (var i=0;i
在base.js中继续封装hover()方法，用于设置鼠标移入移出事件
//设置鼠标移入移入移出
Base.prototype.hover = function(over,out){//over为移入事件，out为移出事件
    for (var i=0;i
前台调用
window.onload = function () {
    //个人中心的下拉菜单
    $().getClass("member").hover(function () {//传入over事件
        $().getClass("member").css("background", "url(images/arrow2.png) no-repeat 55px center");
        $().getClass("member_ul").show();
    }, function () {//传入out事件
        $().getClass("member").css("background", "url(images/arrow.png) no-repeat 55px center");
        $().getClass("member_ul").hide();
    });
}

以上内容来自李炎恢老师JavaScript课程实战篇笔记整理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90953.html

JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
一个基于Angular+Ionic+Phonegap的混合APP实战

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。这个项目做得比较早，当时是基于ionic1和angular1做的。做了四个tabs的app，首页模仿携程首页，第二页主要是phonegap调用手机核心功能，第三页模仿微信和qq聊天页，第四页模仿一般手机的表单设...

孙淑建 2019-08-26 11:46 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0