(Www.bkjia.com) Tutorial vertical sliding menu, sliding control on the right side, JavaScript + CSS, compatible with IE6/IE7/FF/opera and other browsers, gray style, practical and simple, I hope you will like it. You can make a standard sliding door tutorial.
<! 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> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> JavaScript + CSS implements vertical sliding menu-LIEHUO. NET </title> <style type = "text/css"> body {font-size: 9pt;} a: link, a: visited, a: hover,: active {text-decoration: none; color: # 256bae ;}. warp {width: 586px; height: 269px! Important; height: 271px; border: 1px solid # dbdcd7;}. main {width: 562px; height: 269px! Important; height: 271px; padding: 5px; margin-left: 15px; overflow: hidden; float: left ;}. news {position: absolute; z-index: 4; width: 24px; float: left; margin-left: 565px! Important; margin-left: 582px;}. news ul {list-style: none; padding: 0; margin: 0;}. news ul li {height: 84px! Important; height: 88px; width: 20px; margin-bottom: 0px; padding-top: 5px; text-align: center; cursor: pointer; vertical-align: middle; background-color: # e5e5e5; border-left: # dbdcd7 solid 1px; border-bottom: # dbdcd7 solid 1px ;}. news ul li. on {background-color: # ffffff; border: # FFFFFF 0px }. news span {display: block; margin-top: 9px! Important; margin-top: 20px ;}. dis {display: block ;}. undis {display: none ;} </style>
Tip: the code can be modified before running!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
