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 Ajax之load()方法
Oct 12 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
js实现掷骰子小游戏
Oct 24 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php字符串截取函数用法分析
2014/11/25 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python计算字符宽度的方法
2016/06/14 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python截取两个单词之间的内容方法
2018/12/25 Python
pytorch打印网络结构的实例
2019/08/19 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
拓展训练激励口号
2014/06/17 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Python使用scapy模块发包收包
2021/05/07 Python