博客常用的jQuery滑动菜单插件

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 博客常用的jQuery滑动菜单插件

博客常用的jQuery滑动菜单插件

作者:admin 发布时间:2010-11-16 21:38:03 发布人: admin

<!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滑动菜单插件丨网页特效丨myjs.jz123.cn</title>
<script type="text/javascript" src="http://web.archive.org/web/20150329084006js_/http://myjs.jz123.cn/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滑动菜单插件

将本文收藏到QQ书签与更多好友分享

上一篇：文章：CSS+Js选项卡菜单，自适应宽度下一篇：文章：DIV+CSS打造背景图片翻转网页导航菜单

网页特效

博客常用的jQuery滑动菜单插件

本类浏览排行 »

本站推荐文章 »