资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS实现博客前端页面（三） ——封装下拉菜单

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

_Suqin / 2905人阅读

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

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

下拉菜单 界面设计

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

搭建HTML界面 
</>复制代码 
  2.     
  3.     
  4.         
  5.         Document
  6.         
  7.         
  8.         
  9.     
  10.     
  11.         
  12.             
  13.             
    个人中心
  14.                     
  15.             
  16.             
  17.           
  18.
设置CSS样式 
</>复制代码 
  1. body {
  2.     margin:0;
  3.     padding:0;
  4.     background:#fff url(../images/header_bg.png) repeat-x;
  5.     font-size:12px;
  6.     color:#333;
  7. }
  8. ul {
  9.     padding:0;
  10.     margin:0;
  11. }
  12. ul li {
  13.     list-style-type:none;
  14. }
  15. #header {
  16.     width:900px;
  17.     height:30px;
  18.     margin:0 auto;
  19. }
  20. #header .logo {
  21.     width:100px;
  22.     height:30px;
  23.     float:left;
  24. }
  25. #header .logo img {
  26.     display:block;
  27. }
  28. #header .member {
  29.     position:relative;
  30.     width:70px;
  31.     height:30px;
  32.     left: 0;
  33.     line-height:30px;
  34.     float:right;
  35.     background:url(../images/arrow.png) no-repeat 55px center;
  36.     cursor:pointer;
  37. }
  38. #header .login{
  39.     float: right;
  40.     width: 35px;
  41.     height: 30px;
  42.     line-height: 30px;    
  43.     cursor: pointer;
  44. }
  45. #header ul {
  46.     position:absolute;
  47.     top:30px; 
  48.     background:#FBF7E1;
  49.     width:100px;
  50.     height:120px;
  51.     border:1px solid #999;
  52.     border-top:none;
  53.     padding:10px 0 0 0;
  54.     display:none;
  55. }
  56. #header ul li {
  57.     height:25px;
  58.     line-height:25px;
  59.     text-indent:20px;
  60.     letter-spacing:1px;
  61. }
  62. #header ul li a {
  63.     display:block;
  64.     text-decoration:none;
  65.     color:#333;
  66.     background:url(../images/arrow3.gif) no-repeat 5px 45%;
  67. }
  68. #header ul li a:hover {
  69.     background:#fc0 url(../images/arrow4.gif) no-repeat 5px 45%;
  70. }
设置效果

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

</>复制代码 
  1. //设置显示
  2. Base.prototype.show = function(){
  3.     for (var i=0;i
  4. 在base.js中继续封装hide()方法，用于设置隐藏元素
  5. </>复制代码 
    1. //设置显示
    2. Base.prototype.hide= function(){
    3.     for (var i=0;i
    4. 在base.js中继续封装hover()方法，用于设置鼠标移入移出事件
    5. </>复制代码 
      1. //设置鼠标移入移入移出
      2. Base.prototype.hover = function(over,out){//over为移入事件，out为移出事件
      3.     for (var i=0;i
      4. 前台调用
      5. </>复制代码 
        1. window.onload = function () {
        2.     //个人中心的下拉菜单
        3.     $().getClass("member").hover(function () {//传入over事件
        4.         $().getClass("member").css("background", "url(images/arrow2.png) no-repeat 55px center");
        5.         $().getClass("member_ul").show();
        6.     }, function () {//传入out事件
        7.         $().getClass("member").css("background", "url(images/arrow.png) no-repeat 55px center");
        8.         $().getClass("member_ul").hide();
        9.     });
        10. }
      6. </>复制代码 
        1. 以上内容来自李炎恢老师JavaScript课程实战篇笔记整理
                   
      7.                
      8.                                            
      9.                        
      10.
云服务器 GPU云服务器 html实现下拉菜单 js联动下拉菜单 js下拉菜单日期 页面下拉颜色加深js

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

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

相关文章

  • JS或Jquery

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

    CatalpaFlat 评论0 收藏0

  • 一个基于Angular+Ionic+Phonegap的混合APP实战

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

    孙淑建 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

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

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

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

    khs1994 评论0 收藏0

发表评论

登陆后可评论

0条评论

_Suqin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<