推荐设备MORE

深说免费建站的猫腻

深说免费建站的猫腻

行业知识

牛刀云小程序开发_jQuery完成导航样式布局操作示

日期:2021-01-08
我要分享
jQuery实现导航样式布局操作示例【可自定义样式布局】       这篇文章主要介绍了jQuery实现导航样式布局操作,可实现基于jQuery的用户自定义样式布局与属性动态操作相关技巧,需要的朋友可以参考下

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

1. 导航Html

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title  导航样式布局 /title 
 link rel="stylesheet" href="style.css" rel="external nofollow" 
 script src="jquery/2.0.0/jquery.min.js" /script 
 script src="nav.js" /script 
 script 
 $(function () {
 $('.list').eq(0).nav('yellow','19px');
 /script 
 /head 
 body 
 li 导航列表
 li 导航列表1 /li 
 li 导航列表1 /li 
 li 导航列表1 /li 
 li 导航列表1 /li 
 li 导航列表1 /li 
 /ul 
 /li 
 li 导航列表
 li 导航列表2 /li 
 li 导航列表2 /li 
 li 导航列表2 /li 
 li 导航列表2 /li 
 li 导航列表2 /li 
 /ul 
 /li 
 li 导航列表
 li 导航列表3 /li 
 li 导航列表3 /li 
 li 导航列表3 /li 
 li 导航列表3 /li 
 li 导航列表3 /li 
 /ul 
 /li 
 li 导航列表
 li 导航列表4 /li 
 li 导航列表4 /li 
 li 导航列表4 /li 
 li 导航列表4 /li 
 li 导航列表4 /li 
 /ul 
 /li 
 li 导航列表
 li 导航列表5 /li 
 li 导航列表5 /li 
 li 导航列表5 /li 
 li 导航列表5 /li 
 li 导航列表5 /li 
 /ul 
 /li 
 /ul 
 /body 
 /html 

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代码运行工具:测试,效果如下:

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

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