html+css+js隐藏导航栏 2.83KB

weixin_66381188

资源文件列表:

隐藏导航栏.zip 大约有4个文件

dropbox.svg 400B
index.html 5.7KB
text-indent-left.svg 517B
text-indent-right.svg 503B

资源介绍:

html+css+js隐藏导航栏

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> .aaaaaaaaaa { height: 100%; width: 50px; background-color: #ccc; border: none; color: #fff; cursor: pointer; transition: background-color 0.3s ease; } .aaaaaaaaaa:hover { background-color: #999; } .bbbbbbbbbb { display: none; } </style> </head> <body style="margin: 0;padding: 0;display: flex;flex-direction: column;height: 100vh;"> <div> <div id="jjjjjjjjjj" style="display: flex;position: fixed;justify-content: space-between;align-items: center;background-color: #f1f1f1;padding: 10px;top: -75px;width: 100%;background-color: #f8f8f8;transition: top 0.3s ease-in-out;"> <div id="cccccccccc" style="margin-right: 10px;"> <img src="text-indent-left.svg" style="width: 50px;"/> </div> <div style="text-align: center;"> <form style="display: flex;justify-content: center;align-items: center;height: 50px;width: 300px;border: 2px solid #ccc;border-radius: 5px;overflow: hidden;"> <input type="text" style="flex: 1;height: 100%;padding: 0 10px;font-size: 16px;border: none;outline: none;background: transparent;"/> <input class="aaaaaaaaaa" type="submit"/> </form> </div> <div style="margin-left: 10px;"> </div> </div> <div id="eeeeeeeeee" style="position: fixed;top: 0;left: -200px;width: 200px;height: 100vh;background-color: #f8f8f8;transition: left 0.3s ease-in-out;"> <div> <select id="mySelect" onchange="showContent()" style="width: 100%;height: 75px;font-size: 50px;text-align: center;"> <option value="1" style="font-size: 50px;">沃效乐</option> <option value="2" style="font-size: 50px;">社交</option> <option value="3" style="font-size: 50px;">工具</option> <option value="4" style="font-size: 50px;">网站</option> </select> </div> <div> <div class="bbbbbbbbbb" id="content1" style="display: block;"> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">首页</a> </div> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">设置</a> </div> </div> <div class="bbbbbbbbbb" id="content2"> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">消息</a> </div> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">新增</a> </div> </div> <div class="bbbbbbbbbb" id="content3"> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">模拟</a> </div> </div> <div class="bbbbbbbbbb" id="content4"> <div style="font-size: 40px;margin: 5px;"> <a href="" style="text-decoration: none;color: darkgray;">模拟</a> </div> </div> </div> <div id="dddddddddd" style="position: absolute;bottom: 0;"> <img src="text-indent-right.svg" style="width: 50px;"/> </div> </div> <div id="hhhhhhhhhh" style="position: fixed;bottom: 20px;right: 20px;width: 60px;height: 60px;border-radius: 50%;background-color: #f44336;color: white;text-align: center;line-height: 60px;font-size: 24px;cursor: pointer;"> <img src="dropbox.svg" style="width: 50%;height: 50%;"/> </div> </div> <div> </div> <script> var cccccccccc = document.getElementById("cccccccccc"); var dddddddddd = document.getElementById("dddddddddd"); var eeeeeeeeee = document.getElementById("eeeeeeeeee"); cccccccccc.addEventListener("click", function() { var ffffffffff = document.createElement("span"); ffffffffff.classList.add("ripple-effect"); cccccccccc.appendChild(ffffffffff); setTimeout(function(){ cccccccccc.removeChild(ffffffffff); }, 400); if (eeeeeeeeee.style.left === "-200px") { eeeeeeeeee.style.left = "0"; } else { eeeeeeeeee.style.left = "-200px"; } }); dddddddddd.addEventListener("click", function() { var gggggggggg = document.createElement("span"); gggggggggg.classList.add("ripple-effect"); dddddddddd.appendChild(gggggggggg); setTimeout(function(){ dddddddddd.removeChild(gggggggggg); }, 400); eeeeeeeeee.style.left = "-200px"; }); var hhhhhhhhhh = document.getElementById("hhhhhhhhhh"); var iiiiiiiiii = document.getElementById("iiiiiiiiii"); var jjjjjjjjjj = document.getElementById("jjjjjjjjjj"); hhhhhhhhhh.addEventListener("click", function() { var ffffffffff = document.createElement("span"); ffffffffff.classList.add("ripple-effect"); hhhhhhhhhh.appendChild(ffffffffff); setTimeout(function(){ hhhhhhhhhh.removeChild(ffffffffff); }, 400); if (jjjjjjjjjj.style.top === "-75px") { jjjjjjjjjj.style.top = "0"; } else { jjjjjjjjjj.style.top = "-75px"; } }); iiiiiiiiii.addEventListener("click", function() { var gggggggggg = document.createElement("span"); gggggggggg.classList.add("ripple-effect"); iiiiiiiiii.appendChild(gggggggggg); setTimeout(function(){ iiiiiiiiii.removeChild(gggggggggg); }, 400); headsidebar.style.top = "-75px"; }); function showContent() { var kkkkkkkkkk = document.getElementById("mySelect").value; var llllllllll = document.getElementsByClassName("bbbbbbbbbb"); for (var i = 0; i < llllllllll.length; i++) { llllllllll[i].style.display = "none"; } if (kkkkkkkkkk !== "") { document.getElementById("content" + kkkkkkkkkk).style.display = "block"; } } </script> </body> </html>

标题	大小	时间
vb.net2005+sql2005学生成绩管理软件源码	674.44KB	9月前

vlc-2673.zip	29.38MB	9月前
Qt纯代码绘制一个等待提示Ui控件-自定义控件	4.2KB	9月前
白日门服务端运维工具，免去运维的对一个个csv文件打开，这里直接打开long目录下的所有文件	147.43KB	9月前
nginx-rtmp-win32-master.zip	5.03MB	9月前

scratch素材可以用来制作scratch游戏（免费）	210.96KB	9月前
HSM-ADLib-V1.0.0	41.15KB	9月前
mysql-connector-j-8.2.0.jar	2.24MB	9月前