编程 Javascript

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

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js查错流程归纳

May 04 Javascript

JavaScript中OnLoad几种使用方法

Dec 15 Javascript

javascript使用shift+click实现选择和反选checkbox的方法

May 04 Javascript

js实现的后台左侧管理菜单代码

Sep 11 Javascript

jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

Apr 18 Javascript

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

Oct 11 Javascript

Vue-Router进阶之滚动行为详解

Sep 13 Javascript

React Native时间转换格式工具类分享

Oct 24 Javascript

后台使用freeMarker和前端使用vue的方法及遇到的问题

Jun 13 Javascript

原生javascript自定义input[type=radio]效果示例

Aug 27 Javascript

JS实现贪吃蛇游戏

Nov 15 Javascript

javascript实现雪花飘落效果

Aug 19 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