Js sliding menu

Source: Internet
Author: User
Tip: you can modify some code before running

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><ptml><pead><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script>function doClick_down(o){ o.className="current"; var j; var id; var e; for(var i=1;i<=4;i++){ id ="down"+i; j = document.getElementById(id); e = document.getElementById("d_con"+i); if(id != o.id){ j.className=""; e.style.display = "none"; }else{e.style.display = "block"; } } } </script> <style> body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea { margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;}ol, ul { list-style: none;}fieldset, img { border: 0;}:focus { outline: 0;}table { border-collapse: collapse; border-spacing: 0;}caption, th { text-align: left;}body { color: #5A5A5A;background-color:#deebf3; text-align: center; font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;}.clearfix { display: inline-block;}/**/* html .clearfix { height: 1%;}.clearfix { display: block;}/**/.clearfix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden;}.hidden { display: none;}html, body { height: 100%;}* html .container { height: 100%;}.container { width: 930px; min-height: 100%; margin: auto; text-align: left; background: #fff;}.container .wrap { margin: 0 10px;}.col1, .col2, .col3, .col4, .col5, .news_sort { float: left; margin-right: 10px;}.layout-cols2 .col1 { width: 630px; overflow:hidden;}.layout-cols2 .col2 { width: 270px; margin-right: 0; overflow:hidden;}.layout-cols3 .col1 { width: 280px;}.layout-cols3 .col2 { width: 310px;}.layout-cols3 .col3 { width: 300px; margin-right: 0;}.layout-cols2, .layout-cols3 { margin-bottom: 0 !important;}.layout-col2ultra h2.site-name {display:none;}.layout-col2ultra .col1 { width: 280px; overflow:hidden;}.layout-col2ultra .col2,.layout-col2ultra .col2 .span2 { width: 620px; margin-right: 0;}.layout-col2ultra .col2 .col1 { width: 310px;}.layout-col2ultra .col2 .col2 { width: 300px;}.layout-col2ultra .col2 .span2 { clear: both; margin-bottom: 10px;}.box{border:1px solid #99BBDD;margin-bottom:10px;}.box_mf{padding-top:10px;}.box_mf1{padding-top:7px;}.box_mf2{border:1px solid #99BBDD;margin-bottom:10px;width:300px;}.box_1 ul{padding:5px;}.box .center_box li{line-height:25px;font-size:12px;height:25px;overflow:hidden;}.box .center_box li span{float:right;}.box_mf2 .center_box li{line-height:25px;font-size:12px;}.box _mf2.center_box li span{float:right;}.box .down_box li{line-height:25px;font-size:12px;width:260px;height:25px;overflow: hidden;}.box .down_box li span{float:right;}.box_bt {background: url(title_icon.gif) no-repeat 10px 12px #f6f6f6;padding:4px;padding-left:24px;font-size:14px;font-weight:bold;margin:5px 7px 4px 7px;color:#275C91;}.box_bt a:link{color:#275C91;}.box_bt a:visited{color:#275C91;}.box_bt a:hover{color:#275C91;text-decoration:underline;}.box_text{color:#8C8C8C;text-indent:24px;line-height:21px;margin:0px 7px;background:url(title_bg.gif) repeat-x bottom;padding-bottom:6px;}.box_title{background:url(news_bg.gif); position: relative; height: 28px;}.box_title h3 { height: 26px; line-height: 26px; margin: 1px 1px 0; padding: 0 10px; font-size: 100%; color: #275c91;}.box_title h3 a:link{color:#275c91;}.box_title h3 a:visited{color:#275c91; }.box_title h3 a:hover{color:#BF001F;}.box_title span {float:right;padding-top:5px;padding-right:5px;}.box .left_box li{line-height:24px;height:24px;overflow:hidden;}.box .left_box li span{float:right;}.box .hot_box li{background:url(nav_icon.gif) no-repeat 5px 10px;padding-left:14px;line-height:26px;}.box .hot_box li a:link{color:#2C6AA9;}.box .hot_box li a:visited{color:#2C6AA9; }.box .hot_box li a:hover{color:#2C6AA9;text-decoration:underline;}.box .tj_box li{background:url(title_bg.gif) repeat-x bottom;padding:5px 7px 0px 10px;color:#A3A3A3;clear:both;height:105px;overflow:hidden;}.box .tj_box li span{float:left; padding-right:10px;}.box .zz_box li{padding:7px 7px;color:#A3A3A3;clear:both;height:175px;overflow:hidden;}.box .zz_box li span{float:left; padding-right:10px;}.box .pl_box li{border-bottom:1px solid #ccc; padding:5px 5px 3px 5px;color:#666666;}.box .pl_box li span{color:#999999;}.box .pl_box li h6{text-align:left;padding-bottom:6px;text-indent:24px;color:#FF3300;}.box .pl_box li a.vo{color:#2C6AA9;}.ad_left{margin-bottom:10px;}.box .cy_box li{background:url(title_bg.gif) repeat-x bottom;padding:10px 5px;}.box .cy_box li h4{font-size:14px;color:#2C2C2C;font-weight:bold;padding-bottom:5px;}.box .cy_box li a:link{color:#2C6AA9;}.box .cy_box li a:visited{color:#2C6AA9;}.box .cy_box li a:hover{color:#2C6AA9;text-decoration:underline;}.box .sc_box li{background:url(title_bg.gif) repeat-x bottom;padding:11px;line-height:21px;}.box .sc_box li span{float:left; padding-right:10px;}.box .sc_box li span b{display:block;text-align:center;padding-top:5px;}.box .sc_box li a:link{color:#2C6AA9;}.box .sc_box li a:visited{color:#2C6AA9;}.box .sc_box li a:hover{color:#2C6AA9;text-decoration:underline;}.box .tab h3,.box .tab ul.tabitem,.box .tab ul.tabitem li { float: left;font-size:12px;}.box .tab ul.tabitem { line-height: 2.3;}.box .tab ul.tabitem li { margin: 0 -1px -1px 0; position: relative;}.box .tab ul.tabitem a { display: block; padding: 0 5px;}.box .tab ul.tabitem a:link,.box .tab ul.tabitem a:visited { color: #275c91;}.box .tab ul.tabitem a.current,.box .tab ul.tabitem a:hover { border: solid #99bbdd; border-width: 0 1px; padding: 0 4px; background: #fff;}html:first-child .box .tab ul.tabitem a.current,html:first-child .box .tab ul.tabitem a:hover { position: relative; padding-bottom: 1px;}a:link, a:visited { color: #333; text-decoration: none;}/* Header==========================================================*/.header { margin: 0 10px 5px;}.topnav { position: relative; margin: 0 -10px 5px; padding: 0 15px; height: 2em; line-height: 2; background: #f5f5f5; border-bottom: 1px solid #e3e3e3;}.topnav, .topnav a:link, .topnav a:visited { color: #666;}.topnav a:hover, .topnav a:active { color: #036; text-decoration: underline;}#toptext{float:left;margin:0 auto;font:12px Tahoma,sans-serif;line-height:30px;}#topnavlist{float:right;}#topnavlist li{float:left;padding:0 8px 0 13px;background:url(redarrow.gif) no-repeat 0 10px;line-height:30px;height:30px;}.brand, .ad-banner { float: left; margin-right: 7px;}.ad-banner { width: 468px; height: 60px; overflow: hidden;}.ad-text { float: right; width: 245px; height: 58px; line-height: 1.6;background:#f0f7fe;BORDER: #d7e9fc 1px solid;}.ad-text li { width: 49.9%; float: left; text-indent: 3px; white-space: nowrap;}.ad-text1 { float: right; }.brand h1.site-name { display: none;}.brand a img { display: block;}.picTxBox{clear:both;padding:5px 0 5px;height:70px;overflow:hidden; border-bottom:1px #D5D5D5 dashed;}.picTxBox div{float:left;width:86px;}.picTxBox img{width:80px;border:1px #D5D5D5 solid;height:60px; margin-left:5px; margin-top:5px;}.picTxBox ul{float:right;width:175px;}.picTxBox ul li{width:175px;padding-left:5px;background:url(/images/icon_li.gif) no-repeat 0 7px;line-height:22px;height:22px;overflow:hidden;}/* Nav==========================================================*/.nav { position: relative; margin: 0 10px 10px; background: url(nav_bg.png) no-repeat 0 -36px;}.navinner { background: url(nav_bg.png) no-repeat 100% -72px;}.navlist { height: 36px; line-height: 36px; overflow: hidden; margin: 0 10px; background: url(nav_bg.png) repeat-x 0 0;}.nav li { float: left; display: inline; margin: 0 0 0 -2px; padding: 0 4px 0 6px; background: url(nav_bg.png) no-repeat 0 -108px;}.nav a { display: block; width: 102px; text-align: center; font-size: 120%;}.nav a:link, .nav a:visited { color: #fff;}.nav a.current, .nav a:hover, .nav a:active { color: #fff; font-weight: bold; background: url(nav_bg.png) no-repeat 50% -144px;}.subnav { position: absolute; top: 41px; left: 0; float: left; height: 27px; line-height: 27px; white-space: nowrap; background: url(nav_bg.png) no-repeat 0 -180px;}* html .subnav { margin: 0 10px 0 -10px; /* IE 6 and below */}.subnav p { padding: 0 10px; background: url(nav_bg.png) no-repeat 100% -234px;}.subnav p span { display: block; background: url(nav_bg.png) repeat-x 0 -207px;}.subnav p.pointer { position: absolute; top: -4px; left: 0; height: 5px; width: 11px; padding: 0; margin-left: 20px; text-indent: -999em; background: url(nav_bg.png) repeat-x 0 -261px;}.subnav a { display: inline; padding: 0; font-size: 100%;}[class~="subnav"] a { padding: 0 3px;}.subnav, .subnav a:link, .subnav a:visited { color: #235e99;}.subnav a:hover, .subnav a:active { color: #235e99;}.subnav a:hover, .subnav a:active { font-weight: normal; background: none; border-bottom: 2px solid;}/* subnav position and pointer position */#subnav1 { left: 120px; }#subnav2 { left: 230px; }#subnav3 { left: 340px; }#subnav4 { left: 450px; }#subnav5, #subnav6, #subnav7 { left: auto; right: 0px;}#subnav1 .pointer,#subnav2 .pointer,#subnav3 .pointer,#subnav4 .pointer { left: 30px; }#subnav5 .pointer { left: auto; right: 290px; }#subnav6 .pointer { left: auto; right: 180px; }#subnav7 .pointer { left: auto; right: 70px; }#subnav1, #subnav2, #subnav3, #subnav4 { min-width: 110px;}#subnav5 { min-width: 340px; }#subnav6 { min-width: 240px; }#subnav7 { min-width: 130px; }/* Note==========================================================*/.note { margin: 0 15px 10px;color:#666666;}.note span{float:right;}.disable { display: none;}/* ad-loop, search, topinfo, recommendinfo==========================================================*/.wrap .ad-loop { width: 297px; height: 223px; border: 1px solid #99bbdd; overflow: hidden;text-align:center; margin-bottom: 10px;}.search { float: right;}.input{border:1px solid #8FA6BC;height:20px;line-height:20px;width:180px;margin-right:5px;margin-left:5px;}.inputs1{border:1px solid #8FA6BC;border-right:0px;height:20px;line-height:20px;width:220px;margin-left:5px;float:left;margin-bottom:5px;padding-left:4px;}.inputs2{border:1px solid #8FA6BC;border-left:0px;height:22px;background-color:#FFFFFF;line-height:20px;width:60px;margin-right:5px;float:left;margin-bottom:5px;cursor:pointer;background:url(nav_icon.gif) no-repeat 5px 5px;}.input_pos{float:left;}.hot_line{margin-top:5px;margin-left:5px;margin-right:3px;margin-bottom:10px;}.hot_line a:link,a:visited{color:#2C6AA9;}.hot_line a:hover{color:#DD8700;text-decoration:underline;}.box_xg{border:1px solid #B8CDE3;margin-bottom:10px;}.box_xg .title_xg{background:#B8CDE3;color:#003770;line-height:26px;height:26px;padding-left:15px;border:1px solid #fff;font-weight:bold;}.box_xg ul{padding:6px;overflow:hidden;height:1%;} </style><title>Untitled Document</title></pead><body> <div class="box"> <div class="box_title tab"><p>Special Recommendation</p> <ul class="tabitem"> <li>Webpage special effects</li> <li>Online earning experience</li> <li>Free Resources</li> </ul> </div></div><ul class="down_box" id="d_con1"><li>-28-div + css + js labels for vertical arrangement</li><li>-28-color-changing marking effect of selected table rows</li><li>-26-click to bring up the login window, which has been beautified</li><li>-22-css + js news list for rankings and slide switching</li><li>08-14 · drag and move the imitation tom homepage module</li><li>08-03-a cool image written by foreigners</li><li>07-28 · form color effects like 126.com</li></ul> <ul class="down_box disable" id="d_con2"><li>2008 individual webmasters achieved quick online earning</li><li>-All online part-time earning strategy</li><li>6 ways to make money using SEO in</li><li>07-01-how to locate a website</li><li>-Two website profit models</li><li>My 0.15 million IP website earned 70 thousand RMB a month</li><li>Googel Adsense improved revenue by 300%</li></ul> <ul class="down_box disable" id="d_con3"><li>07-05-Ying Dezhi-answers the cash report from the online survey</li><li>07-05-Lenovo online storage-5 GB storage space free network hard</li><li>07-05 · Korea Tourism Development Board-passionate Olympics</li><li>07-05 · Golden storm 16 million red bag 0.5 million Crazy Cash delivery</li><li>07-05 · TurboHide-Free Online proxy server in the United States</li><li>07-05 · Nana mi-free personal space for imitation QQ space</li><li>07-05 · podcast CC-giving your website Free Video</li></ul>Www.111cn.net</body></ptml>
Tip: you can modify some code before running

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.