基于jQuery的简单的列表导航菜单

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2015-06-17
最近一段时间准备开始学习JQUERY,感觉JQUERY的功能非常强大,而且代码量也减少了许多....代码也非常的清晰!
下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖!
好了 开始进入正题吧:
1.首先定义CSS样式表:
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
<li><a href="#">笔记本4</a></li>
<li><a href="#">笔记本5</a></li>
</ul>
<li class="optn"><a href="#">移动硬盘</a></li>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
<li><a href="#">移动硬盘4</a></li>
<li><a href="#">移动硬盘5</a></li>
</ul>
<li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
<li><a href="#">电脑软件4</a></li>
<li><a href="#">电脑软件5</a></li>
</ul>
<li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
<li><a href="#">数码产品4</a></li>
<li><a href="#">数码产品5</a></li>
</ul>
</ul>
<img src="Images/sort.gif" alt=""/>
</li>
</ul>

4.接下来是定义最重要的JQUERY代码了:

<script type="text/javascript">
$(function() {
var curY; //获取所选项的Top值
var curH; //获取所选项的Height值
var curW; //获取所选项的Width值
var srtY; //设置提示箭头的Top值
var srtX; //设置提示箭头的Left值
var objL; //获取当前对象
/*
*设置当前位置数值
*参数obj为当前对象名称
*/
function setInitValue(obj) {
curY = obj.offset().top
curH = obj.height();
curW = obj.width();
srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
srtX = curW - 5 + "px"; //设置提示箭头的Left值
}
$(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
objL = $(this); //获取当前对象
setInitValue(objL); //设置当前位置
var allY = curY - curH + "px"; //设置提示框的Top值
objL.addClass("optnFocus"); //增加获取焦点时的样式
objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
$("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
})
.mouseout(function() {//设置当前所选项的鼠标移出事件
$(this).removeClass("optnFocus"); //删除获取焦点时的样式
$(this).next("ul").hide(); //隐藏提示框
$("#sort").hide(); //隐藏提示箭头
})
$(".tip").mousemove(function() {
$(this).show(); //显示提示框
objL = $(this).prev("li"); //获取当前的上级li对象
setInitValue(objL); //设置当前位置
objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
$("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
})
.mouseout(function() {
$(this).hide(); //隐藏提示框
$(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
$("#sort").hide(); //隐藏提示箭头
})
})
</script>

5.好了,大功告成了......
运行的效果如下:

基于jQuery的简单的列表导航菜单


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery+CSS实现一个侧滑导航菜单代码
    jQuery+CSS实现一个侧滑导航菜单代码
    侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单.本文给大家介绍jQuery+CSS实现一个侧滑导航菜单代码,需要的朋友参考下吧侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单.它可以展示重点信息,使其更有可读性和美观性,满足用户体验价值! 今天小编给大家展示如何使用jquery和css实现侧滑菜单. 效果展示   ...
  • jquery实现无限分级横向导航菜单的方法
    这篇文章主要介绍了jquery实现无限分级横向导航菜单的方法,实例分析了基于jQuery插件操作html与对应样式实现导航菜单效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下:<script type=" ...
  • 基于Jquery的简单&简陋Tabs插件代码
    一个基于Jquery的简单&简陋Tabs插件,学习的朋友可以参考下.HTML代码 代码如下: <div class="tab"> <li class="selected" >1</li> <li class="hover">2</li&g ...
  • jQuery实现个性翻牌效果导航菜单的方法
    这篇文章主要介绍了jQuery实现个性翻牌效果导航菜单的方法,实例分析了jQuery操作animate.css及鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//D ...
  • jQuery实现简单二级下拉菜单
    本文给大家分享的是使用jQuery实现简单二级下拉菜单的代码,非常的简单实用,这里推荐给大家,有需要的小伙伴可以美化下,直接带走.html代码 <div class="UpLayer"> <dl> <dt> <a href="javascript:void(0)">< ...
猜你喜欢