jQuery实现导航样式布局操作示例【可自定义样式布局】

本文实例讲述了框架实现导航样式布局操作。分享给大家供大家参考，具体如下：

1.导航超文本标记语言

！titlewww.jb51.net导航样式布局/title link rel='样式表href=' style。CSS ' rel='外部无跟随'脚本src=' http :3358 libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script script src=' http : nav。js '/script script $(function(){ $().列表')。等式(0).' nav('黄色，' 19px ')；})/脚本/head dyul class=' list '李导航列表ul class='nav' li导航列表1/李莉导航列表1/李莉导航列表1/李莉导航列表1/李莉导航列表1/li /ul /li li导航列表ul class='nav' li导航列表2/李莉导航列表2/李莉导航列表2/李莉导航列表2/李莉导航列表2/li /ul /li li导航列表ul class='nav' li导航列表3/李莉导航列表3/李莉导航列表3/李莉导航列表3/李莉导航列表3/li /ul /li li导航列表ul class='nav' li导航列表4/李莉导航列表4/李莉导航列表4/李莉导航列表4/李莉导航列表4/li /ul /li li导航列表ul class='nav' li导航列表5/li li导航列表5/li li导航列表5/li li导航列表5/li li导航列表5/li /ul /li/ul/body/html2 .导航钢性铸铁布局代码

@ charset“utf-8”；正文{ margin : 0；}.list { list-style-type :无；保证金： 0；padd : 0；font-size : 14pxcolor: # fff宽度： 500像素；余量：50px汽车；}.左侧列表li { float:宽度： 100像素；高度： 30px线高： 30px文本对齐：中心；背景色： # 333333;光标：指针；}.nav {/*列表式：无；*/保证金：0；划水：0;display : none/* color : color；*//*背景-颜色：*/}3.导航射流研究…自定义布局代码

/** *由管理员于2016年5月23日创建。*/;（函数($){ $ .fn。扩展({ ' nav ' :函数(颜色，字体){ $(这个)).查找('。nav ').css({ 'list-style':'none '，' margin':0，' padding':0，' display':'none '，' color':color，' font-size ' : font })；$(这个)。查找('。nav ').父代('里').悬停(function () { $(this)).查找('。nav ').向下滑动("正常");}，function () { $(this).查找('。nav ').停止()。向上滑动("正常");})返回此；} } );})(jQuery)；使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试，效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。