JS版网页顶部向下滑出的全国城市切换导航

2024-09-05 12:20:54

字体：大中小

来源：转载

供稿：网友

JS版网页顶部向下滑出的城市切换导航，仿sohu团购网页顶部的城市导航切换，从顶部向下滑出，方便在其他城市之间切换。使用了sohu网原版的一个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><title>网页顶部向下滑出的切换城市导航</title><style>body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:center; margin:0 auto;}table{border-collapse:collapse;border-spacing:0;}p{line-height:24px}.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}#container{ width:960px; text-align:left; margin:0 auto; }a{color:#333;text-decoration:none;}a:hover{color:#ef9b11; text-decoration:underline;}.header{ background:url(/jscss/demoimg/201403/tuan_head_01.gif) repeat-x; height:32px;}.header .topCtiy {PADDING-RIGHT: 10px; PADDING-TOP: 4px; HEIGHT: 22px}.header .topCtiy UL {FLOAT: right}.header .topCtiy LI {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: 3px; COLOR: #fff; LINE-HEIGHT: 22px; PADDING-TOP: 0px}.header .topCtiy LI.i1 {PADDING-RIGHT: 13px; PADDING-LEFT: 13px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: #e16e6e; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}.header .topCtiy LI.i2 {BACKGROUND: url(/jscss/demoimg/201403/tuan_icon10.gif) no-repeat 100% 50%; CURSOR: pointer}.header .topCtiy LI A {COLOR: #fff}.header .topCtiy LI A:hover {COLOR: #fff}.selCity {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 10; BACKGROUND: url(/jscss/demoimg/201403/tuan_bgx06.gif) #7e2725 repeat-x 50% bottom; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 2px; POSITION: relative;}.selCity .none {LEFT: 47.5%; BOTTOM: -18px; POSITION: absolute}.selCity .none A {DISPLAY: block; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg15.gif) no-repeat; WIDTH: 68px; TEXT-INDENT: -3000px; HEIGHT: 21px; TEXT-DECORATION: none}.selCity .none A:hover {DISPLAY: block; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg15.gif) no-repeat; WIDTH: 68px; TEXT-INDENT: -3000px; HEIGHT: 21px; TEXT-DECORATION: none}.selCity TABLE {MARGIN: 0px auto; WIDTH: 950px; BORDER-COLLAPSE: collapse}.selCity TABLE TD {BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 157px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; HEIGHT: 39px; TEXT-ALIGN: center}.selCity TABLE TD A {DISPLAY: block; COLOR: #fff; LINE-HEIGHT: 40px; HEIGHT: 40px; TEXT-DECORATION: none}.selCity TABLE TD A:hover {BACKGROUND: #a86e6d; COLOR: #fff; TEXT-DECORATION: none}.selCity TABLE TD A.cur {BACKGROUND: #a86e6d}.header .box {MARGIN-TOP: 36px; TEXT-ALIGN: left}.header .lab_city {MARGIN-TOP: 1px; FLOAT: left; WIDTH: 210px; COLOR: #fff; POSITION: relative; HEIGHT: 25px}.header .sel_fl {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #400a09; LEFT: -97px; PADDING-BOTTOM: 27px; WIDTH: 361px; PADDING-TOP: 23px; POSITION: absolute; TOP: 28px}.header .sel_fl TABLE {BORDER-COLLAPSE: collapse}.header .sel_fl TABLE TD {BORDER-RIGHT: #8b3d3b 1px dashed; BORDER-TOP: #8b3d3b 1px dashed; FONT-SIZE: 14px; VERTICAL-ALIGN: middle; BORDER-LEFT: #8b3d3b 1px dashed; WIDTH: 88px; COLOR: #fff; BORDER-BOTTOM: #8b3d3b 1px dashed; HEIGHT: 34px; TEXT-ALIGN: center}.header .sel_fl TABLE TD.first {BORDER-LEFT-WIDTH: 0px}.header .sel_fl TABLE TD.last {BORDER-RIGHT-WIDTH: 0px}.header .sel_fl TABLE TD A {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}.header .sel_fl TABLE TD A:hover {DISPLAY: block; LINE-HEIGHT: 34px; HEIGHT: 34px; TEXT-DECORATION: none}.header .sel_fl TABLE TD A:hover {BACKGROUND: #5c2f2e}.header .sel_fl TABLE TD A.cur {BACKGROUND: #5c2f2e}.header .lab_city .city {FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(/jscss/demoimg/201403/tuan_bg01.gif) no-repeat 100% 0px; FLOAT: left; WIDTH: 70px; LINE-HEIGHT: 25px; MARGIN-RIGHT: 16px; TEXT-ALIGN: center}.header .lab_city .txt {DISPLAY: inline-block; CURSOR: pointer; PADDING-TOP: 8px}</style></head><BODY><DIV class=selCity id=allCity style="DISPLAY: none"><DIV class=area><TABLE>  <TBODY>  <TR>    <TD>北京</TD>    <TD>上海</TD>    <TD>广州</TD>    <TD>深圳</TD>    <TD>西安</TD></TR>  <TR>    <TD>天津</TD>    <TD>南京</TD>    <TD>成都</TD>    <TD>杭州</TD>    <TD>济南</TD></TR>  <TR>    <TD>哈尔滨</TD>    <TD>海南</TD>    <TD>沈阳</TD>    <TD>大连</TD>    <TD>石家庄</TD></TR>  <TR>    <TD>长春</TD>    <TD>郑州</TD>    <TD> </TD>    <TD> </TD>    <TD> </TD>    <TD> </TD></TR></TBODY></TABLE><DIV class=none>收起</DIV></DIV></DIV><DIV class=header>	<DIV class=area>		<DIV class=r>			<DIV class="topCtiy clear">				<UL>				  <LI class=i1>北京 </LI>				  <LI class=i2 id=changeCity>切换城市 </LI>				</UL>			</DIV>		</DIV>	</DIV></DIV><SCRIPT src="/jscss/demoimg/201403/sohu.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>jQuery(function(){$("#changeCity").click(function(a){$("#allCity").slideDown(300);a.stopPropagation();$(this).blur()});$("#allCity").click(function(a){a.stopPropagation()});$(document).click(function(a){a.button!=2&&$("#allCity").slideUp(300)});$("#foldin").click(function(){$("#allCity").slideUp(300)})});</SCRIPT><br /><br /><p></p></body></html>

上一篇：jquery伸缩导航条点击向下展开菜单项

下一篇：纯CSS下拉菜单代码