使用jQuery实现的下滑/下拉式菜单

jQuery Sliding Menu Plugin

jQuery，菜单

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3010
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <title>jquery sliding menu</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
    <script>
        (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 Sliding Menu Plugin

jQuery，菜单

编辑器支持Emmet

快捷键

jQuery Sliding Menu Plugin

jQuery，菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：