Skip to content

Commit 2ea950d

Browse files
author
Gennady Tsarinny
committed
search like apple, sub-menu, fix slider
1 parent a7c8a5a commit 2ea950d

File tree

4 files changed

+200
-32
lines changed

4 files changed

+200
-32
lines changed

‎project/sportlife/css/jquery.bxslider.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
width: 32px;
119119
height: 32px;
120120
text-indent: -9999px;
121-
z-index: 5;
121+
z-index: 2;
122122
}
123123

124124
.bx-wrapper .bx-controls-direction a.disabled {

‎project/sportlife/css/style.css‎

Lines changed: 108 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
---------------------------------------------------------------------------------- */
2020

2121
body {
22+
position: relative;
2223
background: #f9f9f9 url(../i/texture.png);
2324

2425
font-family: "MyriadProRegular";
@@ -58,6 +59,17 @@ a {
5859
clear: both;
5960
}
6061

62+
.overlay {
63+
position: absolute;
64+
top: 60px;
65+
left: 0;
66+
right: 0;
67+
bottom: 0;
68+
background: #eee; /* ie8 fallback */
69+
background: rgba(0,0,0,.2);
70+
z-index: 10;
71+
}
72+
6173
.it {
6274
display: inline-block;
6375
vertical-align: middle;
@@ -135,6 +147,11 @@ a {
135147
background: #2e2e36 url(../i/texture_010.png);
136148
}
137149

150+
.header-panel .container {
151+
padding: 0;
152+
line-height: 60px;
153+
}
154+
138155
.__fixed-header-panel .header-panel {
139156
position: fixed;
140157
top: 0; left: 0;
@@ -154,6 +171,7 @@ a {
154171
}
155172

156173
.header-panel_menu {
174+
position: relative;
157175
float: right;
158176
}
159177

@@ -168,7 +186,48 @@ a {
168186
color: #316488;
169187
}
170188

171-
.header-panel_search {
189+
.header-panel_sub-menu {
190+
position: absolute;
191+
top: 100%;
192+
right: 0;
193+
z-index: 15; /* to overlap .overlay */
194+
195+
padding: 20px;
196+
197+
border-top: 4px solid #3599D9;
198+
background: #fff;
199+
border-radius: 0 0 5px 5px;
200+
201+
line-height: 1;
202+
white-space: nowrap; /* не переносим колонки */
203+
}
204+
205+
.header-panel_sub-menu_col {
206+
display: inline-block;
207+
vertical-align: top;
208+
width: 172px;
209+
padding: 0 20px;
210+
211+
white-space: normal; /* reset inherit */
212+
}
213+
214+
.header-panel_sub-menu_h {
215+
font-weight: bold;
216+
color: #2E2E36;
217+
line-height: 1.5;
218+
}
219+
220+
.header-panel_sub-menu_i {
221+
display: block;
222+
padding-top: 20px;
223+
color: #666;
224+
}
225+
.header-panel_sub-menu_i:hover {
226+
text-decoration: none;
227+
color: #3599D9;
228+
}
229+
230+
.header-panel_search {
172231
float: right;
173232
}
174233

@@ -179,29 +238,39 @@ a {
179238
color: #fff;
180239
transition: opacity .3s;
181240
}
241+
.header-panel_search_ic:hover {
242+
color: #999;
243+
}
244+
245+
.header-panel_search.__focus .header-panel_search_ic {
246+
position: relative;
247+
right: -26px;
182248

183-
.header-panel_search_ic.__hidden {
184-
opacity: 0;
185-
transition: opacity .1s
249+
color: #999;
186250
}
187251

188252
.header-panel_search_it {
189253
display: inline-block;
190254
vertical-align: middle;
191255
width: 0;
192-
padding: 0;
256+
padding: 8px 0 4px 0;
193257
margin-top: -2px;
194258

195259
background: transparent;
196260
border: 0;
261+
border-radius: 3px;
262+
color: #999;
197263

198264
transition: background .3s, width .3s;
199265
}
266+
.header-panel_search_it:focus {
267+
outline: none;
268+
}
200269

201270
.header-panel_search.__focus .header-panel_search_it {
202271
display: inline-block;
203272
width: 150px;
204-
padding: 2px 4px;
273+
padding: 8px 10px 4px 30px;
205274

206275
background: #fff;
207276
}
@@ -274,6 +343,39 @@ a {
274343
height: 75px;
275344
}
276345

346+
.slider_ac {
347+
position: absolute;
348+
top: 0;
349+
left: -20px;
350+
width: 20px;
351+
height: 100%;
352+
353+
color: #d2d2d2;
354+
}
355+
.slider_ac:before {
356+
content: '';
357+
height: 100%;
358+
359+
display: inline-block;
360+
vertical-align: middle;
361+
}
362+
363+
.slider_ac.__right {
364+
left: auto;
365+
right: -20px;
366+
}
367+
.slider_ac:hover {
368+
cursor: pointer;
369+
color: #999;
370+
}
371+
372+
.slider_w .bx-next,
373+
.slider_w .bx-prev {
374+
position: absolute;
375+
top: 0; left: 0; right: 0; bottom: 0;
376+
text-indent: -9999px;
377+
}
378+
277379
/* /slider */
278380

279381

‎project/sportlife/index.html‎

Lines changed: 76 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,68 @@
2222
<a class="header-panel_menu_i" href="#444">Велосипеды</a>
2323
<a class="header-panel_menu_i" href="#444">Велосипеды</a>
2424
<a class="header-panel_menu_i" href="#444">Велосипеды</a>
25+
<div class="header-panel_sub-menu">
26+
<div class="header-panel_sub-menu_overlay"></div>
27+
<div class="header-panel_sub-menu_col">
28+
<div class="header-panel_sub-menu_h">
29+
Аксессуары 1
30+
</div>
31+
<a href="#333" class="header-panel_sub-menu_i">Багажники в две строчки в две строчки </a>
32+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
33+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
34+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
35+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
36+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
37+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
38+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
39+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
40+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
41+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
42+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
43+
</div>
44+
45+
<div class="header-panel_sub-menu_col">
46+
<div class="header-panel_sub-menu_h">
47+
Аксессуары 2
48+
</div>
49+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
50+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
51+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
52+
53+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
54+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
55+
</div>
56+
57+
<div class="header-panel_sub-menu_col">
58+
<div class="header-panel_sub-menu_h">
59+
Аксессуары 3
60+
</div>
61+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
62+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
63+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
64+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
65+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
66+
67+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
68+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
69+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
70+
</div>
71+
72+
<div class="header-panel_sub-menu_col">
73+
<div class="header-panel_sub-menu_h">
74+
Аксессуары 4
75+
</div>
76+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
77+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
78+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
79+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
80+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
81+
82+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
83+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
84+
<a href="#333" class="header-panel_sub-menu_i">Багажники</a>
85+
</div>
86+
</div>
2587
</div>
2688

2789
</div>
@@ -59,14 +121,8 @@
59121

60122
<div class="panel slider-panel">
61123
<div class="container">
62-
<div class="slider">
63-
<!--<div class="slider_ac">-->
64-
<!--<i class="fa fa-arrow-circle-left fa-lg"></i>-->
65-
<!--</div>-->
66-
<!--<div class="slider_ac __right">-->
67-
<!--<i class="fa fa-arrow-circle-right fa-lg"></i>-->
68-
<!--</div>-->
69-
<!--<div class="slider_cnt">-->
124+
<div class="slider_w">
125+
<div class="slider">
70126
<div class="slider_i">
71127
<img src="http://placehold.it/145x75" alt=""/>
72128
</div>
@@ -92,8 +148,13 @@
92148
<img src="http://placehold.it/145x75" alt=""/>
93149
</div>
94150
</div>
95-
96-
<!--</div>-->
151+
<div class="slider_ac js-prev">
152+
<i class="fa fa-arrow-circle-left fa-lg"></i>
153+
</div>
154+
<div class="slider_ac __right js-next">
155+
<i class="fa fa-arrow-circle-right fa-lg"></i>
156+
</div>
157+
</div>
97158
</div>
98159
</div>
99160

@@ -620,6 +681,11 @@
620681
</div>
621682

622683
</div>
684+
685+
686+
<!-- overlay -->
687+
<div class="overlay"></div>
688+
623689
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
624690
<script src="./js/jquery.bxslider.min.js"></script>
625691
<script src="./js/main.js"></script>

‎project/sportlife/js/main.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ $(function () {
22

33
//
44
// header menu
5-
var $headerPanel = $('.header-panel'),
6-
headerPanelHeight = $headerPanel.height();
7-
8-
$(window).on('scroll', function(){
9-
var $this = $(this);
10-
11-
if ($this.scrollTop() > headerPanelHeight) {
12-
$('body').addClass('__fixed-header-panel');
13-
} else {
14-
$('body').removeClass('__fixed-header-panel');
15-
}
16-
});
5+
// var $headerPanel = $('.header-panel'),
6+
// headerPanelHeight = $headerPanel.height();
7+
//
8+
// $(window).on('scroll', function(){
9+
// var $this = $(this);
10+
//
11+
// if ($this.scrollTop() > headerPanelHeight) {
12+
// $('body').addClass('__fixed-header-panel');
13+
// } else {
14+
// $('body').removeClass('__fixed-header-panel');
15+
// }
16+
// });
1717

1818
//
1919
// search like apple.com
@@ -22,14 +22,12 @@ $(function () {
2222
$searchField = $searchPanel.find('.header-panel_search_it');
2323

2424
$searchToggler.on('click', function(){
25-
$searchToggler.addClass('__hidden');
2625
$searchPanel.addClass('__focus');
2726
$searchField.focus();
2827
});
2928

3029
$searchField.on('blur', function(){
3130
$searchPanel.removeClass('__focus');
32-
$searchToggler.removeClass('__hidden');
3331
});
3432

3533
//
@@ -39,6 +37,8 @@ $(function () {
3937
slideMargin: 10,
4038
pager: false,
4139
minSlides: 7,
42-
maxSlides: 7
40+
maxSlides: 7,
41+
prevSelector: $('.js-prev'),
42+
nextSelector: $('.js-next')
4343
});
4444
});

0 commit comments

Comments
 (0)