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鼠标悬停内容动画切换效果
Apr 27 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
vue实现购物车小案例
2019/09/27 Javascript
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python过滤序列元素的方法
2020/07/31 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
How TDD works
2012/09/30 面试题
怎么写好自荐信
2013/10/30 职场文书
自我鉴定范文
2013/11/10 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
师范学院教师自荐书
2014/01/31 职场文书
入股协议书
2014/04/14 职场文书
个人授权委托书格式
2014/08/30 职场文书
效能风暴心得体会
2014/09/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python