本文通过一个例子来说明jQuery实现的简单列表导航菜单效果代码。分享给大家参考。具体如下：

这里用jQuery实现了一个简单的列表导航菜单，是根据网上的教程边看边写的。更正后，可以通过复制代码来使用。主要实现包括三个部分，一是CSS，二是引入jQuery，三是编写JS代码来控制jQuery。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-简单列表-样式-导航-菜单-代码/

具体代码如下：

htmlheadtitlejQuery实现简单的列表导航菜单/title脚本类型=' text/JavaScript ' src=' jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS ' body { font-size 336013 px } ul，Li { list-style-type : none；padd :0 pxmargin :0 px } .菜单{ width :190 pxborder : solid 1px # e5d 1a 1背景-color:#FFFDD2} .optn {宽度：190px行高：28 px边框-顶部： dadded 1px # CCC } .内容{ padding-top :10 px；clear : left } a { text-decoration : none；color : # 666 padd :10 px } .optnFocus {底色： # ffffont-weight : bold } div { padd :10 px } div img { float : left；填充-右侧：6 px } span {填充-顶部：3 pxfont-size :14 px字体粗细：加粗；float:left} .tip { width :190 pxborder : solid 2px # FFA 200位置：绝对；padding:10px背景-color : # fff；display:none} .tip Li {行高：23 px} # sort { position : absolutedidisplay : none }/style脚本类型=' text/JavaScript ' $(function(){ var CurY；//获取所选项的顶端值var curH//获取所选项的高度值var curW//获取所选项的宽度值var srtY//设置提示箭头的顶端值var srtX//设置提示箭头的左边的值var objL//获取当前对象/* *设置当前位置数值*参数目标文件为当前对象名称*/function setInitValue(obj){ curY=obj。偏移量().top CurH=obj。高度()；curW=obj。宽度()；srtY=CuRy(CurH/2)' px '；//设置提示箭头的顶端值srtX=CurW-5 ' px '；//设置提示箭头的左边的值} $('.optn ' .mouseover(function() {//设置当前所选项的鼠标滑过事件objL=$(this)；//获取当前对象setInitValue(ObJl)；//设置当前位置var AlY=CuRy-CurH ' px '；//设置提示框的顶端值objl。add class(' Optnfocus ')；//增加获取焦点时的样式objL.next('ul ').显示()。css({ 'top': allY，' left': curW }) //显示并设置提示框的坐标$('#sort ').显示()。css({ 'top': srtY，' left ' : SrTx })；//显示并设置提示箭头的坐标}) .mouseout(函数(){//设置当前所选项的鼠标移出事件$(这个)。移除CLaSS(' OptnFocus ')；//删除获取焦点时的样式$(这个)。下一个(' ul ').hide()；//隐藏提示框$('#sort ').hide()；//隐藏提示箭头}) $('.提示')。鼠标移动(函数(){ $(此)).show()；//显示提示框objL=$(this).prev(' Li ')；//获取当前的上级里对象setInitValue(ObJl)；//设置当前位置objl。add class(' Optnfocus ')；//增加上级里对象获取焦点时的样式$('#sort ').显示()。css({ 'top': srtY，' left ' : SrTx })；//显示并设置提示箭头的坐标}) .mouseout(函数(){ $(此)).hide()；//隐藏提示框$(这个)。上一个(' li ').移除CLaSS(' OptnFocus ')；//删除获取焦点时的样式$('#sort ').hide()；//隐藏提示箭头})})))/script/head dyul Li class=' menu ' div img alt=' src=' http : images/icon。gif '/span精品源码下载社区/span/div ul class=' content ' Li class=' optn ' a href=' # ' Visual c#/a/Li ul class=' tip ' lia href=' # '数据库/a/li lia href='# '系统控制/a/li lia href='# '多媒体/a/li lia href='# '字符处理/a/li lia href='# '打印输出/a/Li/ul Li class=' optn ' a href=' # ' Delphi/a/Li ul class=' tip ' lia href=' # '图像处理/a/li lia href='# '窗体设计/a/li lia href='# '数据库应用/a/li lia href='# '初学实例/a/Li/ul Li class=' optn ' a href=' # ' VC/a/Li ul class=' tip ' lia href=' # '系统控制/a/li lia href='# '数据库应用/a/li lia href='# '电脑软件3/a/li lia href='# '字符处理/a/li lia href='# '电脑软件5/a/Li/ul Li class=' optn ' a href=' # ' VisualBasic/a/Li ul class=' tip ' lia href=' # '系统控制/a/li lia href='# '网络编程/a/li lia href='# '窗口界面/a/li lia href='# '控件组件/a/li lia href='# '图像编程/a/Li/ul/ul img id=' sort ' src=' http : images/sort。 gif ' alt=' '//Li/ul/body/html希望本文所述对大家的jquery程序设计有所帮助。