Este artigo descreve o menu deslizando efeito revelador implementado pelo JS com base no construtor. Compartilhe -o para sua referência, como segue:
A captura de tela do efeito em execução é a seguinte:
O código específico é o seguinte:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-equiv = "cante"; MENU </ititle> <script linguage = "javascript"> function sdmenu (id) {if (! this.menu = document.getElementById (id); this.submenus = this.menu.getElementsByTagName ("div"); this.reMemember = true; this.speed = 1; this.MarkCurrent = true; this.onesMonly = false;} sdmenu.prototype.init = function () {var mainInstance = this; para (var i = 0; i <this.submenus.length; i ++) this.submenus [i] .getElementsByTagName ("span") [0] .OnClick = function () {mainInstance.togGlemenu (this.parentNode); }; /*if (this.markCurrent) {var links = this.menu.getElementsByTagName ("a"); for (var i = 0; i <links.length; i ++) if (links [i] .href == document.location.href) {links [i] .className = "Current"; quebrar; }}*/ if (this.Remember) {var regex = new regexp ("sdmenu_" + encodeuricomponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (corresponde) {var estates = corresponde [1] .split (""); for (var i = 0; i <estados.length; i ++) this.submenus [i] .className = (estados [i] == 0? "colapsado": ""); }}}; Sdmenu.prototype.toggleMenu = function (submenu) {if (submenu.className == "colapso") this.expandmenu (submenu); caso contrário, this.collaPleSemenu (submenu);}; sdmenu.prototype.expandMenu = function (submenu) {var fullHeight = submenu.getElementsByTagName ("span") [0] .offsetHeight; var links = submenu.getElementsByTagName ("A"); for (var i = 0; i <links.length; i ++) fullHeight+= links [i] .offSethEight; var movyby = math.round (this.speed * links.length); var mainInstance = this; var intid = setInterval (function () {var cuHeight = submenu.offsetHeight; var newHeight = curheight + moveby; if (newHeight <FullHeight) submenu.style.Height = newHeight + "px";; }}, 10); //this.collapsethers(submenu); }; Sdmenu.prototype.collaPleSemenu = function (submenu) {var minheight = submenu.getElementsByTagName ("span") [0] .offSethEight; var movyby = math.round (this.speed * submenu.getElementsByTagName ("a"). comprimento); var mainInstance = this; var intid = setInterval (function () {var cuHeight = submenu.offsetHeight; var newHeight = curheight - moveby; if (newHeight> minheight) submenu.style.Height = newHeight + "px"; else {clearInterval (intid); submenu.styledle.hExt = "; MainInstance.memorize (); ! = "colapsado") this.collapSemenu (this.submenus [i]); }};*/Sdmenu.prototype.memorize = function () {if (this.reMember) {var estats = new Array (); for (var i = 0; i <this.submenus.length; i ++) estados.push (this.submenus [i] .className == "colapsado"? 0: 1); var d = new Date (); d.setTime (d.getTime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + codeuricomponent (this.menu.id) + "=" + estats.join ("") + "; expires =" + d.togmtString () + "; path =/"; }}; var mymenu; window.onload = function () {mymenu = new sdmenu ("my_menu"); mymenu.init ();}; </sCript> <style type = "text/css"> html, corpo {altura: 100%; margem: 0; tamanho de fonte: 12px; } span {background:#f0dfbe; Border: 1px Solid #ffffff; Interação da borda: 6px sólido #f2a31b; Largura: 228px; Altura: 23px; exibição: bloco; altura de linha: 23px; Potding-Left: 20px; } a {preenchimento: 3px 0 3px 40px; exibição: bloco; Cor:#636363; } #my_menu {width: 255px; Antecedentes:#f7f2e4; Altura: 100%; } div.sdmenu div.collapsed {Hight: 25px;} div.sdmenu div {Overflow: Hidden; } </style> </ad Head> <body> <div style = "float: esquerda" id = "my_menu"> <div> <pan> menu um </span> <a href = "#" >> menu subcontent </a> <a href = "#"> Subcontent </a> <a href = "#" >> subcontent do menu </a> <a href = "#" >> subcontent do menu </a> HREF = "#" >> Subcontent de menu </a> <a href = "#" >> subcontent do menu </a> <a href = "#" >> subcontent do menu </a> <a href = "#">> menu subcontent </a> <a a href = "#">> menu <a href = "#" >> subcontent do menu </a> <a href = "#" >> subcontent do menu </a> <a href = "#" >> subcontent do menu </a> <a href = "#" >> menu subcontent </a> <a href = "" ">> Subcontent </aa> <a href = "#" >> subcontent de menu </a> <a href = "#" >> subcontent do menu </a> <a href = "#" >> menu subcontent </a> <a href = ""#"> menu subcontent </a> href Três </span> <a href = "#" >> menu três subcontont </a> <a href = "#" >> menu três subcontont </a> <a href = "#" >> menu três subcontent </a> <a href = "#"> href = "#" >> menu Três sub-contentão </a> <a href = "#" >> menu três subcontont </a> <a href = "#" >> menu três subconto </a> <a href = "#">> menu três sub-contentent </a> <a href = "#">> Sub-Conteúdo </a> <a href = "#" >> menu três subconto-contentão </a> <a href = "#" >> menu três subconto </a> <a href = "#" >> menu três subcontent </a> <a href = "#"> href = "#" >> menu Três subcontont </a> </div> </div> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.