今天用jquery写了一个下拉菜单

最新推荐文章于 2022-09-12 01:08:12 发布

yangna01314

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量858

点赞数

分类专栏： jQuery学习旅程文章标签： jquery function class 招聘 xhtml 产品

本文链接：https://blog.csdn.net/yangna01314/article/details/4903382

版权

jQuery学习旅程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先看一下效果图：

当鼠标点击的时候会出现二级菜单，下面来看一下代码：

首先要记住链接一个jquery的文件：

<!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" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
function cFocus(obj){
$(obj).focus(function(){this.blur()});
}
function cDisplay_0(x){
$(".menuLi ul").eq(x).css("display","block");
}

$(".menuLi").eq(0).mouseover(function(){cDisplay_0(0)});
$(".menuLi").eq(0).mouseout (function(){cDisplay_1(0)});
$(".menuLi").eq(1).mouseover(function(){cDisplay_0(1)});
$(".menuLi").eq(1).mouseout (function(){cDisplay_1(1)});
$(".menuLi").eq(2).mouseover(function(){cDisplay_0(2)});
$(".menuLi").eq(2).mouseout (function(){cDisplay_1(2)});
});
</script>
<title>jquery二级菜单</title>
<style>
body{
font-size:12px;
}
a{
text-decoration:none;
color:#000;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li{
list-style:none;
}
.header{
width:1000px;
}
.menuLi{ float:left; height:30px; width:100px;}
.menuA:hover,.clickBg {background-color:#66FFFF;}
.menuLi ul{ display:none; }
.menuB { display:block; clear:both;}

</style>
</head>

<body>
<div class="header">
<ul class="menu">
  <li class="menuLi"><a href="#" class="menuA">首页</a>
   <ul>
    <li><a href="#" class="menuA menuB">我是首页子页</a></li>
    <li><a href="#" class="menuA menuB">我是首页子页</a></li>
    <li><a href="#" class="menuA menuB">我是首页子页</a></li>
   </ul>
  </li>

  <li class="menuLi"><a href="#" class="menuA">产品中心</a>
   <ul>
    <li><a href="#" class="menuA menuB">我是产品中心子页</a></li>
    <li><a href="#" class="menuA menuB">我是产品中心子页</a></li>
    <li><a href="#" class="menuA menuB">我是产品中心子页</a></li>
   </ul>
  </li>

  <li class="menuLi"><a href="#" class="menuA">人才招聘</a>
   <ul>
    <li><a href="#" class="menuA menuB">我是人才招聘子页</a></li>
    <li><a href="#" class="menuA menuB">我是人才招聘子页</a></li>
    <li><a href="#" class="menuA menuB">我是人才招聘子页</a></li>
   </ul>
  </li>

</ul>
</div>
</body>
</html>
没有加什么效果，先记下，等以后又机会再使用。

yangna01314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天用jquery写了一个下拉菜单

先看一下效果图：当鼠标点击的时候会出现二级菜单，下面来看一下代码：首先要记住链接一个jquery的文件：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> function cFocus(obj){ $(obj).focus(function(){this.
复制链接

扫一扫