html+css+js隐藏导航栏
资源内容介绍
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>