Lee
/
zzwy-news
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

手机导航完成

master
Lee 2022-09-27 18:42:52 +08:00
parent bf87abe5fe
commit 3b43fb3cbc
3 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
css/style.css
View File

@ -34,6 +34,10 @@
justify-content: flex-end;
}
.nav>span{
display: none;
}
.nav>a {
margin-left: 45px;
font-size: 17px;
@ -56,8 +60,9 @@
.pull-call {
align-items: center;
font-size: 17px;
font-weight: normal !important;
position: fixed;
top: 31px;
top: 0;
left: 50%;
transform: translateX(710px);
}
@ -107,6 +112,25 @@
filter: grayscale(100%) brightness(100);
}
/* 手机导航背景 */
.nav-bg{
display: none;
}
/* 手机端导航按钮 */
.head .head-btn{ display: none; width: 24px; float: right; position: relative; cursor: pointer; z-index: 9999;}
.head .head-btn i{ display: block; width: 100%; height: 3px; float: left; background-color: #0e357f; border-radius: 2px;
transition: all .5s ease 0s;
-webkit-transition: all .5s ease 0s;
-moz-transition: all .5s ease 0s;
}
.head .head-btn i.bar-top{ margin-top: 0;}
.head .head-btn i.bar-cen{ margin-top: 6px;}
.head .head-btn i.bar-bom{ margin-top: 6px;}
.head .head-btn.cur i{background-color: #333333;}
.head .head-btn.cur i.bar-cen{ opacity: 0;}
.head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(7.5px, 5px);transform:rotate(45deg) translate(7.5px, 5px);}
.head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(7.5px, -5px);transform: rotate(-45deg) translate(7.5px, -5px);}
/* 尾部 */
.footer {
background-color: #09357f;
@ -2309,4 +2333,99 @@
}
.complaint .right .rich-txt img{
max-width: 100%;
}
/* 非手机端隐藏 */
@media screen and (min-width:768px){
/* 隐藏pc端图片 */
.wap-img{
display: none;
}
}
/* 手机端样式 */
@media screen and (max-width:768px){
.w1360{
width: 94% !important;
}
/* 隐藏pc端图片 */
.pc-img{
display: none;
}
/* 头部 */
.head{
height: 66px;
}
/* logo */
.logo{
height: 50px;
}
.logo img{
height: 100%;
}
/* 导航按钮 */
.head .head-btn{
display: block;
margin: 0;
}
.head .nav{
display: block;
width: 50%;
height: 100vh;
overflow-y: auto;
background-color: #FFFFFF;
position: fixed;
padding: 66px 20px 0;
top: 0px;
right: -50%;
z-index: 9999;
transition: all .6s;
}
.nav>span{
display: block;
width: 100%;
margin-bottom: 30px;
}
.nav>span>img{
height: 36px;
}
.head .nav>a{
display: block;
width: 100%;
font-size: 16px;
line-height: 50px;
margin: 0;
font-weight: normal;
border-bottom: 1px solid #ececec;
}
.pull-call{
position: static;
display: flex !important;
transform: none;
border-bottom: 0 !important;
padding-top: 30px;
}
.head .nav.active{
right: 0;
transition: all .6s;
}
.head .nav-bg{
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 999;
transition: all .6s;
}
.head .nav-bg.active{
display: block;
opacity: 1;
transition: all .6s;
}
}

18
index.html
View File

@ -24,6 +24,7 @@
<div class="head flex w1360">
<div class="logo"><a href="/"><img src="images/public/logo.png" alt="中正物业"></a></div>
<div class="nav flex">
<span><img src="images/public/logo.png" alt="中正物业"></a></span>
<a href="index.html">首页</a>
<a href="introduction.html">关于我们</a>
<a href="activities.html">媒体中心</a>
@ -31,13 +32,20 @@
<a href="redPropert.html">项目案例</a>
<a href="join.html">加入中正</a>
<a href="complaint.html">投诉建议</a>
<!-- 电话 -->
<a href="tel:400-852-1199" class="pull-call color-white flex">
<span class="bg-col-white flex"><img src="images/icon/icon-call-head.png" alt="电话"></span>
<span>400-852-1199</span>
</a>
</div>
<!-- 导航按钮 -->
<div class="nav-bg"></div>
<div class="head-btn">
<i class="bar-top"></i>
<i class="bar-cen"></i>
<i class="bar-bom"></i>
</div>
</div>
<!-- 电话 -->
<a href="tel:400-852-1199" class="pull-call color-white flex">
<span class="bg-col-white flex"><img src="images/icon/icon-call-head.png" alt="电话"></span>
<span>400-852-1199</span>
</a>
</div>
<!-- 轮播 -->

41
js/script.js
View File

@ -1,13 +1,19 @@
$(function(){
// 滑动页面更改头部效果
$(window).scroll(function(){
var scrollTop　=　document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 10){
$('.header').addClass('header-white');
} else {
$('.header').removeClass('header-white');
}
});
// 手机端显示头部
if(screen.width <= 768){
$('.header').addClass('header-white');
}else{
$(window).scroll(function(){
var scrollTop　=　document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 10){
$('.header').addClass('header-white');
} else {
$('.header').removeClass('header-white');
}
});
}
// 轮播动画
if($('.banner-swiper').length){
@ -203,4 +209,23 @@ $(function(){
});
wow.init();
};
// 手机导航按钮
$('.head .head-btn').click(function() {
if ($('.head .head-btn').attr('class') == 'head-btn cur') {
$('.head .head-btn').removeClass('cur');
$('.head .nav').removeClass('active');
$('.head .nav-bg').removeClass('active');
} else {
$('.head .head-btn').addClass('cur');
$('.head .nav').addClass('active');
$('.head .nav-bg').addClass('active');
}
});
$('.head .nav-bg').click(function() {
$(this).removeClass('active');
$('.head .head-btn').removeClass('cur');
$('.head .nav').removeClass('active');
});
})