网页特效代码
建站首页
|
广告代码
|
源码下载
|
站长学院
|
收藏本站
|
设为首页
|
联系我们
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐
儿歌大全
童谣
生意网址大全
美容
我们是致力收藏最实用的网页特效代码!
您的位置:
网页特效
->
菜单导航
-> windows XP左侧的菜单效果
windows XP左侧的菜单效果
作者:windows XP左侧的菜单效果 发布时间:2007-12-12 15:45:33 发布人: admin
<style type="text/css"> .mainDiv { width:160px; } .topItem { width:160px; height:22px; cursor:pointer; background: #467BF2; text-decoration: none; color: white; font-weight:bold; font-family:"GOTHIC"; } .dropMenu { background:#D9D9D9; border-top:1px solid #467BF2; border-left:1px solid #92B1F8; border-right:1px solid #92B1F8; border-bottom:1px solid #92B1F8; } .subMenu { display:none; } .subItem { padding-left:5px; cursor:pointer; font-weight:bold; text-decoration:none; color:black; } .subItem a { text-decoration:none; color:black; } .subItemOver { cursor:pointer; color:blue; text-decoration:underline; font-weight:bold; padding-left:5px; } .subItemOver a { color:blue; } .drop { border-left:1px solid black; border-right:1px solid black; } </style> <script language="javascript"> var TIMER_SLIDE = null; var OBJ_SLIDE; var OBJ_VIEW; var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE var NEW_PIX_VAL; var DELAY_SLIDE = 30; //this is the time between each call to slide var DIV_HEIGHT = 22; //value irrelevant var SUB_MENU_NUM =0; var RE_INIT_OBJ = null; var bMenu = document.getElementById("curMenu"); var MainDiv,SubDiv //DD added code document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>') function Init(objDiv) { if (TIMER_SLIDE == null) { SUB_MENU_NUM = 0; MainDiv = objDiv.parentNode; SubDiv = MainDiv.getElementsByTagName("DIV").item(0); SubDiv.onclick = SetSlide; OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1) OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0); document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code for (i=0;i<OBJ_VIEW.childNodes.length;i++) { if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN") { SUB_MENU_NUM ++; OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle; OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle; } } NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); } } function SetSlide() { if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code if (TIMER_SLIDE == null && this.parentNode == MainDiv) TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); else { RE_INIT_OBJ = this; setTimeout('ReInit()', 200); } } function ReInit(obj) { Init(RE_INIT_OBJ); TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); RE_INIT_OBJ = null; } function RunSlide() { if (OBJ_VIEW.getAttribute("state") == 0) { NEW_PIX_VAL += PIX_SLIDE; OBJ_SLIDE.style.height = NEW_PIX_VAL; if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code { clearInterval(TIMER_SLIDE); TIMER_SLIDE = null; OBJ_VIEW.style.display = 'inline'; OBJ_VIEW.setAttribute("state","1") MainDiv.setAttribute("state",NEW_PIX_VAL); } } else { OBJ_VIEW.style.display = 'none'; NEW_PIX_VAL -= PIX_SLIDE; if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL; if (NEW_PIX_VAL <= 0) { NEW_PIX_VAL = 0; OBJ_SLIDE.style.height = NEW_PIX_VAL clearInterval(TIMER_SLIDE); TIMER_SLIDE = null; OBJ_VIEW.setAttribute("state","0") MainDiv.setAttribute("state",NEW_PIX_VAL); } } } function ChangeStyle() { if (this.className == this.getAttribute("classOut")) this.className = this.getAttribute("classOver"); else this.className = this.getAttribute("classOut"); } </script> <div class="mainDiv" state="0"> <div class="topItem" classout="topItem" classover="topItemOver" onmouseover="Init(this);">网页特效</div> <div class="dropMenu"> <div class="subMenu" state="0"> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">图形图像</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">鼠标事件</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">时间日期</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">导航菜单</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">文字效果</a></span> </div> </div> </div> <br/> <div class="mainDiv" state="0"> <div class="topItem" classout="topItem" classover="topItemOver" onmouseover="Init(this)">网页教学</div> <div class="dropMenu"> <div class="subMenu" state="0"> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">网页制作</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">网络编程</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">图形图像</a></span> </div> </div> </div> <br/> <div class="mainDiv" state="0"> <div class="topItem" classout="topItem" classover="topItemOver" onmouseover="Init(this)">网络开发</div> <div class="dropMenu"> <div class="subMenu" state="0"> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">网页设计</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">艺术创作</a></span><br/> <span class="subItem" classout="subItem" classover="subItemOver"><a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">电脑网络</a></span> </div> </div> </div> <a href="http://web.archive.org/web/20080511204536/http://myjs.jz123.cn/">欢迎访问中国建站之家网页特效集</a>
windows
XP左侧的菜单效果
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
多颜色菜单
下一篇:文章:
二级下拉菜单
本类浏览排行 »
又一搜索引擎 - 网页特效代码
自动打印页面 - 网页特效代码
自动显示是否更新 - 网页特效代码
浏览器详细报告 - 网页特效代码
按钮发信(五) - 网页特效代码
按钮发信(三) - 网页特效代码
按钮发信(一) - 网页特效代码
计算器(二) - 网页特效代码
本站推荐文章 »
炫彩变色菜单
一个非常漂亮的loading效果网页代码
IE按钮网页特效代码
用js加亮指定的文章内容关键字网页特效代..
一个很酷的登陆效果
动态表格(PowerTable)网页特效代码
CSS 制作的三级菜单特效代码
CSS控制页面展开和关闭