https://helmsleyarts.co.uk/js/nav.js

1(function($j){
2
3  var MobileNav = function(settings){
4      var obj = this;
5      $j.extend(obj, {
6
7        
8
9        settings: {
10          navBtn: 'nav-btn',
11          header: 'header',
12          toggleClass: 'nav-open',
13          nav: '#main-nav',
14          navText: 'menu',
15          wrapper: '.wrap'
16        },
17
18        init: function(){
19          $j(window).on('device-type', $j.proxy(this, 'switchJS'));
20
21          $j.extend(this.settings, settings);
22
23        },
24
25        initNav: function(){
26          this.$header = $j(this.settings.header);
27          this.$headerClone = this.$header.clone(true, true);
28          this.$nav = this.$header.find(this.settings.nav).find(this.settings.wrapper);
29        },
30
31        switchJS: function(e, val){
32          switch(val){
33            case 'small': this.buildNav();
34            break;
35            case 'medium': this.destroy();
36            break;
37            default: this.destroy();
38          }
39        },
40
41        destroy: function(){
42          if($j('.' + this.settings.navBtn).length > 0){
43            $j(this.settings.header).replaceWith(this.$headerClone);
44          }
45        },
46
47        buildNav: function(){
48          this.initNav();
49
50          $j(this).on('close-nav', $j.proxy(this, 'closeNav'));
51
52          this.$navBtn = $j('<div />',{
53            'class': this.settings.navBtn,
54            'data-nav-btn': '',
55            'html': '<span></span>'
56          });
57          this.$navText = $j('<div />', {
58            'class':'nav-text',
59            'text': this.settings.navText
60          });
61
62          var $container = this.$header.find(this.settings.nav)
63          $container.prepend(this.$navBtn).prepend(this.$navText);
64          this.$navBtn.on('click', $j.proxy(this, 'toggleNav'));
65          this.navHeight = this.$nav.height();
66          this.$nav.height(0);
67        },
68
69        closeNav: function(){
70          this.$header.find(this.settings.nav).removeClass(this.settings.toggleClass);
71            this.$nav.height(0);
72        },
73
74        openNav: function(){
75          this.$header.find(this.settings.nav).addClass(this.settings.toggleClass);

76            this.$nav.height(this.navHeight);
77        },
78
79        toggleNav: function(){
80          if(this.$header.find(this.settings.nav).hasClass(this.settings.toggleClass)){
81            this.closeNav();
82          }else{
83            this.openNav();
84          }
85        }
86      });
87
88      obj.init();
89    };
90
91  $j().ready(function(){
92    var nav = new MobileNav();
93
94
95    //get top menu text
96    var $c = $j('.boxoffice'),
97        text = $c.find('h2').text();
98
99    text += ' ' + $c.find('span').not('.days').text(); 
100
101
102    var navTop = new MobileNav({nav: '.h-r-wrap', wrapper: '#h-info', navText: text});
103  });
104
105})(jQuery);