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 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
工程测量与监理专业应届生求职信
2013/11/27 职场文书
项目申请汇报材料
2014/08/16 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
思想作风建设心得体会
2014/10/22 职场文书
店面出租协议书范本
2014/11/28 职场文书
药房管理制度范本
2015/08/06 职场文书
会计做账心得体会
2016/01/22 职场文书
初中语文教学反思范文
2016/03/03 职场文书
python某漫画app逆向
2021/03/31 Python
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers