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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

jquery动态滑动菜单

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。