jQuery实现可用于博客的动态滑动菜单


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>jQuery滑动菜单插件</title>

<script type="text/javascript" src="js/jquery1.3.2.js"></script>

<script type="text/javascript">

    (function($){

 $.fn.extend({

     tagdrop: function(options) {

  var defaults = {

      tagPaddingTop: '90px',

      tagDefaultPaddingTop: '30px',

      bgColor: '#B1CCED',

      bgMoverColor: '#7FB0F0',

      textColor: '#e0e0e0',

      textDefaultColor: '#fff'

  };

  var options = $.extend(defaults, options);

  return this.each(function() {

      var obj = $(this);

      var li_items = $("li", obj);

      $("li", obj).css('background-color', options.bgColor);

      li_items.mouseover(function(){

   $(this).animate({paddingTop: options.tagPaddingTop}, 300);

   $(this).css('background-color', options.bgMoverColor);

   $(this).css('color', options.textColor);

      }).mouseout(function() {

   $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);

   $("li",$(this).parent()).css('background-color', options.bgColor);

   $("li",$(this).parent()).css('color', options.textDefaultColor);

      });

  });

     }

 });

    })(jQuery);

</script>

<script type="text/javascript">

    $(document).ready(function() {

 $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});

    });

</script>

<style>

    body {

 margin:0;

 padding:0;

    }

    #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;}

    #nav a:link, #nav a:visited {

    }

    #nav a:hover {color: #fff;  background:#FF6A00;}

    #nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;}

    .menu {

 list-style:none;

 margin: 0;

 float:right;

    }

    .menu li {

 float:left;

 margin:0 auto;

 cursor:pointer;

 height:30px;

 padding:30px 5px 5px 5px;

 margin:0px 3px 0px 3px;

 -moz-border-radius: 0px 0px 10px 10px;

 -webkit-border-radius:0px 0px 10px 10px;

 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

 color: #FFF;

 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

 font-family: "Lucida Grande",Lucida,Verdana,sans-serif;

 font-size:13px;

 font-weight:bold;

 text-transform:uppercase;

    }

</style>

    </head>

    <body>

        <ul class="menu">

            <li>About us</li>

            <li>Contacts</li>

            <li>Others</li>

            <li>Products</li>

    <li>Portfolio</li>

    <li>Testemonies</li>

        </ul>

    </body>

</html>

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

Javascript 相关文章推荐
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
jQuery晃动层特效实现方法
Mar 09 #Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 #Javascript
You might like
用php守护另一个php进程的例子
2015/02/13 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php对象工厂类完整示例
2018/08/09 PHP
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python 如何调用 dubbo 接口
2020/09/24 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
Java如何获得ResultSet的总行数
2016/09/03 面试题
2014年五一活动策划方案
2014/03/15 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
保洁员岗位职责
2015/02/04 职场文书
致青春观后感
2015/06/09 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
2019各种承诺书范文
2019/06/24 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS