菜单导航

ygsilence

浏览: 336288 次
性别:
来自: 北京

最近访客更多访客>>

sd3870181

lzzywt

拼搏才有未来

xx5333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html js onmouseover onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Recommend.js"></script>
<title>导航菜单</title>
</head>
<body>
<div id="menu">
<ul>
    <li id="m_1" class='m_li_a' ><a href="#">中文</a></li>
    <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">外文</a></li>
    <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">畅销</a></li>
    </ul>
</div>
<div style="height:32px; background-color:#F1F1F1;">
   <ul class="smenu">
     <li style="padding-left:29px;" id="s1_1" class='s_li_a'><a href="/">中文1</a></li>
<li style="padding-left:29px;" id="s1_2" class='s_li_a'><a href="/">中文2</a></li>
<li style="padding-left:29px;" id="s1_3" class='s_li_a'><a href="/">中文3</a></li>

     <li style="padding-left:29px;" id="s2_1" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">外文1</a></li>
<li style="padding-left:29px;" id="s2_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">外文2</a></li>
<li style="padding-left:29px;" id="s2_3" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">外文3</a></li>

<li style="padding-left:29px;" id="s3_1" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">畅销1</a> </li>
<li style="padding-left:29px;" id="s3_2" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">畅销2</a> </li>
<li style="padding-left:29px;" id="s3_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">畅销3</a> </li>
   </ul>
</div>
</body>
</html>

//*******Recommend.js*********
<script>
//初始化
var def="1";
function mover(object){
//主菜单
var mm=document.getElementById("m_"+object);
mm.className="m_li_a";
//初始主菜单隐藏效果
if(def!=0){
    var mdef=document.getElementById("m_1");
    mdef.className="m_li";                              //1隐藏
}
//子菜单
for(i=1;i<4;i++){
document.getElementById("s"+object+"_"+i).style.display="block";
}

//初始子菜单隐藏效果
if(def!=0){
for(i=1;i<4;i++){
document.getElementById("s1_"+i).style.display="none";
}

}
}

function mout(object){
//主菜单
var mm=document.getElementById("m_"+object);
mm.className="m_li";
//初始主菜单
if(def!=0){
    var mdef=document.getElementById("m_1");
    mdef.className="m_li_a";
}
//子菜单
// var ss=document.getElementById("s_"+object);
for(i=1;i<4;i++){
document.getElementById("s"+object+"_"+i).style.display="none";
}
/*
var ss1=document.getElementById("s"+object+"_"+1);
var ss2=document.getElementById("s"+object+"_"+2);
var ss3=document.getElementById("s"+object+"_"+3);
ss1.style.display="none";
ss2.style.display="none";
ss3.style.display="none";
*/
//初始子菜单
if(def!=0){
for(i=1;i<4;i++){
document.getElementById("s1_"+i).style.display="block";
}
/*
var sdef1=document.getElementById("s1_1");
var sdef2=document.getElementById("s1_2");
var sdef3=document.getElementById("s1_3");

    sdef1.style.display="block";
sdef2.style.display="block";
sdef3.style.display="block";
*/
}
}
</script>


<style>
body,td,th {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
color: #333333;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active{
color: #FF0000;
text-decoration: none;
}
#menu{
height:32px;
margin-top:8px; background-color:#990000;
}
#menu ul{
margin:auto; width:778px; height:32px;
list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;
}
.m_li{
float:left; width:114px; line-height:32px; text-align:center; margin-right:-2px; margin-left:-2px;
}
.m_li a{
display:block; color:#FFFFFF; width:114px;
}
.m_line{
float:left; width:1px; height:32px;
line-height:32px;
}
.m_line img{
margin-top:expression(( 32 - this.height ) / 2);
}
.m_li_a{
float:left; width:114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold;
position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;
}
.m_li_a a{
display:block; color:#FF0000; width:114px;
}

.smenu{
width:774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;
}
.s_li{
line-height:32px; width:auto; display:none; height:32px;
}
.s_li_a{
line-height:32px; width:auto; display:block; height:32px;
}
</style>

分享到：

初始化系统配置信息,将系统表中的数据加载 ...

2011-10-11 14:44
浏览 1133
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

菜单导航

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

菜单导航

评论

发表评论

相关推荐

js match 的简单用法 [转]

JavaScript的replace方法与正则表达式结合应用讲解（转）

jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器(转)

Jquery获取select,dropdownlist,checkbox 下拉列表框的值(转)

Jquerr 中ajax和eche遍历等问题

利用jquery操作select下拉列表框(转)

HTML锚点(转)

jQuery.extend 函数详解(转)

HTML5实验：JavaScript模拟流体效果(转)

jQuery Datepicker 选择指定日期【转】

DatePicker基本使用方法 【转】

使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup（转）

keyCode charCode 详解

JavaScript 键盘键值大集合

document.createElement()的用法 （转）

红薯 50+ 个 JavaScript & HTML5 框架以及相关工具（转）

正则表达式中后向引用、零宽断言、负向零宽断言的解释用法

JavaScript正则表达式基础

javascript 正则表达式（转）

最近访客更多访客>>

DatePicker基本使用方法【转】

document.createElement()的用法（转）