Link 从多级菜单的第 3 级到第 1 级

Question

我一直在使用这个 Codrops 多级响应菜单。

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

当您深入该菜单时，它会返回-link 到菜单顶部的上一级。如果您进入第 3 层或更深，我要创建的是直接返回 -link 到第 1 层。另外我想保留-link 只倒退了一步。

我创建了一个 Codepen，您还可以在其中查看菜单的工作情况。

Code

Answer 1

这里有一个方法可以实现你想要做的事情。

创建的 VAR：

_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');
},

为 none 一级子菜单添加 "Back to first level" 按钮
并创建 $backTop 变量供以后使用

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;

});

为先前创建的按钮 ($backTop) 从 $back 按钮复制点击事件并添加 self._resetMenu(); 以在点击时重置菜单 "Back to first"

最后只需要为新按钮创建 class：

.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

Link 从多级菜单的第 3 级到第 1 级

Link from 3rd level to 1st level on multi-level menu

jquery

html

css

menu

multi-level