本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下:
整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦!
滑动菜单 a,body,div,h1,h2,li,ul{ margin:0; padding:0 } a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;} a:hover{color:#123;background-color:#789;font-weight:bold;} body{ font:12px/18px "Times New Roman",Times,"宋体",serif; text-align:center; } h1{ height:100px; width:25px; position:absolute; top:-1px; left:123px; cursor:pointer; color:#89A; font-size:18px; line-height:50px; background-color:#234; } h2{ height:24px; font-size:12px; border-bottom:1px solid #4C6CB9; color:#BBB; font-weight:600; cursor:pointer; } li{height:25px;list-style:none} #Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto} #Top{height:30px;background-color:#DDD;border: 1px solid #999;} #Logo{height:100px;background-color:#DDD;border: 1px solid #999;} #Nav{height:30px;background-color:#DDD;border: 1px solid #999;} #SideBar{ position:fixed!important; position:absolute; top:200px; left:0px; } #SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px} #Main{height:800px;background-color:#DDD;border: 1px solid #999;} #Footer{height:60px;background-color:#DDD;border: 1px solid #999;} .Extracted{width:0px;} .Extrended{border:1px solid #555;background-color:#000;padding:1px} 顶条 Logo 导航条 菜单 功能栏1
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
功能栏2
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
功能栏3
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
功能栏4
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
功能栏5
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
功能栏6
内容区 底条- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
希望本文所述对大家的javascript程序设计有所帮助。



