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一点特殊用法
May 28 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
Vue.js基础知识小结
Jan 13 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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设计模式之命令模式使用示例
2014/03/02 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
django实现日志按日期分割
2020/05/21 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
selenium如何定位span元素的实现
2021/01/13 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
服务宗旨标语
2014/07/01 职场文书
环境卫生倡议书
2014/08/29 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年教师工作总结
2014/11/10 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2014年路政工作总结
2014/12/10 职场文书
小学语文教学随笔
2015/08/14 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书