В этой статье описывается раздвигающий эффект, внедренное JS, на основе конструктора. Поделитесь этим для вашей ссылки, следующим образом:
Скриншот экрана бега выглядит следующим образом:
Конкретный код заключается в следующем:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-equiv = "content-type" = "; Меню </title> <script language = "javascript"> function sdmenu (id) {if (! document.getElementById ||! Document.getElementsBytagName) вернуть false; this.menu = document.getElementById (id); this.submenus = this.menu.getelementsbytagname ("div"); this.remember = true; this.speed = 1; this.markcurrent = true; this.onesmonly = false;} sdmenu.prototype.init = function () {var maininstance = this; for (var i = 0; i <this.submenus.length; i ++) this.submenus [i] .getelementsbytagname ("span") [0] .onclick = function () {mainstance.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"; перерыв; }}*/ if (this.remember) {var regex = new regexp ("sdmenu_" + encodeuricomponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (match) {var stass = match [1] .split (""); for (var i = 0; i <stasts.length; i ++) this.submenus [i] .classname = (stass [i] == 0? "Coupplaps": ""); }}}; Sdmenu.prototype.togglemenu = function (sumenu) {if (submenu.classname == "Collapsed") this.expandmenu (submenu); else this.collapsemenu (sumenu);}; sdmenu.prototype.expandmenu = function (submenu) {var fullheight = sumenu.getelementsbytagname ("span") [0] .offsetheight; var links = sumenu.getelementsbytagname ("a"); for (var i = 0; i <links.length; i ++) fullheight+= links [i] .offsetheight; var moveby = math.round (this.speed * links.length); var maininstance = это; var intid = setInterval (function () {var curheight = sumenu.offsetheight; var newheight = curheight + moveby; if (newheight <fullheight) sumenu.style.height = newheight + "px"; else {clearInterval (intid); Sumper.style maninstance.memorize (); //this.collapsethers(submenu); }; Sdmenu.prototype.collapsemenu = function (submenu) {var minheight = submenu.getelementsbytagname ("span") [0] .offsetheight; var moveby = math.round (this.speed * submenu.getelementsbytagname ("a"). Length); var maininstance = это; var intid = setInterval (function () {var curheight = sumenu.offsetheight; var newheight = curheight - moveby; if (newheight> minheight) sumenu.style.height = newheight + "px"; else {clearinterval (intid); "Couplaps"; this.submenus [i] .classname! = "Coupplaps") this.collapsemenu (this.submenus [i]); }}. for (var i = 0; i <this.submenus.length; i ++) stass.push (this.submenus [i] .classname == "коллапс"? 0: 1); var d = new Date (); d.settime (d.gettime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + encodeuricomponent (this.menu.id) + "=" + stasts.join ("") + "; истекает =" + d.togmtstring () + "; path =/"; }}; var mymenu; window.onload = function () {mymenu = new sdmenu ("my_menu"); mymenu.init ();}; </script> <style type = "text/css"> html, body {hight: 100%; поля: 0; размер шрифта: 12px; } span {founale:#f0dfbe; Граница: 1px solid #ffffff; РЕШЕНЬ-ЛЕРФ: 6px Solid #F2A31B; Ширина: 228px; Высота: 23px; дисплей: блок; высота линии: 23px; Лебь накладки: 20px; } a {padding: 3px 0 3px 40px; дисплей: блок; Цвет:#636363; } #my_menu {width: 255px; Фон:#f7f2e4; высота: 100%; } div.sdmenu div.collapsed {height: 25px;} div.sdmenu div {overflow: hidden; } </style> </head> <body> <div style = "float: left" id = "my_menu"> <div> <pan> menu one </span> <a href = "#" >> subcontent </a> <a href = "#" >> subcontent </a> <href = "#" href = "#" >> Subcontent Menu </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> subcontent </a> <a href = "#" >> subcontent </a> </div> <div> <pran> subcontent </a> </a> "#>"#> "#>"#> "#>"#> "> Субконтент </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> subcontent </a> <a href = "#" >> subcontent </a> <a href = "#>> menu subcontent </a> <a href ="#>> menu subcontent </a> <a href = "#>>. href = "#" >> Subcontent Menu </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> Subcontent </a> <a href = "#" >> subcontent </a> </a> <a href = "#" >> menu </a> ">"> ">"> ">"#">"> ">"> ">"#">"> ">"> "#href ="#">> Menu </a> </a> <A href ="#" Субконтент </a> <a href = "#" >> Subcontent Menu </a> <a href = "#" >> subcontent menu </a> <a href = "#" >> subcontent menu </a> <a href = "#" >> subcontent </a> <a href = "#>> menu subcontent </a> <a href ="#>>. href = "#" >> Меню Три суб-контента </a> </div> <div> <pan> Меню Три </span> <a href = "#" >> Меню Три субконта </a> <a href = "#" >> Меню Три субпонтента </a> <a href = "#" >> Меню Три субпонтента </a> </a> "#href ="#">> Menu Three Sub-Content </a> </a>"#"#" >>. Субконтент </a> </div> <div> <pan> Меню Три субконта </a> <a href = "#" >> Меню Три суб-контента </a> <a href = "#" >> Меню Три субконта </a> <a href = "#" >> Мену Три субконтента </a> <a href = "#-content </a> <a href ="#-content </a> </ hRef = "#-content </a> </ href =" #-conte. <a href = "#" >> Меню Три субкондента </a> <a href = "#" >> Меню Три субконта </a> <a href = "#" >> Меню Три субконта </a> <a href = "#" >> Меню Три субконъекта </a> <A href = "#" >>. href = "#" >> Меню Три суб-контента </a> <a href = "#" >> Меню Три суб-контента </a> <a href = "#" >> Меню Три субконта </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 »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.