<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>软件UI设计下拉菜单</title>
<script language="javascript">
function hideAll() {
for(i=0;i<odiv.length;i++) {
odiv.style.display="none";
}
}
function showObj(num)
{
if (odiv[num].style.display=="none")
{
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body{font-size:12px;font-family:"宋体", Arial, Georgia, "Times New Roman"; color:#FFF;}
#box,#box1 {width:178px; height:auto;float:left;margin:12px 0 0 12px; border:1px solid #36C;background: #39C;display:inline;}
.divctrl{cursor:hand;font-size:12px;}
ul {background:#FDFDFD;text-indent:12px;height:auto;padding:6px 0 0 0;}
li{list-style-type:none;font-size:12px;line-heigh:26px;height:26px;}
.menu_title{background:#39C; height:24px; padding:6px 0 0 6px;border-bottom:#8EC9E6 1px solid; background:url(images/2.jpg) no-repeat 155px 4px;}
.menu_title1{background:#39C;height:24px; padding:6px 0 0 6px;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:link{color:#FFF;text-decoration:none;font-weight:bold; display:block;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:visited{color:#333;text-decoration:none;font-weight:bold;display:inline;}
a.menu:hover{color:#000; font-weight:bold;text-decoration:none;}
a:link{color:#FFF;text-decoration:none;}
a:visited{color:#004C84;text-decoration:none;display:block;width:178px; height:26px;}
a:hover{color: #4B62FE;background: #E2EAFE;}
.bs {color: #FFF;}
-->
</style>
</head>
<body onLoad="MM_preloadImages('images/2.jpg')">
<div id="box1">
<div onClick="showObj(0)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 设计之家</a>
</div>
<div id="odiv" style="display:inline">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(1)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(2)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(3)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(4)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(5)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(6)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(7)" class="menu_title1"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
</div>
</body>
</html> 请问,浏览的时候,不点击每个栏目的时候,右边的图片不变,当点击栏目后,右边图片 垂直翻转 90度。如何实现这样的效果?希望高手回答我,谢谢!
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>软件UI设计下拉菜单</title>
<script language="javascript">
function hideAll() {
for(i=0;i<odiv.length;i++) {
odiv.style.display="none";
}
}
function showObj(num)
{
if (odiv[num].style.display=="none")
{
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body{font-size:12px;font-family:"宋体", Arial, Georgia, "Times New Roman"; color:#FFF;}
#box,#box1 {width:178px; height:auto;float:left;margin:12px 0 0 12px; border:1px solid #36C;background: #39C;display:inline;}
.divctrl{cursor:hand;font-size:12px;}
ul {background:#FDFDFD;text-indent:12px;height:auto;padding:6px 0 0 0;}
li{list-style-type:none;font-size:12px;line-heigh:26px;height:26px;}
.menu_title{background:#39C; height:24px; padding:6px 0 0 6px;border-bottom:#8EC9E6 1px solid; background:url(images/2.jpg) no-repeat 155px 4px;}
.menu_title1{background:#39C;height:24px; padding:6px 0 0 6px;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:link{color:#FFF;text-decoration:none;font-weight:bold; display:block;background:url(images/2.jpg) no-repeat 155px 4px;}
a.menu:visited{color:#333;text-decoration:none;font-weight:bold;display:inline;}
a.menu:hover{color:#000; font-weight:bold;text-decoration:none;}
a:link{color:#FFF;text-decoration:none;}
a:visited{color:#004C84;text-decoration:none;display:block;width:178px; height:26px;}
a:hover{color: #4B62FE;background: #E2EAFE;}
.bs {color: #FFF;}
-->
</style>
</head>
<body onLoad="MM_preloadImages('images/2.jpg')">
<div id="box1">
<div onClick="showObj(0)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 设计之家</a>
</div>
<div id="odiv" style="display:inline">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(1)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(2)" class="menu_title"><a href="#" class="menu"><span class="bs">*</span> 员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(3)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(4)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(5)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(6)" class="menu_title"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
<div onClick="showObj(7)" class="menu_title1"><a href="#" class="menu"><span class="bs">* </span>员工管理</a></div>
<div id="odiv" style="display:none">
<ul>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工考勤信息</a></li>
<li><a href="#">* 员工出差申请</a></li>
<li><a href="#">* 费用报销管理</a></li>
</ul>
</div>
</div>
</body>
</html> 请问,浏览的时候,不点击每个栏目的时候,右边的图片不变,当点击栏目后,右边图片 垂直翻转 90度。如何实现这样的效果?希望高手回答我,谢谢!
转过90度有点难度,等高手
不过我觉得你用PS把那个图片搞一个转过90度的版本,点击的时候换就可以了
当然如果图片是动态就有点难了,JS实现恐怕不太现实哦