下拉菜单列表
<style> *{ margin: 0px; padding: 0px; } .menu{ width: 1100px; height: 30px; background-image: url(img/魅力罗兰Music炫图18.jpg); margin-left: 200px; margin-top: 50px; } .btn{ width: 183.3px; height: 30px; float: left; text-align: center; line-height: 30px; font-size: 14px; position: relative; overflow: hidden; transition: 0.5s; } .btn:hover{ cursor: pointer; background-color: burlywood; color: white; max-height: 200px; overflow: visible; } .btn ul{ list-style: none; background-color: #008000; } </style> <body> <div class="menu"> <div class="btn">罗兰首页</div> <div class="btn">歌曲专栏 <ul> <li>流行</li> <li>摇滚</li> <li>蓝调</li> <li>民谣</li> </ul> </div> <div class="btn">音乐人专栏 <ul> <li>内地</li> <li>欧美</li> <li>日韩</li> <li>港台</li> </ul> </div> <div class="btn">乐器专栏 <ul> <li>钢琴</li> <li>小提琴</li> <li>吉他</li> <li>架子鼓</li> </ul> </div> <div class="btn">戏曲专栏 <ul> <li>京剧</li> <li>话剧</li> <li>豫剧</li> <li>黄梅戏</li> </ul> </div> <div class="btn">魅力ROLAND体验区 <ul> <li>新曲</li> <li>唱片</li> <li>MV</li> </ul> </div> </div> </body>
登录注册弹窗效果
<html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } .login { width: 100px; height: 30px; font-size: 25px; line-height: 30px; border: 1px solid black; text-align: center; background-color: darkcyan; color: white; } .login:hover { cursor: pointer; background-color: greenyellow; } .mask { width: 100%; background-color: black; opacity: 0.5; position: absolute; top: 0px; left: 0px; z-index: 90; } .log-div { width: 500px; height: 300px; background-color: white; position: fixed; z-index: 99; } </style> </head> <body> <div class="mask" hidden></div> <div class="log-div" hidden="hidden"></div> <div class="login">登 录</div> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> </body> </html> <script> var mask = document.getElementsByClassName("mask")[0]; var login = document.getElementsByClassName("log-div")[0]; var btn = document.getElementsByClassName("login")[0]; var clientWidth = document.body.clientWidth; var clientHeight = document.documentElement.clientHeight; login.style.left = clientWidth / 2 - 250 + "px"; login.style.top = clientHeight / 2 - 150 + "px"; mask.style.height = document.body.clientHeight + "px"; window.onresize = function() { var clientWidth = document.body.clientWidth; var clientHeight = document.documentElement.clientHeight; login.style.left = clientWidth / 2 - 250 + "px"; login.style.top = clientHeight / 2 - 150 + "px"; } btn.onclick = function(){ mask.removeAttribute("hidden"); login.removeAttribute("hidden"); } mask.onclick = function(){ mask.setAttribute("hidden",""); login.setAttribute("hidden","hidden"); } </script>
以上这篇JS实现下拉菜单列表与登录注册弹窗效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
js下拉菜单列表
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“JS实现下拉菜单列表与登录注册弹窗效果”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 群星《烈火青春》1988[WAV+CUE]
- 蓝心湄.2000-你开心了湄2CD【SONY】【WAV+CUE】
- 谭咏麟.1989-像我这样的朋友【宝丽金】【WAV+CUE】
- 罗文.2022-大地留着的记号·纪念罗文辞别廿载3CD【环球】【WAV+CUE】
- 670《脆弱敏感小女生》[FLAC/分轨][78.47MB]
- 时代少年团《「叁重楼」演唱会 -「楼间楼」重庆站LIVE》[320K/MP3][278.08MB]
- 时代少年团《「叁重楼」演唱会 -「楼间楼」重庆站LIVE》[FLAC/分轨][820.86MB]
- 许廷铿2017《THEULTIMATECOLLECTION》2CD[星梦娱乐][WAV+CUE]
- 许佳慧-独家情话[WAV+CUE]
- 张惠妹《ThePowerOfA-Mei》2018[SACD/ISO]
- 陈珊妮.2013-低调人生2CD【和气音乐】【WAV+CUE】
- 群星.2000-超级BAND.BAND.BAND【滚石】【WAV+CUE】
- 许志安.2002-On.Show演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 蔡琴-哈利路亚2016[SACD/ISO]
- 陈随意2011-今生只为你[豪记][WAV+CUE]