城市切换

来源：互联网发布：js设置form的action 编辑：程序博客网时间：2024/04/28 13:23

<!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>