站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery实现可用于博客的动态滑动菜单
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

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

来源: 易采站长站

本文实例讲述了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;

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -