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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JavaScript实现动态留言板
Mar 16 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
antd design table更改某行数据的样式操作
Oct 31 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代码
2012/06/08 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Javascript的一种模块模式
2008/03/22 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript中length属性的探索
2011/07/31 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
原生js实现秒表计时器功能
2017/02/16 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue实现评论列表功能
2019/10/25 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Python中replace方法实例分析
2014/08/20 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python装饰器用法示例小结
2018/02/11 Python
python3实现猜数字游戏
2020/12/07 Python
Django框架模板用法入门教程
2019/11/04 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
语文教研活动总结
2014/07/02 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
人与自然观后感
2015/06/16 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript