SimpleNav/simple-nav.js at master · solversgroup/SimpleNav · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
 * simpleNav
 * @version 1.1.0
 */
;(function($) {

    $.fn.simpleNav = function(options) {

        var opts = $.extend(true, {
                timing : 300,
                topMargin : 0,
                menu   : {
                    list        : 'ul',
                    item        : 'li',
                    trigger     : 'a',
                    triggerHTML : '<div class="submenu-trigger"></div>'
                },
                classes : {
                    opened  : 'opened',
                    opening : 'opening',
                    active  : 'active',
                    used    : 'used',
                    has     : 'has-submenu'
                },
                attrs : {
                    opened : {
                        key    : 'opened',
                        true   : 'true',
                        false  : 'false'
                    }
                }
            }, options);

        var $menu = this;
        var $items = $menu.find(opts.menu.item);

        $.each($items, function (index, item) {

            var $item = $(item);
            var $link = $item.find('> a');

            if ($item.find('> ul').length > 0) {

                $item
                    .addClass(opts.classes.has)
                    .find('> a')
                    .after($(opts.menu.triggerHTML));

                $link.attr({
                    'aria-expanded' : $item.hasClass(opts.classes.opened),
                    'aria-haspopup' : true
                });
            }
        });


        $items.find('> ' + opts.menu.trigger).on('click', function(event) {

            event.preventDefault();

            var $link = $(this).closest(opts.menu.item).find('> ' + opts.menu.trigger);
            var $list = $(this).closest(opts.menu.item).find('> ' + opts.menu.list);

            $list.css({
                display : 'block'
            });

            if ($list.parent(opts.menu.item).hasClass(opts.classes.opened)) {

                $list.stop().animate({
                    marginTop : -($list.outerHeight(true)-opts.topMargin)
                }, opts.timing, function() {

                    $link.attr('aria-expanded', false);

                    $list
                        //.attr(opts.attrs.opened.key, opts.attrs.opened.false)
                        .addClass(opts.classes.used)
                        .parent(opts.menu.item).removeClass(opts.classes.opened);

                });

            } else {

                if (!$list.hasClass(opts.classes.used)) {
                    $list
                        .css({
                            marginTop : -($list.outerHeight(true)-opts.topMargin)
                        })
                        .addClass(opts.classes.used);
                }

                $list
                    .parent(opts.menu.item).addClass(opts.classes.opening)
                    .end()
                    .stop().animate({
                        marginTop : (0 + opts.topMargin)
                    }, opts.timing, function() {

                        $link.attr('aria-expanded', true);

                        $list
                            //.attr(opts.attrs.opened.key, opts.attrs.opened.true)
                            .parent(opts.menu.item).removeClass(opts.classes.opening)
                                .end()
                            .addClass(opts.classes.used)
                            .parent(opts.menu.item).addClass(opts.classes.opened);
                    });
            }

        });

    };

})(jQuery);