`
GODdaughter
  • 浏览: 102922 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

javascript（竖版）树形菜单实例（3.2）

JavaScript
阅读更多 
<html>
<head>
<style type="text/css">

.item1, .item2, .item1_mover, .item2_mover, .subitem1, .subitem1_mover, .subitem2, .subitem2_mover{color:white; background-color:#6262ff; width:100px; height:25px; padding:3px;

border:1px solid #1717ff;}

.item1_mover{background-color:#2037d7;}
.item2{border-top:1px solid #b0b0b0;}
.item2_mover{background-color:#2037d7; border-top:1px solid #f0f0f0;}

.subitem1{background-color:#b5bdf4;}
.subitem2{background-color:#b5bdf4; border-top:1px solid #b0b0b0;}
.subitem1_mover{background-color:#f0f0f0;}
.subitem2_mover{background-color:#e0e0e0; border-top:1px solid #f0f0f0;}

</style>
<title>Popup menu</title>
<script TYPE="text/javascript">
<!--
//----Change style class of a DIV----
function change_bgcolor( obj, val ){
obj.className = val;
}

//----Change a menu' visibility----
function change_menu(mid, mode) {
document.getElementById(mid).style.display = mode;
}
function jump_url(url) {
window.open(url,'new');
}
function jump_url2(url) {
location.href(url);
}
//-->
</script>
</head>
<body>

<div class="item1" onmouseover="change_menu( 'sub1','block' );change_bgcolor(this,
'item1_mover');" onmouseout="change_bgcolor(this, 'item1');change_menu( 'sub1','none' );" >Menu1</div>
<div id="sub1" style="display:none;">
<div id="sub11" class="subitem1" onclick="jump_url('http://www.itworld21.com/')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem1_mover')"
onmouseout="change_bgcolor(this, 'subitem1'); change_menu( 'sub1','none' );"> menu1-1</div>
<div id="sub12" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub1','none' );" > menu1-2</div>
<div id="sub13" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub1','none' );" > menu1-3</div>
</div>

<div class="item2" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'item2_mover');" onmouseout="change_bgcolor(this, 'item2');change_menu( 'sub2','none' );">Menu2</div>
<div id="sub2" style="display:none;">
<div id="sub21" class="subitem1" onclick="jump_url('http://www.itworld21.com/')" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'subitem1_mover')" onmouseout="change_bgcolor(this, 'subitem1'); change_menu( 'sub2','none' );"> menu2-1</div>
<div id="sub22" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub2','none' );" > menu2-2</div>
<div id="sub23" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub2','block' ); change_menu( 'sub2','block' ); change_bgcolor
(this, 'subitem2_mover')" onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub2','none' );" > menu2-3</div>
</div>

<div class="item2" onmouseover="change_menu( 'sub3','block' );change_bgcolor(this, 'item2_mover');" onmouseout="change_menu( 'sub3','none' );change_bgcolor(this,
'item2');">Menu3</div>
<div id="sub3" style="display:none;">
<div id="sub31" class="subitem1" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_bgcolor(this, 'subitem1_mover');change_menu( 'sub3','block' );"
onmouseout="change_bgcolor(this,'subitem1');;change_menu( 'sub3','none' );"> menu3-1</div>
<div id="sub32" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub3','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout=";change_menu( 'sub3','none' ); change_bgcolor(this, 'subitem2')" > menu3-2</div>
<div id="sub33" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub3','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout=";change_menu( 'sub3','none' ); change_bgcolor(this, 'subitem2')" > menu3-3</div>
</div>

</div>
</body> </html>
分享到：
| javascript横版的树形菜单实例(网上摘抄2. ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics