fe / yoho-blk · Commits

Go to a project

Authored by yyq
Commit 352f0f963d77472f8cee5bc63b68e6e7f61894c7 1 parent 12d7e28c

头部导航

Inline Side-by-side
Showing 8 changed files with 233 additions and 8 deletions
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 购物袋 37 购物袋
38 <div class="mini-bag-box sub-wrapper"> 38 <div class="mini-bag-box sub-wrapper">
39 <div class="bag-content"> 39 <div class="bag-content">
40 - 您的购物,袋暂无商品 40 + 您的购物袋暂无商品
41 </div> 41 </div>
42 </div> 42 </div>
43 </li> 43 </li>
@@ -46,3 +46,4 @@ @@ -46,3 +46,4 @@
46 </div> 46 </div>
47 </div> 47 </div>
48 {{/ pageHeader}} 48 {{/ pageHeader}}
  49 +{{> nav-menu}}
  1 +{{!-- {{# navMenu}} --}}
  2 + <div class="yoho-nav">
  3 + <div class="main-nav">
  4 + <div class="center-content">
  5 + <ul class="main-nav-list">
  6 + {{!-- {{# navbars}} --}}
  7 + <li class="nav-item{{#if cur}} cur{{/if}}">
  8 + <span class="nav-en">MEN</span>
  9 + <span class="nav-cn">男士</span>
  10 + </li>
  11 + <li class="nav-item cur">
  12 + <span class="nav-en">WOMEN</span>
  13 + <span class="nav-cn">女士</span>
  14 + </li>
  15 + {{!-- {{/ navbars}} --}}
  16 + </ul>
  17 + <div class="main-logo"></div>
  18 + </div>
  19 + </div>
  20 + <div class="sub-nav">
  21 + <div class="center-content">
  22 + <ul class="sub-nav-list">
  23 + {{!-- {{# subNav}} --}}
  24 + <li{{#if thirdNav}} class="contain-third"{{/if}}>
  25 + <a href="{{link}}">
  26 + <span class="nav-en">New</span>
  27 + <span class="nav-cn">新品</span>
  28 + </a>
  29 + </li>
  30 + <li>
  31 + <a href="{{link}}">
  32 + <span class="nav-en">Brand</span>
  33 + <span class="nav-cn">品牌</span>
  34 + </a>
  35 + </li>
  36 + <li>
  37 + <a href="{{link}}">
  38 + <span class="nav-en">Clothing</span>
  39 + <span class="nav-cn">服饰</span>
  40 + </a>
  41 + </li>
  42 + {{!-- {{/ subNav}} --}}
  43 + </ul>
  44 + <div class="search-entry">
  45 + <span class="iconfont">&#xe605;</span>
  46 + <div class="search-wrapper">
  47 + <div class="search-input">
  48 + <span class="iconfont left">&#xe605;</span>
  49 + <input type="text" name="query" id="search-key" class="search-key" placeholder="search"autocomplete="off">
  50 + <span class="iconfont right">&#xe608;</span>
  51 + </div>
  52 + <ul class="search-hint clearfix">
  53 + <li class="cur">
  54 + <a href="#">
  55 + <span>大衣</span>
  56 + <span class="right">约300个商品</span>
  57 + </a>
  58 + </li>
  59 + <li>
  60 + <a href="#">
  61 + <span>大衣</span>
  62 + <span class="right">约300个商品</span>
  63 + </a>
  64 + </li>
  65 + <li>
  66 + <a href="#">
  67 + <span>大衣</span>
  68 + <span class="right">约300个商品</span>
  69 + </a>
  70 + </li>
  71 + </ul>
  72 + <div class="hot-search">
  73 + <a href="#">外套</a>
  74 + <a href="#">长裤</a>
  75 + <a href="#">大衣</a>
  76 + <a href="#">毛衣</a>
  77 + <a href="#">图案</a>
  78 + <a href="#">简约连衣裙</a>
  79 + </div>
  80 + </div>
  81 + </div>
  82 + </div>
  83 + </div>
  84 + </div>
  85 +{{!-- {{/ navMenu}} --}}
No preview for this file type
@@ -2,11 +2,11 @@ @@ -2,11 +2,11 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Wed Jun 29 12:53:43 2016 5 +Created by FontForge 20120731 at Thu Jun 30 11:53:42 2016
6 By admin 6 By admin
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
9 -<font id="iconfont" horiz-adv-x="374" > 9 +<font id="iconfont" horiz-adv-x="1024" >
10 <font-face 10 <font-face
11 font-family="iconfont" 11 font-family="iconfont"
12 font-weight="500" 12 font-weight="500"
@@ -16,14 +16,14 @@ Created by FontForge 20120731 at Wed Jun 29 12:53:43 2016 @@ -16,14 +16,14 @@ Created by FontForge 20120731 at Wed Jun 29 12:53:43 2016
16 ascent="896" 16 ascent="896"
17 descent="-128" 17 descent="-128"
18 x-height="792" 18 x-height="792"
19 - bbox="34 -31 956 792" 19 + bbox="0 -212 1024 896"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E600" 22 + unicode-range="U+0078-E608"
23 /> 23 />
24 -<missing-glyph 24 +<missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
26 - <glyph glyph-name=".notdef" 26 + <glyph glyph-name=".notdef" horiz-adv-x="374"
27 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 27 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
28 <glyph glyph-name=".null" horiz-adv-x="0" 28 <glyph glyph-name=".null" horiz-adv-x="0"
29 /> 29 />
@@ -33,8 +33,27 @@ d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> @@ -33,8 +33,27 @@ d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
33 d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5 33 d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
34 t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5 34 t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
35 t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" /> 35 t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
36 - <glyph glyph-name="uniE600" unicode="&#xe600;" horiz-adv-x="1024" 36 + <glyph glyph-name="uniE600" unicode="&#xe600;"
37 d="M900 660h-776q-8 0 -14 -6t-6 -14v-21q0 -8 6 -14t14 -6h776q8 0 14 6t6 14v21q0 8 -6 14t-14 6zM900 415h-776q-8 0 -14 -6t-6 -15v-20q0 -9 6 -15t14 -6h776q8 0 14 6t6 15v20q0 9 -6 15t-14 6zM900 169h-776q-8 0 -14 -6t-6 -14v-21q0 -8 6 -14t14 -6h776q8 0 14 6 37 d="M900 660h-776q-8 0 -14 -6t-6 -14v-21q0 -8 6 -14t14 -6h776q8 0 14 6t6 14v21q0 8 -6 14t-14 6zM900 415h-776q-8 0 -14 -6t-6 -15v-20q0 -9 6 -15t14 -6h776q8 0 14 6t6 15v20q0 9 -6 15t-14 6zM900 169h-776q-8 0 -14 -6t-6 -14v-21q0 -8 6 -14t14 -6h776q8 0 14 6
38 t6 14v21q0 8 -6 14t-14 6z" /> 38 t6 14v21q0 8 -6 14t-14 6z" />
  39 + <glyph glyph-name="uniE601" unicode="&#xe601;"
  40 +d="M0 896h1024v-1024h-1024v1024zM85 -43h854v854h-854v-854z" />
  41 + <glyph glyph-name="uniE602" unicode="&#xe602;"
  42 +d="M1024 896h-1024v-1024h1024v1024zM448 101l-237 238l90 90l147 -146l307 306l90 -90l-397 -397v-1z" />
  43 + <glyph glyph-name="uniE603" unicode="&#xe603;"
  44 +d="M512 -128q-139 0 -257 68.5t-186.5 186.5t-68.5 257t68.5 257t186.5 186.5t257 68.5t257 -68.5t186.5 -186.5t68.5 -257t-68.5 -257t-186.5 -186.5t-257 -68.5zM512 -14q108 0 200 53t145 145t53 200t-53 200t-145 145t-200 53t-200 -53t-145 -145t-53 -200t53 -200
  45 +t145 -145t200 -53zM512 100q118 0 201 83t83 201t-83 201t-201 83t-201 -83t-83 -201t83 -201t201 -83z" />
  46 + <glyph glyph-name="uniE604" unicode="&#xe604;"
  47 +d="M512 684q159 0 271.5 -112.5t112.5 -271.5t-112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5zM512 812q-139 0 -257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5t257 68.5t186.5 186.5t68.5 257t-68.5 257
  48 +t-186.5 186.5t-257 68.5z" />
  49 + <glyph glyph-name="uniE605" unicode="&#xe605;"
  50 +d="M968 -37l-163 164q69 108 69 234q0 119 -57.5 219t-157 158.5t-216 58.5t-216 -58.5t-157 -158.5t-57.5 -218.5t57.5 -219t157 -158.5t216.5 -58q124 0 231 69l163 -164q27 -28 65 -28t65 27.5t27 66t-27 66.5zM443.5 50q-127.5 0 -217.5 91.5t-90 220t90 219.5t217.5 91
  51 +t217.5 -91t90 -219.5t-90 -220t-217.5 -91.5z" />
  52 + <glyph glyph-name="uniE606" unicode="&#xe606;"
  53 +d="M387 158l45 -46l272 272l-272 272l-45 -46l226 -226z" />
  54 + <glyph glyph-name="uniE607" unicode="&#xe607;"
  55 +d="M704 665l-41 39l-343 -320l343 -320l41 39l-301 281z" />
  56 + <glyph glyph-name="uniE608" unicode="&#xe608;"
  57 +d="M959 -62l-85 -85l-362 362l-362 -362l-85 85l362 362l-362 362l85 85l362 -362l362 362l85 -85l-362 -362z" />
39 </font> 58 </font>
40 </defs></svg> 59 </defs></svg>
No preview for this file type
No preview for this file type

2.76 KB | W: | H:

2.07 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -40,6 +40,7 @@ @@ -40,6 +40,7 @@
40 border: 1px solid #eee; 40 border: 1px solid #eee;
41 line-height: 32px; 41 line-height: 32px;
42 padding: 20px 0; 42 padding: 20px 0;
  43 + background: #fff;
43 position: absolute; 44 position: absolute;
44 top: 50px; 45 top: 50px;
45 46
@@ -112,7 +113,9 @@ @@ -112,7 +113,9 @@
112 margin-left: -86px; 113 margin-left: -86px;
113 line-height: 1.5; 114 line-height: 1.5;
114 border: 1px solid #eee; 115 border: 1px solid #eee;
  116 + background: #fff;
115 position: absolute; 117 position: absolute;
  118 + z-index: 20;
116 text-align: center; 119 text-align: center;
117 display: none; 120 display: none;
118 121
@@ -135,7 +138,9 @@ @@ -135,7 +138,9 @@
135 .mini-bag-box { 138 .mini-bag-box {
136 padding: 18px; 139 padding: 18px;
137 border: 1px solid #eee; 140 border: 1px solid #eee;
  141 + background: #fff;
138 position: absolute; 142 position: absolute;
  143 + z-index: 20;
139 right: 0; 144 right: 0;
140 display: none; 145 display: none;
141 146
@@ -148,3 +153,118 @@ @@ -148,3 +153,118 @@
148 } 153 }
149 } 154 }
150 } 155 }
  156 +
  157 +.yoho-nav {
  158 + .main-nav {
  159 + height: 80px;
  160 +
  161 + .main-nav-list {
  162 + li {
  163 + float: left;
  164 + height: 21px;
  165 + margin-top: 38px;
  166 + margin-right: 30px;
  167 + color: #999;
  168 + }
  169 +
  170 + .cur {
  171 + color: #1d1d1d;
  172 + border-bottom: 2px solid #1d1d1d;
  173 + }
  174 + }
  175 +
  176 + .main-logo {
  177 + width: 264px;
  178 + height: 40px;
  179 + left: 50%;
  180 + position: absolute;
  181 + margin-left: -132px;
  182 + margin-top: 20px;
  183 + background: resolve('layout/blk-logo.png') no-repeat center center;
  184 + }
  185 + }
  186 +
  187 + .sub-nav {
  188 + height: 50px;
  189 + background: #1d1d1d;
  190 +
  191 + .sub-nav-list {
  192 + line-height: 50px;
  193 +
  194 + li {
  195 + float: left;
  196 + margin-right: 66px;
  197 + }
  198 +
  199 + li > a {
  200 + color: #fff;
  201 + }
  202 + }
  203 +
  204 + .search-entry {
  205 + float: right;
  206 + width: 50px;
  207 + height: 50px;
  208 + line-height: 50px;
  209 + text-align: center;
  210 + position: relative;
  211 + color: #fff;
  212 + cursor: pointer;
  213 + }
  214 +
  215 + .search-wrapper {
  216 + width: 360px;
  217 + padding: 16px 0 10px;
  218 + font-size: 14px;
  219 + top: 50px;
  220 + right: 0;
  221 + position: absolute;
  222 + background: #1d1d1d;
  223 + text-align: left;
  224 + display: none;
  225 + }
  226 +
  227 + .search-input {
  228 + font-size: 16px;
  229 + padding: 0 20px;
  230 +
  231 + .search-key {
  232 + width: 260px;
  233 + height: 30px;
  234 + padding: 10px;
  235 + background: none;
  236 + border: none;
  237 + color: #fff;
  238 + }
  239 + }
  240 +
  241 + .search-hint {
  242 + display: none;
  243 +
  244 + li {
  245 + line-height: 30px;
  246 + padding: 0 20px;
  247 + }
  248 +
  249 + .cur {
  250 + background: #000;
  251 + }
  252 +
  253 + a {
  254 + color: #fff;
  255 + }
  256 + }
  257 +
  258 + .hot-search {
  259 + line-height: 65px;
  260 + margin: 0 20px;
  261 + border-top: 1px solid #fff;
  262 +
  263 + a {
  264 + color: #fff;
  265 + margin-right: 15px;
  266 + }
  267 + }
  268 +
  269 + }
  270 +}