简单的下拉菜单

hmh1985

浏览: 41167 次

最近访客更多访客>>

yamazakei

siemens800

woodding2008

williamou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一直找不到简单的jquery 下拉组件，要么兼容性不好，要不样式定制复杂。索性自己花了点时间做了个。

在IE 8，Chrome，Firefox 上测试过都没问题，支持hover 和 click 模式。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>menu demo</title>
    <script type="text/javascript" src="../../jquery.min.js"></script>
</head>

<style>
.my-menu {
    display: inline-block;
}
.my-menu:hover {
    background-color: #EEE;
}
.menu-anchor {
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
}
.menu-arrow-down {
    width: 0;
    height: 0;
    margin-left: 3px;
    display: inline-block;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #999;
}
.menu-content {
    position: relative;
    display: none;
}
.menu-inner-content {
    position: absolute;
    background-color: white;
    top: 0px;
    left: 0px;
    z-index: 10000;
    border: 1px solid #EEE;
    border-radius: 4px;
    box-shadow: 0px 6px 12px #EEE;
}
.menu-inner-content ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 100px;
}
.menu-inner-content ul li a {
    padding: 4px 8px;
    line-height: 25px;
    text-decoration: none;
    display: block;
    color: #333;
}
.menu-inner-content ul li a:hover {
    background-color: #EFEFEF;
}
</style>


<script type="text/javascript">
$(document).ready(function() {
    //hover mode
    $('.my-menu').mouseover(function(event) {
            	var content = $(this).find('.menu-content');
            	content.show();

            }).mouseout(function(event) {
            	var content = $(this).find('.menu-content');
            	content.hide();
            });
    
    //click mode
    /*
    $('.my-menu').click(function(event) {
        var self = $(this);
        var anchor = self.find('.menu-anchor');
        var content = self.find('.menu-content');
        var source = event.target;
        if (content.is(":visible") && !$.contains(content.get(0), source)) {
            content.hide();
            return;
        }
        content.show();
        var handler = function(event) {
            var source = event.target;
            if (!$.contains(self.get(0), source)) {
                content.hide();
                $(document).unbind('click', handler);
            }
        };
        $(document).bind('click', handler);
    });*/

});
</script>

<body>

    <div class="my-menu">
        <div class="menu-anchor">
            <span>my space</span>
            <span class="menu-arrow-down"></span>
        </div>
        <div class="menu-content-wrapper">
            <div class="menu-content">
                <div class="menu-inner-content">
                    <ul>
                        <li><a href="#">menu item1</a>
                        </li>
                        <li><a href="#">menu item1</a>
                        </li>
                        <li><a href="#">menu item1</a>
                        </li>
                        <li><a href="#">menu item1</a>
                        </li>
                        <li><a href="#">menu item1</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="my-menu">
        <div class="menu-anchor">
            <span>sign up</span>
            <span class="menu-arrow-down"></span>
        </div>
        <div class="menu-content-wrapper">
            <div class="menu-content">
                <div class="menu-inner-content">
                	<div style="padding:10px">
                    user name: <input type="text" />
                    password: <input type="text" />
                    <input type="button" value="register"/></div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

分享到：