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 开发之EasyUI 添加数据的实例
Sep 26 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现抽奖功能
Oct 22 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery功能函数详解
2015/02/01 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
员工入职担保书范文
2014/04/01 职场文书
影子教师研修方案
2014/06/14 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
委托公证书格式
2015/01/26 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS