html:
<div class="mobile_nav_menu"><i class="iconfont icon-caidan"></i></div> <div class="mobile_nav_content"> <div class="close_btn"><i class="iconfont icon-guanbi"></i></div> <div class="item"> <a href="#" class="link">HOME</a> <i class="iconfont icon-jinrujiantou"></i> </div> <div class="item"> <a href="#" class="link">PRODUCTS</a> <i class="iconfont icon-jinrujiantou"></i> </div> <div class="item"> <a href="#" class="link">MARKETPLACE</a> <i class="iconfont icon-jinrujiantou"></i> </div> <div class="item"> <a href="#" class="link">OUR SYSTEM</a> <i class="iconfont icon-jinrujiantou"></i> </div> <div class="item"> <a href="#" class="link">CONTACT</a> <i class="iconfont icon-jinrujiantou"></i> </div> </div>
css:
.mobile_nav_menu{
position: absolute;
top: 20px;
right: 15px;
z-index:22;
}
.mobile_nav_menu .iconfont{
color: #fff;
font-size: 30px;
}
.mobile_nav_content{
width: 60vw;
right: -60vw;
position: fixed;
top: 0;
background-color:#fff;
height: 100vh;
z-index: 333;
padding:60px 30px 30px 30px;
}
.mobile_nav_content .close_btn{
position: absolute;
right: 0;
top: 0;
right: 20px;
top: 20px;
}
.mobile_nav_content .close_btn .iconfont{
font-size: 14px;
}
.mobile_nav_content .item{
font-size: 15px;
margin:30px 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.mobile_nav_content .item .iconfont{
font-size: 18px;
}jq:
$(".mobile_nav_menu").click(function(){
$(".mobile_nav_content").animate({right: '0'},500);
});
$(".close_btn").click(function(){
$(".mobile_nav_content").animate({right: '-60vw'},500);
});效果：
带二级导航菜单：
<div class="mobile_nav_menu"><i class="iconfont icon-daohang"></i></div>
<div class="mobile_nav_content">
<div class="close_btn"><i class="iconfont icon-guanbi"></i></div>
<div class="mobile_nav_box">
<div class="item">
<div class="title_box">
<a class="title" href="/">Home</a>
<a href="/"><i class="iconfont icon-jinrujiantou"></i></a>
</div>
</div>
<div class="item">
<div class="title_box">
<a class="title" href="{:url('index/index/submission')}">Submission</a>
<a href="{:url('index/index/submission')}"><i class="iconfont icon-jinrujiantou"></i></a>
</div>
</div>
<div class="item">
<div class="title_box">
<a class="title" href="{:url('index/index/program')}">Program</a>
<i class="iconfont icon-jinrujiantou"></i>
</div>
<div class="sub_content">
<a href="#" class="sub_link">Symposium program</a>
<a href="#" class="sub_link">Speakers</a>
<a href="#" class="sub_link">Social program</a>
</div>
</div>
<div class="item">
<div class="title_box">
<a class="title" href="{:url('index/index/organizers')}">Organizers</a>
<a href="{:url('index/index/organizers')}"><i class="iconfont icon-jinrujiantou"></i></a>
</div>
</div>
<div class="item">
<div class="title_box">
<a class="title" href="{:url('index/index/travel_info')}">Practical information</a>
<i class="iconfont icon-jinrujiantou"></i>
</div>
<div class="sub_content">
<a href="{:url('index/index/travel_info')}#travel_info" class="sub_link">How to travel to Qingdao</a>
<a href="{:url('index/index/travel_info')}#travel_info" class="sub_link">How to reach the Symposium
venue</a>
<a href="{:url('index/index/travel_info')}#accommodation" class="sub_link">Accommodation</a>
<a href="{:url('index/index/travel_info')}#travel_info" class="sub_link">How to use Wechat and Alipay</a>
<a href="https://www.travelchinacheaper.com/how-to-buy-china-train-tickets-online" class="sub_link">How to
buy
China train tickets online in 2024</a>
<a href="{:url('index/index/travel_info')}#visa" class="sub_link">Visa Exemption Policy for Citizens of
12 Countries</a>
</div>
</div>
</div>
<div class="btn_box">
<a href="{:url('index/user/login')}" class="btn1">Sign in</a>
<a href="{:url('index/user/register')}" class="btn2">Register</a>
</div>
</div>
//手机端
var screenWidth = $(window).width();
if (screenWidth > 480) {
v = '-60vw'
} else {
v = '-80vw'
}
$(".mobile_nav_menu").click(function () {
$(".mobile_nav_content").animate({ right: '0' }, 500);
});
$(".close_btn").click(function () {
$(".mobile_nav_content").animate({ right: v }, 500);
});
$(".mobile_nav_content .iconfont").click(function () {
if ($(this).parent().parent().children('.sub_content').length > 0) {
if ($(this).hasClass('icon-jinrujiantou')) {
$(this).parent().parent().children('.sub_content').slideDown();
$(this).addClass('icon-jinrujiantou-copy-copy')
$(this).removeClass('icon-jinrujiantou')
} else {
$(this).parent().parent().children('.sub_content').slideUp();
$(this).addClass('icon-jinrujiantou')
$(this).removeClass('icon-jinrujiantou-copy-copy')
}
}
});
.mobile_nav_menu{
position: absolute;
top:32px;
right: 15px;
z-index:22;
display: none;
}
.mobile_nav_menu .iconfont{
font-size: 30px;
}
.mobile_nav_content{
width: 60vw;
right: -60vw;
position: fixed;
top: 0;
background-color:#fff;
height: 100vh;
z-index: 333;
padding:60px 30px 30px 30px;
display: none;
box-shadow: 1px 1px 4px #aaa;
}
.mobile_nav_content .close_btn{
position: absolute;
right: 0;
top: 0;
right: 20px;
top: 20px;
}
.mobile_nav_content .close_btn .iconfont{
font-size: 14px;
}
.mobile_nav_content .item{
font-size: 15px;
margin:30px 0;
width: 100%;
}
.mobile_nav_content .item .iconfont{
font-size: 18px;
}
.mobile_nav_content .title_box{
display:flex;
justify-content: space-between;
width: 100%;
}
.mobile_nav_content .title_box .title{
font-family:'Poppins-Medium';
}
.mobile_nav_content .sub_content{
display: none;
}
.mobile_nav_content .sub_content .sub_link{
display: block;
margin: 10px ;
color: #666;
}
