Playing with a Custom jQuery Plugin

by bmarsh123

HTML

<div class="navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">Menu 1</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">Menu 2</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

body { padding: 0; margin: 0; }

a {
    text-decoration: none;
}

.navbar-fixed-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #222;
    min-height: 50px;
}

.navbar-inner {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
}

.container {
    display: inline-block;
    width: 100%;
}

li {
    list-style-type: none;
}

.nav {
    display: block;
    width: 100%;
}

.dropdown {
    float: left;
    display: inline-block;
    margin: 0 5px;
}

.dropdown > a {
    background: #555;
    display: inline-block;
    padding: 10px;
    border-radius: 4px;
}

.dropdown-menu {
    position: absolute;
    display: none;
    background: #ddd;
    padding: 5px;
    min-width: 120px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.open {
    display: inline-block;
}

.dropdown-toggle {
    color: #fff;
}

.dropdown-toggle:hover {
    color: #ddd;
}

.dropdown-menu li {
    margin-top: 5px;
}

.dropdown-menu li:hover {
    background: #999;
    border-radius: 4px;
    color: #fff;
    height: 100%;
    width: 100%;
}

.dropdown-menu li a {
    color: #222;
    height: 100%;
    width: 100%;
    padding: 5px;
    display: inline-block;
}

.dropdown-menu li a:hover {
    color: #fff;
}

JavaScript

// Plugin
(function($) {
    $.fn.extend({
        
        dropdown: function(options, element) {
            var defaults = {
                // TODO: add defaults
            };
            
            // Default variables
            var $container = null,
                isOpen = false,
                option = $.extend({}, defaults, options, element);
            
            var methods = {
                init: function($obj, element) {
                    methods.bind($obj, $container);
                },
                bind: function($obj, $container) {
                    var dt = null;
                    $obj.on('mouseover', function(e) {
                        dt = $(this).next('ul');
                        dt.addClass('open');
                        isOpen = true;
                    }).on('mouseleave', function(e) {
                        dt.removeClass('open');
                        isOpen = false;
                        dt = null;
                    });
                    
                    $('.dropdown-menu').on('mouseenter', function(e) {
                        dt = $(this);
                        $(this).addClass('open');
                    }).on('mouseleave', function(e) {
                        $(this).removeClass('open');
                        dt = null;
                    });
                    
                }
            };
            
            return this.each(function() {
                methods.init($(this), element);
            });
        }
    });
}(jQuery));

$(function() {
    $('.dropdown-toggle').dropdown();
});