This article will continue to add various menu effects I wrote in native JS. Although I searched a lot on the Internet, I still like to write it myself!
This is the previous article: JavaScript practical combat (navigation menu with collecting and releasing animation effects)
The following is the optimized complete code, optimized CSS style, simplified event functions, reduced HTML levels, and deleted at least 20 lines of redundant code.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { //===========Scaling animation menu var ul = document.getElementById('ul'); if(ul.addEventListener){ ul.addEventListener('mouseover',listener1,true); ul.addEventListener('mouseout',listener2,true); ul.addEventListener('click',listener3,false); }else if(ul.attachEvent){ //Compatible with IE8 and previous versions ul.attachEvent('onmouseover',listener1,false); ul.attachEvent('onmouseout',listener2,false); ul.attachEvent('onclick',listener3,false); } function listener1(event){ //event = event||window.event; //Compatible with IE8 and previous versions var target = event.target||event.srcElement; //Compatible with IE8 and previous versions if(target.tagName.toLowerCase() === 'li') { var div1 = target.getElementsByTagName('div')[0]; div1.style.display = 'block'; div1.style.opacity = 1; } } function listener2(event){ //event = event||window.event; var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ var div1 = target.getElementsByTagName('div')[0]; div1.style.display = 'none'; div1.style.opacity = 0; div1.onmouseover = function(){ div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function(){ div1.style.display = 'none'; div1.style.opacity = 0; }; } } var bool = true; function listener3(event) { var event = event || window.event; var target = event.target || event.srcElement; if (target.className === 'show-hide') { var adiv = target.nextElementSibling; if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true} var height = 90, changeH, opacity, id; if (bool) { changeH = 0; opacity = 0; var text = target.innerHTML.slice(0,-1); target.innerHTML = text+' -'; (function show() { if (changeH > height) {clearTimeout(id);return} changeH += 5; opacity += 0.06; console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; adiv.style.display = 'block'; id = setTimeout(function () { clearTimeout(id); show(); }, 16.7); })(); bool = false; } else { changeH = height; opacity = 1; var text = target.innerHTML.slice(0,-1); target.innerHTML = text+' +'; (function hidden() { if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return} changeH -= 10; opacity -= 0.11; console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; id = setTimeout(function () { clearTimeout(id); hidden(); }, 16.7); })(); bool = true; } } } } } }; </script> <style> *{ margin: 0; padding: 0; } a,img{border:0;} ul{ position: absolute; top: 20px; left: 30px; z-index: 100; } #ul li{ display: inline-block; position: relative; height: 30px; text-align: center; line-height: 30px; padding: 3px; border: 1px solid gray; border-radius: 10px 10px 0 0; background-color: aliceblue; cursor: pointer; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #ul li:hover{background-color: aquamarine;} .nav-div{ position: absolute; width: 100%; left: -1px; top: 37px; display: none; border: 1px solid gray; border-top: 0; border-radius:0 0 10px 10px; background-color: aliceblue; } .show-hide{ position: relative; display: block; border-radius:0 0 10px 10px; background-color: lightblue; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; border-bottom: 1px solid gray; } .show-hide:hover{background-color: lavender} .a-div{ background-color: aliceblue; display: none; border-radius:0 0 10px 10px; opacity: 0} .a{ z-index: -1; display: block; text-decoration: none; border-radius:10px; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .a:hover{background-color: lavender} </style></head><body><ul id="ul"> <li>JavaScript Practical<div> <span>Navigation Effects+</span> <div> <a href="">Can be retracted and placed submenu</a> <a href="">Switch page</a> <a href="">Continuously adding...</a> </div> <span>Other special effects+</span> <div> <a href="">Continuously adding...</a> <a href="">Continuously adding...</a> <a href="">Continuously adding...</a> <a href="">Continuously adding...</a> </div> </li> <li>JavaScript performance optimization<div> <span>Financial+</span> <div> <a href="">Today's headlines</a> <a href="">All news</a> <a href="">Previous review</a> </div> <span>Technology+</span> <div> <a href="">Today's headlines</a> <a href=""> href="">All news</a> <a href="">Review of the past</a> </div> </li> <li>Today's news<div> <span>Financial+</span> <div> <a href="">Today's headlines</a> <a href="">All news</a> <a href="">All news</a> <a href="">Review of the past</a> </div> <span>Technology+</span> <div> <a href="">Today's headlines</a> <a href="">All news</a> <a href="">Review of the past</a> </div> </li></ul></body></html>Reproduction image:
The following is the second special effect: (The specific implementation is much simpler than the first one, mainly pay attention to the CSS layout)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } a,img{border:0;} #menu{ position: absolute; top: 30px; left: 0; right: 0; margin: auto; width: 400px; border-left: 1px solid gray; border-top: 1px solid gray; background-color: lemonchiffon; text-align: center; } #menu li{ list-style: none; float: left; width: 99px; height: 30px; line-height: 30px; border-right: 1px solid gray; background-color: burlywood; color: white; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } #menu li:hover{ background-color: lemonchiffon; color: #336699; } .contain{ position: absolute; left: -1px; display: none; width: 399px; height: 300px; color: #336699; border-left: 1px solid gray; border-right: 1px solid gray; border-bottom: 1px solid gray; background-color: lemonchiffon; } </style> <script> window.onload = function(){ var menu = document.getElementById('menu'); if(menu.addEventListener){ menu.addEventListener('mouseover',show,false); menu.addEventListener('mouseout',hide,false); }else if(menu.attachEvent){ menu.attachEvent('onmouseover',show,false); menu.attachEvent('onmouseout',hide,false); } function show(event){ var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ target.firstElementChild.style.display = 'block'; }else if(target.parentNode.tagName.toLowerCase() === 'li'){ target.style.display = 'block'; } } function hide(event){ var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ target.firstElementChild.style.display = 'none'; }else if(target.parentNode.tagName.toLowerCase() === 'li'){ target.style.display = 'none'; } } } </script></head><body><div id="menu"> <ul> <li id="menu1">Siufu's special effects1 <div>111111111111</div> </li> <li id="menu2">Siufu's special effects2 <div>22222222222222222222</div> </li> <li id="menu3">Siufu's special effects3 <div>33333333333</div> </li> <li id="menu3">Siufu's special effects3 <div>3333333333</div> </li> <li id="menu4">Sufu's special effects 4 <div>4444444444444444</div> </li> </ul></div></body></html>Reproduction image:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.