下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 复制代码 代码如下: <BR>body{font-size:13px} <BR>ul,li{list-style-type:none;padding:0px;margin:0px} <BR>.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} <BR>.optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} <BR>.content{padding-top:10px;clear:left} <BR>a{text-decoration:none;color:#666;padding:10px} <BR>.optnFocus{background-color:#fff;font-weight:bold} <BR>div{padding:10px} <BR>div img{float:left;padding-right:6px} <BR>span{padding-top:3px;font-size:14px;font-weight:bold;float:left} <BR>.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px; <BR>background-color:#fff;display:none} <BR>.tip li{line-height:23px;} <BR>#sort{position:absolute;display:none} <BR> 2.引用JQUERY的框架，大家可以去官网上下载最新的JQUERY,好像JQUERY1.5的版本都发布了,链接地址:http://jquery.com/ 3.定义HTML标签: 复制代码 代码如下: 电脑数码类产品 笔记本 笔记本1 笔记本2 笔记本3 笔记本4 笔记本5 移动硬盘 移动硬盘1 移动硬盘2 移动硬盘3 移动硬盘4 移动硬盘5 电脑软件 电脑软件1 电脑软件2 电脑软件3 电脑软件4 电脑软件5 数码产品 数码产品1 数码产品2 数码产品3 数码产品4 数码产品5 4.接下来是定义最重要的JQUERY代码了: 复制代码 代码如下: <BR>$(function() { <BR>var curY; //获取所选项的Top值 <BR>var curH; //获取所选项的Height值 <BR>var curW; //获取所选项的Width值 <BR>var srtY; //设置提示箭头的Top值 <BR>var srtX; //设置提示箭头的Left值 <BR>var objL; //获取当前对象 <BR>/* <BR>*设置当前位置数值 <BR>*参数obj为当前对象名称 <BR>*/ <BR>function setInitValue(obj) { <BR>curY = obj.offset().top <BR>curH = obj.height(); <BR>curW = obj.width(); <BR>srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值 <BR>srtX = curW - 5 + "px"; //设置提示箭头的Left值 <BR>} <BR>$(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件 <BR>objL = $(this); //获取当前对象 <BR>setInitValue(objL); //设置当前位置 <BR>var allY = curY - curH + "px"; //设置提示框的Top值 <BR>objL.addClass("optnFocus"); //增加获取焦点时的样式 <BR>objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标 <BR>$("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标 <BR>}) <BR>.mouseout(function() {//设置当前所选项的鼠标移出事件 <BR>$(this).removeClass("optnFocus"); //删除获取焦点时的样式 <BR>$(this).next("ul").hide(); //隐藏提示框 <BR>$("#sort").hide(); //隐藏提示箭头 <BR>}) <BR>$(".tip").mousemove(function() { <BR>$(this).show(); //显示提示框 <BR>objL = $(this).prev("li"); //获取当前的上级li对象 <BR>setInitValue(objL); //设置当前位置 <BR>objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式 <BR>$("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标 <BR>}) <BR>.mouseout(function() { <BR>$(this).hide(); //隐藏提示框 <BR>$(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式 <BR>$("#sort").hide(); //隐藏提示箭头 <BR>}) <BR>}) <BR> 5.好了,大功告成了...... 运行的效果如下:
