Cet article décrit l'effet révélateur de glissement de menu implémenté par JS en fonction du constructeur. Partagez-le pour votre référence, comme suit:
La capture d'écran de l'effet de course est la suivante:
Le code spécifique est le suivant:
<! 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"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <meta http-equiv = "contenu-type" contenu = "; charset = utf-8" / Title> JS Tree Menu </ title> <script linguisse = "javascript"> function sdmenu (id) {if (! document.getElementById ||! document.getElementsByTagName) return false; this.menu = document.getElementById (id); this.submenus = this.menu.getElementsByTagName ("div"); this.remember = true; this.speed = 1; this.markCurrent = true; this.esonly = 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 () {maininstance.togglemenu (this.parentNode); }; / * if (this.markCurrent) {var links = this.menu.getElementsByTagName ("a"); pour (var i = 0; i <links.length; i ++) if (links [i] .href == document.location.href) {links [i] .classname = "current"; casser; }} * / if (this.remember) {var regex = new regexp ("sdmenu_" + encodeuriComponent (this.menu.id) + "= ([01] +)"); var match = regex.exec (document.cookie); if (correspond) {var states = correspond [1] .split (""); for (var i = 0; i <states.length; i ++) this.submenus [i] .classname = (états [i] == 0? "Effoncé": ""); }}}; Sdmenu.prototype.togglemenu = function (submenu) {if (submenu.classname == "effondrement") this.expandmenu (subMenu); else this.collapsemenu (submenu);}; sdmenu.prototype.expandmenu = fonction (submenu) {var fullHeight = submenu.getElementsByTagname ("span") [0] .offsetHeight; var links = subMenu.getElementsByTagName ("a"); pour (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 curHeight = subMenu.offsetHeight; var newheight = curheight + moveby; if (newheight <fullheight) submenu.style.height = newheight + "px"; else {clearInterval (intid); submenu.style.height = ""; submenu.classname = ";; maininstance.Memorize ();}}, 10); //this.collapseothers(SubMenu); }; Sdmenu.prototype.collapsemenu = function (submenu) {var minHeight = subMenu.getElementsByTagName ("span") [0] .offsetheight; var movyBy = math.round (this.speed * subMenu.getElementsByTagName ("a"). Length); var maininstance = this; var intid = setInterval (function () {var curHeight = submenu.offsetheight; var newheight = curheight - moveby; if (newheight> minheight) submenu.style.height = newheight + "px"; else {clearInterval (intid); subMenu.style.height = ""; submenu.classname = "colllatesed"; maininstance.memorize ();}}, 10);}; / * sdmenu.prototype.collapseothers = function (submenu) {if (this.esmonly) {for (var i = i <this.subMenus.leng ! = "effondré") this.collapsemenu (this.submenus [i]); }}; * / Sdmenu.prototype.memorize = function () {if (this.remember) {var states = new Array (); for (var i = 0; i <this.submenus.length; i ++) states.push (this.submenus [i] .classname == "effondré"? 0: 1); var d = new Date (); D.SetTime (D.GetTime () + (30 * 24 * 60 * 60 * 1000)); document.cookie = "sdmenu_" + EncodeuRIComponent (this.menu.id) + "=" + states.join ("") + "; exires =" + d.togmmTString () + "; path = /"; }}; var mymenu; window.onload = function () {myMenu = new sdmenu ("my_menu"); myMenu.init ();}; </script> <style type = "text / css"> html, corps {hauteur: 100%; marge: 0; taille de police: 12px; } span {background: # f0dfbe; Border: 1px solide #ffffff; Border-Left: 6px solide # F2A31B; Largeur: 228px; hauteur: 23px; Affichage: bloc; hauteur de ligne: 23px; Padding-Left: 20px; } a {padding: 3px 0 3px 40px; Affichage: bloc; Couleur: # 636363; } #my_menu {width: 255px; Contexte: # F7F2E4; hauteur: 100%; } div.sdmenu div.collapsed {height: 25px;} div.sdmenu div {overflow: Hidden; } comment sous-continent </a> <a href = "#" >> Menu Sub-Content </a> <a href = "#" >> Menu Sub-Content </a> <a href = "#" >> Menu Sousnt </a> </div> <div> <span> Menu Sousnt </a> <a href = "#" >> HREF = "#" >> Sous-Content Menu </a> <a href = "#" >> Sous-Content Menu </a> <a href = "#" >> Sous-content de menu </a> <a href = "#" >> Menu sous-content </a> <a href = "#"> Menu sous-content </a> <a href = "#" >> <a href = "#" >> Menu Sub-Content </a> <a href = "#" >> Sous-Content de menu </a> <a href = "#" >> Sous-continent de menu </a> <a href = "#" >> Menu Subcontent </a> <a href = "#"> Menu menu </a> <a href = ""> " Sous-continent </a> <a href = "#" >> Menu Sub-Content </a> <a href = "#" >> Menu Sub-Content </a> <a href = "#" >> Menu Soustent </a> <a href = "#" >> Menu sous-content </a> Trois </ span> <a href = "#" >> menu Trois sous-contenu </a> <a href = "#" >> menu Trois sous-contenu </a> <a href = "#" >> menu trois sous-contentement </a> <div> <span = "#" >> Menu trois sous-contente </a> </v> <v> <pan> href = "#" >> menu trois sous-contentement </a> <a href = "#" >> menu Trois sous-contente </a> <a href = "#" >> menu Trois sous-contenu </a> <a href = "#" >> Menu trois sous-contente </a> <a href = "#"> Menu trois sous-content </a> Sous-contenu </a> <a href = "#" >> menu trois sous-contente </a> <a href = "#" >> menu trois sous-contente </a> <a href = "#" >> menu trois sous-contentement </a> <a href = "#" >> Menu trois sous-content </a> <a href = "#" >> href = "#" >> Menu trois sous-contenu </a> </div> </div> </ody> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.