下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 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.好了,大功告成了...... 运行的效果如下:
