发一个页面侧边导航

在一个网站上搞下来的 版权归原作者 加到任意页面 然后上传图片即可  鼠标放上去自动伸缩

顺便求教一下 如图所示 如何控制导航的宽度

1. <style>
   
2. .vpnav{position:absolute;z-index:99;left:0;top:0;margin-top:136px;}
   
3. .vpnav_box{float:left;background:#DEEAF8 url(/images/vpnav_box_bg.png) repeat-y 100% 0;width:200px;height:480px;border-bottom:none;overflow:hidden;}
   
4. .vpnav_box_in{margin:5px 5px 5px 5px;white-space:nowrap;overflow:visible;text-align:left;height:460px;overflow-y:scroll;overflow:hidden;}
   
5. .vpnav_box_in dl{padding:5px 0;}.vpnav_box_in ul{margin:0 0 0 30px;}.vpnav_box_in li{list-style:none;}.vpnav_but{float:left;width:25px;}
   
6. .vpnav_top{width:25px;height:16px;background-repeat:no-repeat;}html>body .vpnav_top{background:url(/images/vpnav_top_bg.png);}
   
7. 
   
8. * .vpnav_top{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=sSize,src="/images/vpnav_top_bg.png")}
   
9. .vpnav_main{background:url(/images/vpnav_bg.png) repeat-y;width:25px;}
   
10. .vpnav_bom{width:25px;height:16px;background-repeat:no-repeat;}html>body
    
11. .vpnav_bom{background:url(/images/vpnav_bom_bg.png);}
    
12. 
    
13. * .vpnav_bom{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=sSize,src="/images/vpnav_bom_bg.png")}
    
14. .vpnav_item_1{background:url(/images/vpnav_item_1.png) no-repeat 50% 0;height:22px;}
    
