Tip: you can modify some code before running
<p>Js + div pop-up layer City switch code<br /><! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><Html xmlns = "http://www.w3.org/1999/xhtml"><br /><Head><br /><Title> js + div pop-up layer City switch code </title><br /><Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/><br /><Style type = "text/css"><br />Body, html {margin: 0; padding: 0; font-size: 12px; font: 12px/1.5 arial; background: # A2DDEF ;}<br /># Head {background: #454545; height: 110px ;}<br />. Shell {margin: 20px 0 0 50px ;}<br />. Shell strong {background: #606060; color: # eee; font-size: 16px; padding: 5px 20px; margin-left: 60px ;}<br />. Shell span {color: # fff; font-size: 12px; margin-left: 10px; cursor: pointer ;}<br /># Logo img {border: none ;}<br /># Menu {position: absolute; background: #515151; color: # eee; padding: 4px ;}<br /># Menu ul, # menu li {margin: 0; padding: 0; list-style: none ;}<br /># Menu li a {display: block; font-size: 14px; color: # fff; text-decoration: none; zoom: 1}<br /># Menu li a: hover, # menu li. focus a {background: #606060 ;}<br /># Menu li {float: left; display: inline; width: 78px; line-height: 25px; text-align: center; margin-left: 4px ;}<br /># Menu ul {border-bottom: 1px dashed #666; float: left; padding: 5px; width: 340px ;}<br />. Menufoot {clear: both; text-align: right; padding: 10px ;}<br />. Menufoot a {color: #339999; text-decoration: none; padding: 5px 10px ;}<br />. Menufoot a: hover {background: #606060; color: #339999; text-decoration: none ;}<br />. Nav {background: #44 ABAF; height: 70px; border-top: 4px solid #338888 ;}<br /></Style><br /></Head><br /><Body><br /><Div id = "head"><br /><Div class = "shell"> <a href = "###" id = "logo"> </a><br /><Strong> Shenzhen </strong> <span id = "menuBtn"> switch cities </span> </div><br /></Div><br /><Div class = "nav"> </div><br /><Div id = "menu" style = "display: none;"><br /><Ul><br /><Li> <a href = ""> Beijing </a> </li><br /><Li> <a href = ""> Shanghai </a> </li><br /><Li> <a href = ""> Wuhan </a> </li><br /><Li> <a href = ""> Guangzhou </a> </li><br /><Li class = "focus"> <a href = ""> Shenzhen </a> </li><br /><Li> <a href = ""> Hangzhou </a> </li><br /><Li> <a href = ""> Nanjing </a> </li><br /><Li> <a href = ""> Chengdu </a> </li><br /><Li> <a href = ""> Tianjin </a> </li><br /><Li> <a href = ""> Xi'an </a> </li><br /><Li> <a href = ""> Fuzhou </a> </li><br /><Li> <a href = ""> Chongqing </a> </li><br /><Li> <a href = ""> Xiamen </a> </li><br /><Li> <a href = ""> Qingdao </a> </li><br /><Li> <a href = ""> Dalian </a> </li><br /></Ul><br /><Div class = "menufoot"> <a href = ""> other cities? </A> </div><br /></Div><br /></Body><br /><Script type = "text/javascript"><br />// <! [CDATA [<br />Ldh = {<br />Get: function (el ){<br />Return typeof el = "string "? Document. getElementById (el): el;<br />},<br />On: function (el, type, fn ){<br />El = this. get (el );<br />El. attachEvent?<br />El. attachEvent ('on' + type, function () {fn. call (el, event )}):<br />El. addEventListener (type, fn, false );<br />Return this<br />},<br />Align: function (el, el2, x, y ){<br />Var rect = this. get (el2). getBoundingClientRect (), x = x | 0, y = y | 0;<br />El. style. top = rect. top + this. get (el2). offsetHeight + y + 'px ';<br />El. style. left = rect. left + x + 'px'<br />},<br />Stop: function (e ){<br />E = e | window. event;<br />E. stopPropagation & e. stopPropagation ();<br />E. cancelBubble = true<br />},<br />Onblur: function (el, fn ){<br />El = this. get (el );<br />This. on (el, 'click', function (e ){<br />Ldh. stop ()<br />}). On (document, 'click', function (e ){<br />El. style. display = 'none ';<br />});<br />Return this<br /> }<br />};<br />Ldh. onblur ('menu '). on ('menubtn', 'click', function (){<br />Var css = ldh. get ('menu '). style;<br />If (css. display! = 'None') return;<br />Ldh. align (ldh. get ('menu '), this,-85,10 );<br />Css. display = 'block ';<br />Ldh. stop ();<br />})<br />//]><br /></Script><br /></Html></p>
Tip: you can modify some code before running
