菜单事件

@@ -17,30 +17,30 @@ const serviceApi = global.yoho.ServiceAPI;
 const getMenuData = () => (
     {
         yohoGroup: [{
-                link: '/',
-                cn: '有货BLACK',
-                en: 'YOHO!BLK'
-            }, {
-                link: 'http://www.yohoboys.com',
-                cn: '男生潮流',
-                en: 'YOHO!BOYS'
-            }, {
-                link: 'http://www.yohogirls.com',
-                cn: '女生潮流',
-                en: 'YOHO!GIRLS'
-            }, {
-                link: 'http://app.yohoshow.com',
-                cn: '物趣分享',
-                en: 'YOHO!SHOW'
-            }, {
-                link: 'http://www.yohood.cn',
-                cn: '潮流嘉年华',
-                en: 'YO\'HOOD'
-            }, {
-                link: '//www.yohobuy.com',
-                cn: '有货',
-                en: 'YOHO!BUY'
-            }]
+            link: '/',
+            cn: '有货BLACK',
+            en: 'YOHO!BLK'
+        }, {
+            link: 'http://www.yohoboys.com',
+            cn: '男生潮流',
+            en: 'YOHO!BOYS'
+        }, {
+            link: 'http://www.yohogirls.com',
+            cn: '女生潮流',
+            en: 'YOHO!GIRLS'
+        }, {
+            link: 'http://app.yohoshow.com',
+            cn: '物趣分享',
+            en: 'YOHO!SHOW'
+        }, {
+            link: 'http://www.yohood.cn',
+            cn: '潮流嘉年华',
+            en: 'YO\'HOOD'
+        }, {
+            link: '//www.yohobuy.com',
+            cn: '有货',
+            en: 'YOHO!BUY'
+        }]
     }
 );
 
@@ -88,17 +88,11 @@ const getBrandItems = (data) => {
     let brandItems = [];
 
     _.forEach(data, item => {
-        let obj = {
-            link: '',
-            hot: false,
-            brandName: ''
-        };
-
-        obj.link = item.sort_url;
-        obj.hot = item.is_hot === 'Y' ? true : false;
-        obj.brandName = item.sort_name;
-
-        brandItems.push(obj);
+        brandItems.push({
+            link: item.sort_url,
+            hot: item.is_hot === 'Y' ? true : false,
+            name: item.sort_name
+        });
     });
 
 
@@ -115,23 +109,21 @@ const getThirdNav = (data) => {
 
     _.forEach(data, item => {
         let obj = {
-            link: '',
-            title: '',
-            brandItems: false
+            link: item.sort_url,
+            name: item.sort_name
         };
 
-        obj.link = item.sort_url;
-        obj.title = item.sort_name;
-
+        thirdNav.push(obj);
 
         if (item.sub) {
-            obj.brandItems = getBrandItems(item.sub);
+            thirdNav = _.concat(thirdNav, getBrandItems(item.sub));
+            obj.category = true;
+            // obj.brandItems = getBrandItems(item.sub);
         }
 
-        thirdNav.push(obj);
     });
 
-    return thirdNav;
+    return _.chunk(thirdNav, 10);
 };
 
 /**
@@ -195,7 +187,7 @@ const requestNavBar = (type) => {
     }).then(res => {
         return setHeaderData(res.data, type);
     });
-}
+};
 
 
 
@@ -208,7 +200,7 @@ exports.requestHeaderData = (type) => {
     let data = {};
 
     let arr = [
-        getMenuData(),
+        getMenuData()
     ];
 
     if (type) {

@@ -18,13 +18,35 @@
         <div class="sub-nav">
             <div class="center-content">
                 <ul class="sub-nav-list clearfix">
-                {{log subNav}}
                     {{# subNav}}
                         <li{{#if thirdNav}} class="contain-third"{{/if}}>
                             <a href="{{link}}">
                                 <span class="nav-en">{{en}}</span>
                                 <span class="nav-cn">{{cn}}</span>
                             </a>
+                            {{#if thirdNav}}
+                            <div class="third-nav-wrapper">
+                                <div class="center-content">
+                                    {{# thirdNav}}
+                                    <dl class="category-list">
+                                        {{# this}}
+                                            {{#if category}}
+                                            <dt>
+                                                <a href="{{link}}">{{name}}</a>
+                                            </dt>
+                                            {{^}}
+                                            <dd>
+                                                <a href="{{link}}"{{#if hot}} class="hot"{{/if}}>{{name}}</a>
+                                            </dd>
+                                            {{/if}}
+                                        {{/ this}}
+                                    </dl>
+                                    {{/ thirdNav}}
+                                    <div class="show-detail" data-code="{{imgCode}}">
+                                    </div>
+                                </div>
+                            </div>
+                            {{/if}}
                         </li>
                     {{/ subNav}}
                 </ul>

+/**
+ * 公共头部
+ * @author: yyq<yanqing.yang@yoho.cn>
+ * @date: 2016/7/1
+ */
+var $ = require('yoho-jquery');
+
+var delayer;
+
+$('.yoho-group a').hover(function() {
+    var data = $(this).data();
+
+    $(this).text(data.cn);
+}, function() {
+    var data = $(this).data();
+
+    $(this).text(data.en);
+});
+
+$('.contain-third').on({
+    mouseenter: function() {
+        var $thirdWrapper = $(this).children('.third-nav-wrapper');
+
+        delayer = setTimeout(function() {
+            $thirdWrapper.show();
+        }, 200);
+    },
+    mouseleave: function() {
+        var $thirdWrapper = $(this).children('.third-nav-wrapper');
+
+        if (delayer) {
+            clearTimeout(delayer);
+        }
+        $thirdWrapper.hide();
+    }
+});
\ No newline at end of file

@@ -47,6 +47,7 @@
             padding: 20px 0;
             background: #fff;
             position: absolute;
+            z-index: 50;
             top: 50px;
 
             li {
@@ -55,6 +56,10 @@
                 font-weight: bold;
             }
 
+            a:hover {
+                color: #9a9a9a;
+            }
+
         }
     }
 
@@ -120,7 +125,7 @@
             border: 1px solid #eee;
             background: #fff;
             position: absolute;
-            z-index: 20;
+            z-index: 50;
             text-align: center;
             display: none;
 
@@ -145,7 +150,7 @@
             border: 1px solid #eee;
             background: #fff;
             position: absolute;
-            z-index: 20;
+            z-index: 50;
             right: 0;
             display: none;
 
@@ -213,6 +218,12 @@
             li > a {
                 color: #fff;
             }
+
+            li:hover > a {
+                display: inline-block;
+                height: 40px;
+                border-bottom: 2px solid #fff;
+            }
         }
 
         .search-entry {
@@ -283,6 +294,43 @@
                 margin-right: 15px;
             }
         }
+    }
+
+    .third-nav-wrapper {
+        padding: 30px 0;
+        font-size: 14px;
+        position: absolute;
+        background: #fff;
+        width: 100%;
+        left: 0;
+        display: none;
+
+        dl {
+            float: left;
+            height: 330px;
+            line-height: 1;
+            box-sizing: border-box;
+            border-left: 1px solid #eee;
+            padding: 0 20px;
+
+            &:first-child {
+                border-left: 0;
+                padding-left: 0;
+            }
+
+            > * {
+                width: 230px;
+                height: 35px;
+            }
+
+            a {
+                color: #666;
+            }
+        }
 
+        dt > a {
+            color: #000;
+            text-decoration: underline;
+        }
     }
 }