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

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

1. 导航Html

rush:xhtml;"> <Meta charset="UTF-8">

导航列表
导航列表1
• 导航列表1
• 导航列表1
• 导航列表1
• 导航列表1
• 导航列表
  导航列表2
  • 导航列表2
  • 导航列表2
  • 导航列表2
  • 导航列表2
• 导航列表
  导航列表3
  • 导航列表3
  • 导航列表3
  • 导航列表3
  • 导航列表3
• 导航列表
  导航列表4
  • 导航列表4
  • 导航列表4
  • 导航列表4
  • 导航列表4
• 导航列表
  导航列表5
  • 导航列表5
  • 导航列表5
  • 导航列表5
  • 导航列表5

2. 导航css布局代码

rush:css;"> @charset "utf-8"; body{ margin: 0; } .list{ list-style-type:none; margin: 0; padding: 0; font-size: 14px; color: #fff; width: 500px; margin:50px auto; } .list li{ float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #333333; cursor: pointer; } .nav{ /*list-style:none;*/ margin:0; padding:0; display:none; /*color:color ;*/ /*background-color: ;*/ }

3. 导航js自定义布局代码

rush:js;"> /** * Created by Administrator on 2016/5/23. */ ;(function ($) { $.fn.extend( { 'nav':function (color,fonts) { $(this).find('.nav').css({ 'list-style':'none','margin':0,'padding':0,'display':'none','color':color,'font-size':fonts }); $(this).find('.nav').parent('li').hover(function () { $(this).find('.nav').slideDown('normal'); },function () { $(this).find('.nav').stop().slideUp('normal'); }) return this; } } ); })(jQuery);

使用在线HTML/CSS/JavaScript代码运行工具：测试，效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》

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