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 相关文章推荐
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jquery实现拖拽添加元素功能
Dec 01 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中使用临时表查询数据的一个例子
2013/02/03 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Script的加载方法小结
2011/01/12 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
重命名批处理python脚本
2013/04/05 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python实现控制台打印的方法
2019/01/12 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python链表类中获取元素实例方法
2021/02/23 Python
单位门卫岗位职责
2013/12/20 职场文书
环境日宣传活动总结
2014/07/09 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js