Ссылка с 3-го уровня на 1-й уровень в многоуровневом меню

Question

Я работаю с этим многофункциональным меню Codrops.

http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

Когда вы углубиться в этом меню, он создает обратную ссылку на предыдущий уровень в верхней части меню. То, что я пытаюсь создать, - это прямая обратная ссылка на первый уровень, если вы идете на 3-й уровень или глубже. Также я хотел бы сохранить обратную связь, которая идет только на один шаг назад.

Я создал Codepen, где вы также можете увидеть меню.

http://codepen.io/morteymor/pen/zvxqVJ

Code 

Answer 1

Вот способ добиться того, что вы хотите сделать.

---

Создано УАК:

_config : function() { 
    this.open = false; 
    this.$trigger = this.$el.children('.dl-trigger'); 
    this.$menu = this.$el.children('ul.dl-menu'); 
    this.$menuitems = this.$menu.find('li:not(.dl-back)'); 
    this.$el.find('ul.dl-submenu').prepend('<li class="dl-back"><a href="#">back</a></li>'); 
    this.$back = this.$menu.find('li.dl-back'); 

    //ADDED 
    this.$el.find('ul.dl-submenu ul.dl-submenu').prepend('<li class="dl-back-top"><a href="#">Back to first level</a></li>'); 
    this.$backTop = this.$menu.find('li.dl-back-top'); 
}, 

• Добавить кнопку «Назад к первому уровню» ни для одного подменю первого уровня является
• и создать переменную $ НАЗАД для последующего использования

---

this.$backTop.on('click.dlmenu', function(event) { 

    var $this = $(this), 
     $submenu = $this.parents('ul.dl-submenu:first'), 
     $item = $submenu.parent(), 

     $flyin = $submenu.clone().insertAfter(self.$menu); 

    //ADDED 
    self._resetMenu(); 

    var onAnimationEndFn = function() { 

     self.$menu.off(self.animEndEventName).removeClass(self.options.animationClasses.classin); 
     $flyin.remove(); 

    }; 

    setTimeout(function() { 
     $flyin.addClass(self.options.animationClasses.classout); 
     self.$menu.addClass(self.options.animationClasses.classin); 
     if(self.supportAnimations) { 
      self.$menu.on(self.animEndEventName, onAnimationEndFn); 
     } 
     else { 
      onAnimationEndFn.call(); 
     } 

     $item.removeClass('dl-subviewopen'); 

     var $subview = $this.parents('.dl-subview:first'); 
     if($subview.is('li')) { 
      $subview.addClass('dl-subviewopen'); 
     } 
     $subview.removeClass('dl-subview'); 
    }); 

    return false; 

}); 

• Дублированный событие щелчка от $ назад кнопки для ранее созданных кнопок ($ НАЗАД) и добавить self._resetMenu(); сбросить меню на клик «Назад к первому»

---

Наконец просто нужно создать класс для новая кнопка:

.dl-menuwrapper li.dl-back-top > a { 
    padding-left: 35px; 
    background: rgba(0, 0, 0, 0.1); 
} 
.dl-menuwrapper li.dl-back-top:after{ 
    position: absolute; 
    top: 0; 
    line-height: 50px; 
    speak: none; 
    -webkit-font-smoothing: antialiased; 
    content: "<<"; 
    font-family: "arial"; 
    color: #fff; 
    font-weight: 900; 
} 

---

Updated CODEPEN