華爲雲菜單欄級聯效果

華爲雲菜單級聯效果

以前華爲雲仍是有這種效果的，可是目前看官網給取消掉了，網站是用jquery 操做dom 來實現的菜單聯動效果，如今想用vue 來實現一遍，因此得先看看人家的代碼，而後跟着做分析實現出來。

設計知識點

• 函數閉包 (Closure)
• 自定義事件派發（dispatchEvent）
• 函數放抖動 (debounce)
• css3 transition

大致思路

用float 佈局,ul li橫向展開 增添鼠標移入移出事件，給元素增減css 樣式控制動畫。 當鼠標hover事件到menu 圖表中 中展開一級菜單，當進入一級菜單的某一li 是 根據data-key顯示二級菜單內容，進入二級菜單相似。 當鼠標移出菜單時，依次從大到小隱藏以前顯示的層級。

獲取代碼

有個App 比較好用能夠從爬取整站的前端代碼,叫SiteSucker

爬取後的代碼

這裏代碼都是jquery 的函數 好比這種設置隱藏 顯示狀態的。

// 設置層級導航顯示隱藏的狀態
            var setLevelnavState = function ($el, state) {

                var setState = function ($el, state) {
 
                    if (state !== 'show' && state !== 'hide') return;
                    var duration = 300;
                    var isShow = state === 'show';
                    var eventFix = isShow ? 'show' : 'hide';
                    $el.triggerHandler('before' + eventFix);
                    $el.addClass('sliding');
    
                    setTimeout(function () {
                        $el.toggleClass('show', isShow);
                        var called = false;
    
                        $el.one(transitionEnd, function () {
                            called = true;
                            $el.removeClass('sliding');
                            $el.triggerHandler('after' + eventFix);
                        });
    
                        setTimeout(function () {
                            if (!called) {
                                $el.trigger(transitionEnd);
                            }
                        }, duration);
                    }, 0);
                };
    
                var setStateStrategy = {};
    
                setStateStrategy.show = function () {
                    setState($el, 'show');
                };
    
                setStateStrategy.hide = function () {
                    //nextAll() 得到匹配元素集合中每一個元素的全部跟隨的同胞元素，由選擇器篩選是可選的。
                    var $willHideLevel = $el.add($el.nextAll('.header-allnav-level.show'));
                    var $lastShowLevel = $willHideLevel.last();
                    var willHideNumber = $willHideLevel.length;
                    console.log("-----------------------------------------");
                    console.log("$el",$el[0].className);
                    // console.log("$el",$el.nextAll('.header-allnav-level.show'))
                    console.log("$willHideLevel",$willHideLevel);
                    // console.log("$lastShowLevel",$lastShowLevel[0].className);
                    // console.log("$willHideNumber",willHideNumber);
                    console.log("-----------------------------------------");
    
                    // 去除菜單項激活效果
                    $willHideLevel.find('.header-allnav-common-item,[data-define="allnav-item"]').removeClass('active');
                    // 從後往前依次隱藏層級菜單
                    setState($lastShowLevel, 'hide');
                    $willHideLevel.one('afterhide', function () {
                        willHideNumber--;
                        if (willHideNumber <= 0) return;
                        $lastShowLevel = $lastShowLevel.prev('.header-allnav-level');
                        console.log("******************************************");
                        console.log("$lastShowLevel",$lastShowLevel[0].className);
                        console.log("******************************************");
                        setState($lastShowLevel, 'hide');
                    });
                };
                setStateStrategy[state]();
            };
複製代碼

vue 仿寫的代碼

vue_collapse_menu 源碼