小刘同学的第三十三篇博文

2018-06-24 01:25:21来源：未知阅读 ()

　　一天了，都下着很冷很冷的雨啊...气温下降了很多哟，小伙伴们要照顾好自己(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ

　　今天还是没有能坚持2个小时的学习时间，每天晚上拿出2个小时来学前端很难么？不难啊，真的不难啊，为什么做不到呢？？？总是被各种各样的事情耽误，自己没有跳脱一种状态的环境，明明知道应该来图书馆自习了，可还是在和学弟聊天侃大山……

　　今天把昨天那个右键菜单的题目写完了，果然自己看一遍别人的代码，自己再敲一遍的时候就。。。很伤。。。还是得一边看着别人的代码，一边自己写一点，这样才行。。。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>homework2</title>
  6     <style>
  7         #menu {
  8             padding: 0;
  9             margin: 0;
 10             list-style: none;
 11             border: 1px solid #ccc;
 12             height: 200px;
 13             width: 150px;
 14         }
 15         #menu li {
 16             height: 39px;
 17             border-bottom: 1px solid #ccc;
 18             line-height: 39px;
 19             text-align: center;
 20         }
 21         #menu li:hover{
 22             background-color: #abcdef;
 23         }
 24         #menu li:hover a {
 25             color: white;
 26         }
 27         #menu li a {
 28             text-decoration: none;
 29             color: #000;
 30             font-size: 14px;
 31         }
 32         /*子菜单样式*/
 33         #rightMenu {
 34             padding: 0;
 35             margin: 0;
 36             list-style: none;
 37             border: 1px solid #ccc;
 38             height: 120px;
 39             width: 90px;
 40             display: none;
 41             position: absolute;
 42             background-color: gray;
 43         }
 44         #rightMenu li {
 45             height: 23px;
 46             border-bottom: 1px solid #ccc;
 47             line-height: 23px;
 48             text-align: center;
 49         }
 50         #rightMenu li:hover{
 51             background-color: #badcfe;
 52         }
 53         #rightMenu li:hover a {
 54             color: white;
 55         }
 56         #rightMenu li a {
 57             text-decoration: none;
 58             color: #000;
 59             font-size: 10px;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64 <!-- 
 65 /**
 66  * 
 67  * @author: xiaoliu
 68  * @type: NO.17-homework2
 69  * @data: 2018-01-23
 70  * @finished: 2018-01-25
 71  * 
 72  */
 73  -->
 74 <ul id="menu">
 75     <li><a href="#">角色授权</a></li>
 76     <li><a href="#">数据字典管理</a></li>
 77     <li><a href="#">菜单管理</a></li>
 78     <li><a href="#">资源管理</a></li>
 79     <li><a href="#">系统管理</a></li>
 80 </ul>
 81 <ul id="rightMenu">
 82     <li><a href="#">子角色</a></li>
 83     <li><a href="#">子字典</a></li>
 84     <li><a href="#">子菜单</a></li>
 85     <li><a href="#">子资源</a></li>
 86     <li><a href="#">子系统</a></li>
 87 </ul>
 88 <script>
 89     window.onload = function () {
 90         var rMenu = document.getElementById("rightMenu");
 91         document.getElementById("menu").oncontextmenu = function (event) {
 92             //首先，把右键菜单显示出来
 93             rMenu.style.display = "block";
 94             //再用event对象中的值，把菜单的定位值计算出来
 95             //event.pageX 能定位鼠标的left值
 96             //event.pageY 能定位鼠标的top值
 97             //像素的赋值一定要注意单位啊啊啊啊啊啊啊 + "px" + "px" + "px"
 98             rMenu.style.left = event.pageX + "px";
 99             rMenu.style.top = event.pageY + "px";
100             //最后，把browser自带的右键禁止掉
101             return false;
102         }
103         //在最后的最后，也就是点击看到rMenu之后，当再次点击时，再把rMenu隐藏
104         //这里其实没想到是直接dom.onclick.....
105         document.onclick = function () {
106             rMenu.style.display = "none";
107         }
108     }
109 </script>
110 </body>
111 </html>