15. .vpnav_text{font-size:12px;width:12px;margin:0 auto;text-align:center;cursor:pointer;}.vpnav_text a{color:#000000;text-decoration:none;}
    
16. .vpnav_close{background:url(/images/vpnav_close.png) no-repeat 50% 100%;height:18px;cursor:pointer;}.vpnav_line{height:333px;border-left:none;}
    
17. </style>
    
18. 
    
19. <script language="javascript">
    
20. var vpnav_flag=0;
    
21. function vpnav_height(){
    
22. document.getElementById("vpnav").style.top=(document.documentElement.scrollTop || document.body.scrollTop)+"px";
    
23. }
    
24. function vpnav_flag_mark(vfmark){
    
25. vpnav_flag=vfmark;
    
26. if ( vpnav_flag != 0 ){
    
27. setTimeout("vpnav_off();",5000);
    
28. }
    
29. }
    
30. function vpnav_time() {
    
31. vpnav_width_px=document.getElementById("vpnav_box").style.width;
    
32. vpnav_index=vpnav_width_px.indexOf("p");
    
33. vpnav_width=vpnav_width_px.substring(0,vpnav_index);
    
34. vpnav_flag=0;
    
35. document.getElementById("vpnav").style.width = 225 +"px";
    
36. if (vpnav_width<200){
    
37. document.getElementById("vpnav_box").style.width = eval(eval(vpnav_width) + 10) +"px";
    
38. vpnav_time_id=setTimeout("vpnav_time();",30)
    
39. }else{
    
40. vpnav_flag=1;
    
41. clearTimeout(vpnav_time_id);
    
42. document.getElementById("vpnav_box_in").style.overflowY="scroll";
    
43. setTimeout("vpnav_off();",5000);
    
44. }
    
45. }
    
46. function vpnav_off() {
    
47. if ( vpnav_flag != 0 ){
    
48. vpnav_width_px=document.getElementById("vpnav_box").style.width;
    
49. vpnav_index=vpnav_width_px.indexOf("p");
    
50. vpnav_width=vpnav_width_px.substring(0,vpnav_index);
    
51. if(vpnav_width>=1){
    
52. document.getElementById("vpnav_box").style.width = eval(eval(vpnav_width) - 10) +"px";
    
53. vpnav_off_id=setTimeout("vpnav_off();",30)
    
54. }else{
    
55. clearTimeout(vpnav_off_id);
    
56. vpnav_flag=0;
    
57. document.getElementById("vpnav").style.width = 25 +"px";
    
58. }
    
59. }
    
60. }
    
61. function vpnav(){
    
62. vpnav_height_id=setInterval("vpnav_height();",100);
    
63. }
    
64. vpnav();
    
65. </script> <div id="vpnav" class="vpnav" style="width:25px;">
    
66. <div class="vpnav_box" id="vpnav_box" style="width:0px;" onmouseover="vpnav_flag_mark(0)" onmouseout="vpnav_flag_mark(1)">
    
67. <div class="vpnav_box_in" id="vpnav_box_in">
    
68. <div style="width:150px; overflow:hidden;">
    
69. 
    
70. 
    
71. <font size=3><dl><dt>
    
72. <a href="http://www.ixian.cn/default.php?gid=90">=互动西安=</a></dt><dd><ul><li>
    
73. <a href="http://www.ixian.cn/forum-6-1.html">新手上路</a><li>
    
74. <a href="http://www.ixian.cn/forum-44-1.html">会员风采</a><li>
    
75. <a href="http://www.ixian.cn/forum-93-1.html">单身交友</a><li>
    
76. <a href="http://www.ixian.cn/forum-42-1.html">网友互助</a><li>
    
77. <a href="http://www.ixian.cn/forum-58-1.html">活动特区</a></ul></dd></dl>
    
78. 
    
79. <dl><dt> <a href="http://www.ixian.cn/default.php?gid=55">=话题西安=</a></dt><dd><ul><li>
    
80. <a href="http://www.ixian.cn/forum-13-1.html">城市发展</a><li>
    
81. <a href="http://www.ixian.cn/forum-88-1.html">古城杂谈</a><li>
    
82. <a href="http://www.ixian.cn/forum-35-1.html">图说西安</a><li>
    
83. <a href="http://www.ixian.cn/forum-31-1.html">人文西安</a></ul></dd></dl>
    
84. 
    
85. <dl><dt>
    
86. <a href="http://www.ixian.cn/default.php?gid=74">=时尚西安=</a></dt><dd><ul><li>
    
87. <a href="http://www.ixian.cn/forum-9-1.html">时尚长安</a><li>
    
88. <a href="http://www.ixian.cn/forum-96-1.html">我爱打折</a><li>
    
89. <a href="http://www.ixian.cn/forum-47-1.html">长安丽人</a><li>
    
90. <a href="http://www.ixian.cn/forum-49-1.html">网络卖场</a></ul></dd></dl>
    
91. 
    
92. <dl><dt>
    
93. <a href="http://www.ixian.cn/default.php?gid=115">=生活西安=</a></dt><dd><ul><li>
    
94. <a href="http://www.ixian.cn/forum-19-1.html">你吃了么</a><li>
    
95. <a href="http://www.ixian.cn/forum-92-1.html">数码科技</a><li>
    
96. <a href="http://www.ixian.cn/forum-11-1.html">灌水一族</a><li>
    
97. <a href="http://www.ixian.cn/forum-43-1.html">影音娱乐</a><li>
    
98. <a href="http://www.ixian.cn/forum-63-1.html">体坛风云</a><li>
    
99. <a href="http://www.ixian.cn/forum-103-1.html">情感生活</a></ul></dd></dl>
    
100. 
     
101. <dl><dt>
     
102. <a href="http://www.ixian.cn/default.php?gid=25">=兴趣西安=</a></dt><dd><ul><li>
     
103. <a href="http://www.ixian.cn/forum-22-1.html">古城摄友</a><li>
     
104. <a href="http://www.ixian.cn/forum-87-1.html">家有宠物</a><li>
     
105. <a href="http://www.ixian.cn/forum-95-1.html">西安车友</a><li>
     
106. <a href="http://www.ixian.cn/forum-46-1.html">文学长廊</a></ul></dd></dl>
     
107. 
     
108. <dl><dt>
     
109. <a href="http://www.ixian.cn/default.php?gid=82">=分类中心=</a></dt><dd><ul><li>
     
110. <a href="http://www.ixian.cn/forum-116-1.html">二手转让</a><li>
     
111. <a href="http://www.ixian.cn/forum-83-1.html">求职招聘</a><li>
     
112. <a href="http://www.ixian.cn/forum-65-1.html">房屋信息</a><li>
     
113. <a href="http://www.ixian.cn/forum-45-1.html">广而告之</a></ul></dd></dl>
     
114. 
     
115. <dl><dt>
     
116. <a href="http://www.ixian.cn/default.php?gid=5">=社区服务=</a></dt><dd><ul><li>
     
117. <a href="http://www.ixian.cn/forum-67-1.html">论坛公告</a><li>
     
118. <a href="http://www.ixian.cn/forum-7-1.html">站务交流</a></ul></dd></dl>
     
119. 
     
120. 
     
121. </font>
     
122. </div>
     
123. </div>
     
124. </div>
     
125. <div class="vpnav_but">
     
126. <div class="vpnav_top"></div>
     
127. <div class="vpnav_main">
     
128. <div class="vpnav_item_1"></div>
     
129. <div class="vpnav_text" onmouseover="javascript:vpnav_time();vpnav_flag_mark(0)" onmouseout="vpnav_flag_mark(1)">论坛导航</div>
     
130. <div class="vpnav_close" onclick="javascript:vpnav_off()"></div>
     
131. </div>
     
132. <div class="vpnav_bom"></div>
     
133. <div class="vpnav_line"></div>
     
134. </div>
     
135. </div>

复制代码

images.rar (13.54 KB, 下载次数: 587)

2010-6-10 23:14 上传

点击文件名下载附件

不错，沙发支持了

谢谢提供，能美化一下就更好了

www.00036.net

顶一下，不错的

顶，支持proteus电路图单片机电子

好资源！大家分享！！谢谢

我压力很大呀。~    http://www.c9c9gua.com

嘛情况？？？？

{:soso_e181:}谢谢楼主

看帖子的都发表一下看法