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


Posted in Javascript onSeptember 17, 2015

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

这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考。

运行效果截图如下:

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="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 easyui滚动条部分设置介绍
Sep 12 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
create-react-app开发常用配置教程
Jun 25 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 #Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
iView框架问题整理小结
2018/10/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
pytorch中的inference使用实例
2020/02/20 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
妈妈的账单教学反思
2014/02/06 职场文书
企业宣传工作方案
2014/06/02 职场文书
管理工程专业求职信
2014/08/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript