https://castings.plc.uk/scripts/owner/navigation/DropdownNavigation.js?d=2

1_dropdownNavigation = {
2
3    // Initializes the drop down navigation behaviour
4    initializeDropdownNavigation: function ()
5    {
6        // Detects relevent elements
7        var body = $('body');
8        var dropdownNavigation = $('#dropdown-navigation');
9        var dropdownTriggers = dropdownNavigation.find('.transition-trigger');
10        var dropdownTriggersParent = dropdownTriggers.parent();
11        var dropdownSublevels = dropdownNavigation.find('.sublevel-wrapper');
12
13        // Drop down trigger click behaviour
14        dropdownTriggersParent.hover(function (e)
15        {
16            // Prevents the default behaviour
17            e.preventDefault();
18
19            // Detects the relevent elements
20            var thisDropdownTrigger = $(this);
21            var thisDropdownTriggerParent = thisDropdownTrigger;
22            var thisDropdownTriggerSublevel = thisDropdownTrigger.find('.sublevel-wrapper');
23
24            // Checks if the clicked trigger is already active
25            if (thisDropdownTrigger.hasClass('active'))
26            {
27                // Removes the active class from the clicked triggers parent
28                thisDropdownTrigger.removeClass('active');
29
30                // Removes the overflow-inactive class from the clicked triggers sublevel
31                thisDropdownTriggerSublevel.removeClass('overflow-inactive');
32
33                // Detects any active sub levels
34                var thisDropdownTriggerSublevelActiveTriggersParent = thisDropdownTriggerSublevel.find('.active');
35
36                // Checks if any active sub levels have been detected
37                if (thisDropdownTriggerSublevelActiveTriggersParent.length > 0)
38                {
39                    // Detects the relevent elements
40                    var thisDropdownTriggerSublevelActiveTriggers = thisDropdownTriggerSublevelActiveTriggersParent.children('.transition-trigger');
41                    var thisDropdownTriggerSublevelActiveSubLevels = thisDropdownTriggerSublevelActiveTriggersParent.children('.sublevel-wrapper');
42
43                    // Removes the active class from the active triggers parent
44                    thisDropdownTriggerSublevelActiveTriggersParent.removeClass('active');                    
45
46                    // Removes the overflow-inactive class from the active triggers sub level
47                    thisDropdownTriggerSublevelActiveSubLevels.removeClass('overflow-inactive');
48
49                    // Adds a collapsed class to the active triggers
50                    thisDropdownTriggerSublevelActiveTriggers.addClass('collapsed');
51                }                
52
53                // Adds a collapsed class to the clicked trigger
54                thisDropdownTrigger.addClass('collapsed');
55
56            }
57            else
58            {
59                // Detects the clicked triggers active parents
60                var thisDropdownTriggerParents = thisDropdownTrigger.parents('.active');
61
62                // Removes the active class from all the drop down triggers parent except the clicked triggers active parents
63                dropdownTriggersParent.not(thisDropdownTriggerParents).removeClass('active');
64
65                // Adds an active class to the clicked triggers parent
66                thisDropdownTriggerParent.addClass('active');
67
68                // Detects all clicked triggers active parents sublevel
69                var thisDropdownTriggerParentsSublevel = thisDropdownTriggerParents.children('.sublevel-wrapper');
70
71                // Removes the overflow-inactive class from all sublevels except clicked triggers active parents sublevels
72                dropdownSublevels.not(thisDropdownTriggerParentsSublevel).removeClass('overflow-inactive');                
73
74                // Sets a timer to execute the script after the css transition has completed
75                setTimeout(function (e)
76                {   
77                    // Add a overflow-inactive class to the clicked triggers 
78                    thisDropdownTriggerSublevel.addClass('overflow-inactive');
79                }, 650);
80
81                // Detects the clicked triggers active parents trigger
82                var thisDropdownTriggerParentsTrigger = thisDropdownTriggerParents.children('.transition-trigger');
83
84                // Adds a collapsed class to all the triggers except the the clicked triggers active parents trigger
85                dropdownTriggers.not(thisDropdownTriggerParentsTrigger).addClass('collapsed');
86
87                // Removes the collapsed class from the clicked trigger
88                thisDropdownTrigger.removeClass('collapsed');
89            }
90        });
91
92        // Body click behaviour
93        body.click(function (e)
94        {
95            // if the target of the click isn't the navigation or descending element
96            if (!dropdownNavigation.is(e.target) && dropdownNavigation.has(e.target).length === 0)
97            {
98                // Adds a collapsed class to all the drop down triggers
99                dropdownTriggers.addClass('collapsed');
100
101                // Removes the active class from all the drop down triggers parent
102                dropdownTriggersParent.removeClass('active');
103            }
104        });
105    },
106
107    initializeSublevelHeight: function ()
108    {
109        // Detects relevent elements
110        var dropdownNavigation = $('#dropdown-navigation');
111        var dropdownSublevels = dropdownNavigation.find(".sublevel");
112
113        // Iterates over all the sub levels
114        dropdownSublevels.each(function ()
115        {
116            // Detects the relevent elements
117            var thisSublevel = $(this);
118            var thisSublevelParent = thisSublevel.parent();
119
120            // Checks if a height has been applied to the parent
121            if (thisSublevelParent.css("min-height") != "auto")
122            {
123                // Reset the hieght of the parent
124                thisSublevelParent.css("min-height", "auto");
125            }
126
127            // Detects the height of the sublevel
128            var thisSublevelHeight = thisSublevel.outerHeight(true);
129
130            // Adds the height of the sublevel to its parent
131            thisSublevelParent.css("min-height", thisSublevelHeight);
132        });
133    }
134};
135
136$(document).ready(function () {
137    _dropdownNavigation.initializeDropdownNavigation();
138    _dropdownNavigation.initializeSublevelHeight();
139});
140
141$(window).resize(function () {
142    _dropdownNavigation.initializeSublevelHeight();
143});