分享
 
 
 

模似windows XP 左侧的菜单效果

王朝system·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

<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>

<!--------Start Menu---------->

<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://www.webjx.com/">图形图像</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">鼠标事件</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">时间日期</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">导航菜单</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">文字效果</a></span>

</div>

</div>

</div>

<!--------End Menu---------->

<BR />

<!--------Start Menu---------->

<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://www.webjx.com/">网页制作</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">网络编程</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">图形图像</a></span>

</div>

</div>

</div>

<!--------End Menu---------->

<BR />

<!--------Start Menu---------->

<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://www.webjx.com/">网页设计</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">艺术创作</a></span><BR />

<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.webjx.com/">电脑网络</a></span>

</div>

</div>

</div>

<!--------End Menu---------->

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有