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


Posted in jQuery onJuly 24, 2018

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

1. 导航Html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 导航样式布局</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="nav.js"></script>
  <script>
    $(function () {
      $('.list').eq(0).nav('yellow','19px');
    })
  </script>
</head>
<body>
<ul class="list">
  <li>导航列表
    <ul class="nav">
      <li>导航列表1</li>
      <li>导航列表1</li>
      <li>导航列表1</li>
      <li>导航列表1</li>
      <li>导航列表1</li>
    </ul>
  </li>
  <li>导航列表
    <ul class="nav">
      <li>导航列表2</li>
      <li>导航列表2</li>
      <li>导航列表2</li>
      <li>导航列表2</li>
      <li>导航列表2</li>
    </ul>
  </li>
  <li>导航列表
    <ul class="nav">
      <li>导航列表3</li>
      <li>导航列表3</li>
      <li>导航列表3</li>
      <li>导航列表3</li>
      <li>导航列表3</li>
    </ul>
  </li>
  <li>导航列表
    <ul class="nav">
      <li>导航列表4</li>
      <li>导航列表4</li>
      <li>导航列表4</li>
      <li>导航列表4</li>
      <li>导航列表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>
</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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,效果如下:

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

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

jQuery 相关文章推荐
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
document.createElement()用法
2013/03/13 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
js 通用订单代码
2013/12/23 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
js中url对象化管理分析
2017/12/29 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python中获取对象信息的方法
2015/04/27 Python
python类和继承用法实例
2015/07/07 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python读取YAML文件过程详解
2019/12/30 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
物业门卫岗位职责
2013/12/28 职场文书
成品仓管员工作职责
2013/12/29 职场文书
高一生物教学反思
2014/01/17 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
SQL中的连接查询详解
2022/06/21 SQL Server