足球游戏_中国足彩网￥体育资讯$

Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；

首先肯定要在页面引用jquery.js 版本不限 ；

接下来把=====================html贴出来：

代码如下:

<div class=”header_menu”>

<ul>

<li class=”menuli” id=”xtgl_menu”>系统管理</li>

<li class=”menuli” id=”ggsq_menu”>干管所勤</li>

<li class=”menuli” id=”bhz_menu”>保护站</li>

<li class=”menuli” id=”mcjy_menu”>木材检验</li>

<li class=”menuli” id=”slgh_menu”>森林管护</li>

</ul>

</div>

<div class=”display movediv” id=”slgh_menu_div”>

<ul>

<li class=”redli”>出勤管理</li>

<li class=”redli”>巡视管理</li>

<li class=”redli”>现场取证</li>

<li class=”redli”>问题处置</li>

</ul>

</div>

<div class=”display movediv” id=”mcjy_menu_div”>

<ul>

<li class=”redli”>位置监测</li>

<li class=”redli”>检验管理</li>

</ul>

</div>

<div class=”display movediv” id=”bhz_menu_div”>

<ul>

<li class=”redli”>出勤管理</li>

<li class=”redli”>监管信息</li>

</ul>

</div>

<div class=”display movediv” id=”ggsq_menu_div”>

<ul>

<li class=”redli”>出勤管理</li>

<li class=”redli”>监管信息</li>

</ul>

</div>

<div class=”display movediv” id=”xtgl_menu_div”>

<ul>

<li class=”redli”>权限管理</li>

<li class=”redli”>设备管理</li>

</ul>

</div>

===========================css样式：

代码如下:

/**头部菜单**/

.header_menu{

float:right;

width: 50%;

height: 100%;

cursor: pointer;

}

.header_menu ul{

list-style: none;

height: 100%;

}

.header_menu ul li{

float: right;

width: 20%;

color:white;

font-size:14px;

padding-top: 55px;

font-weight: bold;

}

.display{

display: none;

}

.display ul{

list-style: none;

width: 100px;

}

.display ul li{

padding-top:10px;

padding-bottom: 5px;

padding-left:5px;

cursor: pointer;

font-size: 14px;

}

.movediv{

position: fixed;

left: 0px;

top:0px;

font-size: 14px;

white;

border:1px solid white;

}

.redcolor{

#a0c9e6;

}

=======================js脚本

代码如下:

$(function() {

// 菜单绑定事件

initMenuListener();

// 下拉菜单绑定事件

initSubMenuHover();

// 下拉菜单颜色改变

initSubMenuLiHover();

});

/**

* 头部菜单绑定滑过事件

*/

function initMenuListener() {

$(“.menuli”).hover(function() {

var hideDivId = $(this).attr(“id”) + “_div”;

// 得到菜单的位置

var left = $(this).offset().left;

var top = $(this).offset().top;

var height = $(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度

$(“#” + hideDivId).show();

$(“#” + hideDivId).css(“left”, left);

$(“#” + hideDivId).css(“top”, top + height);

}, function() {

// 将原来的菜单隐藏

$(“.display”).hide();

});

}

/**

* 下拉菜单绑定事件

*/

function initSubMenuHover() {

$(“.display”).hover(function() {

$(this).show();

}, function() {

$(this).hide();

});

}

/**

* 下拉菜单改变颜色

*/

function initSubMenuLiHover() {

$(“.redli”).hover(function() {

$(this).addClass(“redcolor”);

}, function() {

$(this).removeClass(“redcolor”);

});

}

效果如下：

小伙伴们使用的时候自己美化下，自由扩展下就可以用到自己的项目中了，我这里仅仅是简单做了点样式而已。

中国足彩网信息请查看IT技术专栏