最近要做个某管理系统的界面，然后涉及到右键菜单，因为之前没有做过所以就做了一下~感觉还可以，不过我个人不是很喜欢右键菜单的这种形式。
操作：在固定区域内点击鼠标右键出现菜单，然后选择任意一项后进行对应页面的跳转。刚开始的想法是用catch..case..的方法，对应不同的选项，只改变弹出层里的内容，但是内容都要用jQuery生成拼接，所以选用了比较简单的页面跳转。
下面就只贴上一个示例页面的相关代码。
先上效果图:
**index.html主要代码**
<div > <ul> <li>管理应用</li> <li>添加应用</li> <li>维护应用账号</li> <li>修改密码</li> <li>示例界面</li> </ul> </div> <div> </div> <div> 主界面 </div>
**page_test.html主要代码**
<div> 主界面 </div> <div> <div> <div> 管理应用 <img src="https://www.jb51.net/images/close.png" alt=""> </div> <div> <div> <div>应用分类：总部</div> <ul> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> <li><img src='https://www.jb51.net/images/45x45/qq.jpg' alt=''> <span>QQ</span></li> </ul> </div> <div> <div>添加应用</div> <div> <form action=""> <table> <tr> <td>应用机构：</td> <td> <select> <option value=""></option> </select> </td> </tr> <tr> <td>应用类型：</td> <td> <select> <option value=""></option> </select> </td> </tr> <tr> <td>应用名称：</td> <td> <input type="text"> </td> </tr> <tr> <td>应用代码：</td> <td> <input type="text"> <span>(字母、数字及组合；唯一)</span> </td> </tr> <tr> <td>接入类型：</td> <td> <select> <option value=""></option> </select> </td> </tr> <tr> <td>超时时间：</td> <td> <select> <option value=""></option> </select> </td> </tr> <tr> <td>选择图标：</td> <td> <input type="text"> <span>选择</span> </td> </tr> <tr> <td>应用地址：</td> <td> <input type="text"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="删除"> <input type="button" value="重置"> <input type="button" value="保存"> </td> </tr> </table> </form> </div> </div> </div> <div></div> </div> </div>
**reset.css代码（引入主页）**
*{ padding: 0; margin: 0; font-family: '微软雅黑' } #mask{ position: absolute; left: 0; top: 0; z-index: 9000; display: block; } #myMenu{ position: absolute; display: none; z-index: 9999; background: white; border: 1px solid; width: 130px; height: 130px; } ul li{ list-style: none; height: 25px; line-height:25px; font-size: 14px; cursor: pointer; margin-left: 5px; border-bottom: 1px solid black; } ul li:nth-child(5){ border-bottom:none; } #textbox{ background: orange; width: 380px; border: 2px solid; } a{ text-decoration: none; color: black; } a:hover{ color: white; background: black; }
**main.css代码（引入主页和跳转页）**
*{ font-size: 16px; color:black; padding: 0; margin: 0; font-family: 微软雅黑; } /*.top{ background: url("https://www.jb51.net/images/close.png")760px center no-repeat; }*/ .top img{ float: right; margin-top: 13px; margin-right: 20px; } /*遮罩样式*/ #maskbox{ position:absolute; left:0; top:0; height: 100%; width: 100%; background:rgba(0,0,0,0.6); } #maskbox .module1{ width: 800px; height: 500px; border-radius: 15px; border: 1px solid #BFDCE3; margin: 0 auto; margin-top: 40px; } #maskbox .top{ border-radius: 15px 15px 0 0; height: 46px; line-height: 46px; width: 800px; background-color: #F1F7F2; border: 1px solid #BFDCE3; text-indent: 20px; } #maskbox .mid{ height: 418px; width: 800px; background-color: white; border: 1px solid #BFDCE3; } #maskbox .end{ height: 36px; width: 800px; background-color: #F1F7F2; border-radius: 0 0 15px 15px ; border: 1px solid #BFDCE3; } .mid_left,.mid_right{ display: inline-block; height: 418px; } .mid_left{ width: 270px; float: left; border-right: 1px solid #BFDCE3; } .mid_right{ width: 528px; border-right: 1px solid #BFDCE3; } .title{ position: relative; height: 40px; line-height: 40px; text-align: center; color:#DD9A6A; border-bottom: 1px solid #BFDCE3; } .mid_right .title{ text-align: left; text-indent: 20px; } ul.icon_list{ height: 377px; width: 270px; overflow: auto; } ul.icon_list li{ border-bottom: 1px solid #BFDCE3; height: 72px; list-style: none; line-height: 72px; padding-left: 20px; } ul.icon_list li img{ vertical-align: middle; margin-right: 20px; } .text1{ width: 195px; height: 28px; } .text2{ width: 192px; height: 28px; } .button{ width: 80px; height: 28px; border-radius: 5px; background-color: white; border:1px solid #a8a8a8; font-size: 13px; } .point{ font-size: 14px; color:red; }
**test.css代码**