https://www.elspublishing.com/js/plugins/menu.js

1// Global var
2var CRUMINA = {};
3
4(function ($) {
5  // USE STRICT
6  'use strict'
7
8  // ----------------------------------------------------/
9  // Predefined Variables
10  // ----------------------------------------------------/
11  var $window = $(window)
12  var $document = $(document)
13  var $body = $('body')
14  // Elements
15  var $primaryMenu = $('#primary-menu')
16  var $header = $('#site-header')
17  /* -----------------------------
18   * On Click Functions
19   * --------------------------- */
20
21  $window.keydown(function (eventObject) {
22    if (eventObject.which == 27) {
23      $body.removeClass('overlay-enable')
24      $('.search-standard').removeClass('open')
25      $primaryMenu.css({ visibility: 'visible' })
26      $('#menu-icon-trigger').css({ opacity: '1' })
27      $('.top-bar').removeClass('open')
28    }
29  })
30
31  jQuery('#top-bar-js').on('click', function () {
32    $('.top-bar').addClass('open')
33    return false
34  })
35
36  jQuery('.js-open-search-standard > *').on('click', function () {
37    $primaryMenu.find('.search-standard').addClass('open')
38    $primaryMenu.css({ visibility: 'hidden' })
39    $('#menu-icon-trigger').css({ opacity: '0' })
40    setTimeout(function () { $primaryMenu.find('.search-input').focus() }, 100)
41    return false
42  })
43
44  jQuery('.js-search-close > *').on('click', function () {
45    $primaryMenu.find('.search-standard').removeClass('open')
46    $primaryMenu.css({ visibility: 'visible' })
47    $('#menu-icon-trigger').css({ opacity: '1' })
48    return false
49  })
50  // 3-d party libs run
51  $primaryMenu.crumegamenu({
52    showSpeed: 0,
53    hideSpeed: 0,
54    trigger: 'hover',
55    animation: 'drop-up',
56    effect: 'fade',
57    indicatorFirstLevel: '&#xf0d7',
58    indicatorSecondLevel: '&#xf105'
59  })
60  CRUMINA.burgerAnimation = function () {
61    /* In animations (to close icon) */
62
63    var beginAC = 80
64    var endAC = 320
65    var beginB = 80
66    var endB = 320
67
68    function inAC (s) {
69      s.draw('80% - 240', '80%', 0.3, {
70        delay: 0.1,
71        callback: function () {
72          inAC2(s)
73        }
74      })
75    }
76
77    function inAC2 (s) {
78      s.draw('100% - 545', '100% - 305', 0.6, {
79        easing: ease.ease('elastic-out', 1, 0.3)
80      })
81    }
82
83    function inB (s) {
84      s.draw(beginB - 60, endB + 60, 0.1, {
85        callback: function () {
86          inB2(s)
87        }
88      })
89    }
90
91    function inB2 (s) {
92      s.draw(beginB + 120, endB - 120, 0.3, {
93        easing: ease.ease('bounce-out', 1, 0.3)
94      })
95    }
96
97    /* Out animations (to burger icon) */
98
99    function outAC (s) {
100      s.draw('90% - 240', '90%', 0.1, {
101        easing: ease.ease('elastic-in', 1, 0.3),
102        callback: function () {
103          outAC2(s)
104        }
105      })
106    }
107
108    function outAC2 (s) {
109      s.draw('20% - 240', '20%', 0.3, {
110        callback: function () {
111          outAC3(s)
112        }
113      })
114    }
115
116    function outAC3 (s) {
117      s.draw(beginAC, endAC, 0.7, {
118        easing: ease.ease('elastic-out', 1, 0.3)
119      })
120    }
121
122    function outB (s) {
123      s.draw(beginB, endB, 0.7, {
124        delay: 0.1,
125        easing: ease.ease('elastic-out', 2, 0.4)
126      })
127    }
128
129    /* Scale functions */
130
131    function addScale (m) {
132      m.className = 'menu-icon-wrapper scaled'
133    }
134
135    function removeScale (m) {
136      m.className = 'menu-icon-wrapper'
137    }
138
139    CRUMINA.fixedHeader = function () {
140      // grab an element
141      $header.headroom(
142        {
143          offset: 210,
144          tolerance: 5,
145          classes: {
146            initial: 'animated',
147            pinned: 'slideDown',
148            unpinned: 'slideUp'
149          }
150        }
151      )
152    }
153
154    /* Awesome burger scaled */
155
156    var pathD = document.getElementById('pathD')
157    var pathE = document.getElementById('pathE')
158    var pathF = document.getElementById('pathF')
159    var segmentD = new Segment(pathD, beginAC, endAC)
160    var segmentE = new Segment(pathE, beginB, endB)
161    var segmentF = new Segment(pathF, beginAC, endAC)
162    var wrapper2 = document.getElementById('menu-icon-wrapper')
163    var trigger2 = document.getElementById('menu-icon-trigger')
164    var toCloseIcon2 = true
165
166    wrapper2.style.visibility = 'visible'
167

168    trigger2.onclick = function () {
169      addScale(wrapper2)
170      if (toCloseIcon2) {
171        inAC(segmentD)
172        inB(segmentE)
173        inAC(segmentF)
174      } else {
175        outAC(segmentD)
176        outB(segmentE)
177        outAC(segmentF)
178      }
179      toCloseIcon2 = !toCloseIcon2
180      setTimeout(function () {
181        removeScale(wrapper2)
182      }, 450)
183    }
184  }
185  if ($('#menu-icon-wrapper').length) {
186    CRUMINA.burgerAnimation()
187  }
188  CRUMINA.fixedHeader()
189  // 监听锚点链接的点击事件
190}
191)(jQuery)