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

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

1. 导航Html

www.jb51.net 导航样式布局

$(function () {

$('.list').eq(0).nav('yellow','19px');

})

• 导航列表
  • 导航列表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布局代码

@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自定义布局代码

/**

* 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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，效果如下：

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