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 30 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
JQuery小知识
2010/10/15 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
Openlayers实现图形绘制
2020/09/28 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python通过文件头判断文件类型
2015/10/30 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python面向对象之继承代码详解
2018/01/29 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python单例设计模式实现解析
2020/01/07 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
单位单身证明范本
2014/01/11 职场文书
教师自我反思材料
2014/02/14 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
世界遗产的导游词
2015/02/13 职场文书
特此通知格式
2015/04/27 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python 数据科学 Matplotlib图库详解
2021/07/07 Python