本文共 3312 字,大约阅读时间需要 11 分钟。
<!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> <title>code.js.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html { margin: 0; padding: 0; font-size: 12px; font: 12px/1.5 arial; background: #A2DDEF; } #head { background: #454545; height: 110px; } .shell { margin: 20px 0 0 50px; } .shell strong { background: #606060; color: #eee; font-size: 16px; padding: 5px 20px; margin-left: 60px; } .shell span { color: #fff; font-size: 12px; margin-left: 10px; cursor: pointer; } #logo img { border: none; } #menu { position: absolute; background: #515151; color: #eee; padding: 4px; } #menu ul, #menu li { margin: 0; padding: 0; list-style: none; } #menu li a { display: block; font-size: 14px; color: #fff; text-decoration: none; zoom: 1; } #menu li a:hover, #menu li.focus a { background: #606060; } #menu li { float: left; display: inline; width: 78px; line-height: 25px; text-align: center; margin-left: 4px; } #menu ul { border-bottom: 1px dashed #666; float: left; padding: 5px; width: 340px; } .menufoot { clear: both; text-align: right; padding: 10px; } .menufoot a { color: #339999; text-decoration: none; padding: 5px 10px; } .menufoot a:hover { background: #606060; color: #339999; text-decoration: none; } .nav { background: #44ABAF; height: 70px; border-top: 4px solid #338888; } </style> </head> <body> <div id="head"> <div class="shell"> <a href="###" id="logo"> <img src="http://www.meituan.com/static//css/i/logo.gif" alt="" /></a> <strong>深圳</strong><span id="menuBtn">切换城市</span></div> </div> <div class="nav"> </div> <div id="menu" style="display: none;"> <ul> <li><a href="">北京</a></li> <li><a href="">上海</a></li> <li><a href="">武汉</a></li> <li><a href="">广州</a></li> <li class="focus"><a href="">深圳</a></li> <li><a href="">杭州</a></li> <li><a href="">南京</a></li> <li><a href="">成都</a></li> <li><a href="">天津</a></li> <li><a href="">西安</a></li> <li><a href="">福州</a></li> <li><a href="">重庆</a></li> <li><a href="">厦门</a></li> <li><a href="">青岛</a></li> <li><a href="">大连</a></li> </ul> <div class="menufoot"> <a href="">其它城市?</a></div> </div> </body> <script type="text/javascript"> //<![CDATA[ ldh = { get: function (el) { return typeof el == "string" ? document.getElementById(el) : el; }, on: function (el, type, fn) { el = this.get(el); el.attachEvent ? el.attachEvent('on' + type, function () { fn.call(el, event) }) : el.addEventListener(type, fn, false); return this }, align: function (el, el2, x, y) { var rect = this.get(el2).getBoundingClientRect(), x = x || 0, y = y || 0; el.style.top = rect.top + this.get(el2).offsetHeight + y + 'px'; el.style.left = rect.left + x + 'px' }, stop: function (e) { e = e || window.event; e.stopPropagation && e.stopPropagation(); e.cancelBubble = true }, onblur: function (el, fn) { el = this.get(el); this.on(el, 'click', function (e) { ldh.stop() }).on(document, 'click', function (e) { el.style.display = 'none'; }); return this } }; ldh.onblur('menu').on('menuBtn', 'click', function () { var css = ldh.get('menu').style; if (css.display != 'none') return; ldh.align(ldh.get('menu'), this, -85, 10); css.display = 'block'; ldh.stop(); }) //]]> </script> </html>转载地址:http://lxzmi.baihongyu.com/