class2context实现右键弹出菜单示例代码
代码语言:html
所属分类:菜单导航
代码描述:class2context实现右键弹出菜单示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/class2context.css"> <style> .box1 { width: 200px; height: 300px; margin: 15px; display: inline-block; border-radius: 5px; text-align: left; vertical-align: middle; padding: 20px; color: #fff; } .box2 { width: 600px; min-height: 300px; margin: 15px; margin-left: auto; margin-right: auto; display: block; border-radius: 5px; text-align: left; vertical-align: middle; padding: 20px; color: #fff; } .centralBox { text-align: center; width: 100%; margin: 0 auto; } .codeFont { color: #DAE8E8; } .heightMainBox { height: 200px; } .mainimg { width: 100px; display: inline-block; transition: all .5s; top: 0; vertical-align: top; } .mainimg:hover { width: 150px; transition: all .2s; } </style> </head> <body> <div class="zzsc-container"> <div class="container"> <div class='centralBox'> <div class='class1 box1' style='background: #0FA3B1;'> <h4>A</h4> This is a demo <br> Just need to include the files: <ul> <li>class2context.js</li> <li>class2context.css</li> </ul> </div> <div class='class2 box1' style='background: #FF9B42;'> <h4>Get started!</h4> Right click over me! <div class='classSub2 box1' style='background: #5797CC; width: 130px; height: 180px!important;'> element inside element with diferent class </div> </div> <div class='class3 box1' style='background: #8BC34A;'> <h4>Use</h4> when html is charged, call the function </div> <div class='class4 box2' style='background: #9375A3;'> <h4>Use</h4> when html is charged, call the function:<br> <div class='c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0