Toggle navigation
Toggle navigation
This project
Loading...
Sign in
wangshusheng
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to dashboard
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
xuqi
9 years ago
Commit
0d977fe89c0c9276b73d9b0e0b006f6866105319
1 parent
b5b3d8cc
homeupdate
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
23 additions
and
63 deletions
static/js/home/home.js
static/sass/home/_home-header.scss
static/js/home/home.js
View file @
0d977fe
...
...
@@ -7,6 +7,9 @@ var $ = require('jquery'),
Hammer
=
require
(
'hammer'
),
Swiper
=
require
(
'yoho.iswiper'
),
lazyLoad
=
require
(
'yoho.lazyload'
),
$mobileWrap
=
$
(
'.mobile-wrap'
),
$overlay
=
$
(
'.overlay'
),
$sideNav
=
$
(
'.side-nav'
),
bannerSwiper
,
recommendSwiper
,
hotBrandsSwiper
,
...
...
@@ -28,66 +31,28 @@ require('./maybe-like');
lazyLoad
(
$
(
'img.lazy'
));
//$('img:in-viewport').trigger('appear');
//点击首页汉堡menu图标,滑出侧栏导航
// $('.nav-btn').on('tap', function (event) {
// if (!$(this).hasClass('menu-open')) {
// $('.mobile-wrap').addClass('menu-open');
// $('.overlay').show().css('opacity', 0.3);
// $('.side-nav').addClass('on');
// //设置boy高宽,页面不能上下滑动
// $('body').css({
// height: $(window).height(),
// width: '100%',
// overflow: 'hidden'
// });
// }
// event.stopPropagation();
// });
navHammer
=
new
Hammer
(
$
(
'.nav-btn'
)[
0
]);
navHammer
.
on
(
'tap'
,
function
(
event
)
{
if
(
!
$
(
this
).
hasClass
(
'menu-open'
))
{
$
(
'.mobile-wrap'
).
addClass
(
'menu-open'
);
$
(
'.overlay'
).
show
().
css
(
'opacity'
,
0.3
);
$
(
'.side-nav'
).
addClass
(
'on'
);
//设置boy高宽,页面不能上下滑动
$
(
'body'
).
css
({
height
:
$
(
window
).
height
(),
width
:
'100%'
,
overflow
:
'hidden'
});
}
event
.
stopPropagation
();
$mobileWrap
.
addClass
(
'menu-open'
);
$overlay
.
show
().
css
(
'opacity'
,
0.3
);
$sideNav
.
addClass
(
'on'
);
//设置boy高宽,页面不能上下滑动
$
(
'body'
).
css
({
height
:
$
(
window
).
height
(),
width
:
'100%'
,
overflow
:
'hidden'
});
event
.
srcEvent
.
stopPropagation
();
});
//点击页面主体,收起侧栏导航及二级导航
// $('.mobile-wrap').on('tap', function () {
// if ($(this).hasClass('menu-open')) {
// $('.mobile-wrap').removeClass('menu-open');
// $('.overlay').css('opacity', 0);
// $('.sub-nav').removeClass('show');
// $('.side-nav').removeClass('on');
// $('body').css({
// height: 'auto',
// overflow: 'auto'
// });
// setTimeout(function() {
// $('.overlay').hide();
// }, 300);
// }
// });
mobileWrapHammer
=
new
Hammer
(
$
(
'.mobile-wrap'
)[
0
]);
mobileWrapHammer
.
on
(
'tap'
,
function
(
event
)
{
if
(
$
(
this
).
hasClass
(
'menu-open'
))
{
$
(
'.mobile-wrap'
).
removeClass
(
'menu-open'
);
$
(
'.overlay'
).
css
(
'opacity'
,
0
);
mobileWrapHammer
.
on
(
'tap'
,
function
(
e
)
{
if
(
$mobileWrap
.
hasClass
(
'menu-open'
))
{
$mobileWrap
.
removeClass
(
'menu-open'
);
$overlay
.
css
(
'opacity'
,
0
);
$
(
'.sub-nav'
).
removeClass
(
'show'
);
$
(
'.side-nav'
)
.
removeClass
(
'on'
);
$
sideNav
.
removeClass
(
'on'
);
$
(
'body'
).
css
({
height
:
'auto'
,
overflow
:
'auto'
...
...
@@ -95,11 +60,12 @@ mobileWrapHammer.on('tap', function(event) {
setTimeout
(
function
()
{
$
(
'.overlay'
).
hide
();
},
300
);
e
.
srcEvent
.
stopPropagation
();
}
});
//点击一级导航,弹出二级导航
$
(
'.side-nav'
)
.
on
(
'touchstart'
,
'li'
,
function
()
{
$
sideNav
.
on
(
'touchstart'
,
'li'
,
function
()
{
if
(
$
(
this
).
find
(
'.sub-nav'
).
size
()
>
0
)
{
$
(
'.sub-nav'
).
removeClass
(
'show'
);
$
(
this
).
find
(
'.sub-nav'
).
addClass
(
'show'
);
...
...
@@ -114,13 +80,6 @@ $('.sub-nav').each(function () {
});
});
//二级导航样式控制
$
(
'.sub-nav'
).
on
(
'mouseenter'
,
'li'
,
function
()
{
if
(
$
(
this
).
index
()
!==
0
)
{
$
(
this
).
addClass
(
'current'
).
siblings
().
removeClass
(
'current'
);
}
});
//头部banner轮播
if
(
$
(
'.banner-swiper'
).
find
(
'li'
).
size
()
>
1
)
{
bannerSwiper
=
new
Swiper
(
'.banner-swiper'
,
{
...
...
static/sass/home/_home-header.scss
View file @
0d977fe
...
...
@@ -39,10 +39,11 @@
.nav-btn
{
position
:
absolute
;
left
:
32rem
/
$pxConvertRem
;
left
:
0
;
top
:
0
;
bottom
:
0
;
z-index
:
2
;
padding
:
0
32rem
/
$pxConvertRem
;
}
.logo
{
...
...
Please
register
or
login
to post a comment