lixin-web
Version:
vue and bootstrap
103 lines (99 loc) • 4.63 kB
HTML
<nav class="navbar" id='main-nav' >
<div class="nav-min">
<div class='row' id="liixnnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="liixn-logo">
<a class="" href="index.html"><img src="img/lixinnew/logo1.png" alt="" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<style>
.liixn_nav .nav-online a{color:#ff9262}
.liixn_nav .nav-online a:hover{color:#ff9262;;background:none}
.nav-min{max-width:1170px;margin:0 auto}
.liixn-logo{float:left;padding-top: 8px;}
.liixn_nav{float: right;width:800px;}
.liixn_nav li{}
.liixn_nav li a{display:inline-block;float:left;line-height:70px;padding:0 10px; color: #777;transition:all 1s ease;font-size:14px;}
.liixn_nav li.active a{border-bottom: 2px solid #00c4ff;}
.liixn_nav li a:hover{background: #F9F9F9;color: #636363;}
.mobliem{display:none}
@media screen and (max-width:1000px){
.liixn_nav{display:none; margin-top: 8px;}
.liixn_nav ul{}
#liixnnav{position:relative;margin: 0;}
.mobliem:after,.mobliem:before{content:"";width:30px;height:3px;background:#08B1E4;position:absolute;top: 14px;right: 9px;transition:0.5s all ease}
.mobliem:before{top:30px;}
.mobliem{display:block;width:50px;height:50px;background:#F1F1F1;cursor:pointer;position:absolute;right:0px;top:0px;}
.liixn_nav li a{display:block;width:100%;padding-left: 20px;}
.nav-online{display:none}
.liixn_nav{width:100%;}
.liixn_nav li.active a{ border-bottom: 2px solid #00c4ff;background:#F1F1F1}
.mobliem.activetm:after{-webkit-transform: translateY(8px) translateX(0) rotate(135deg);
-ms-transform: translateY(8px) translateX(0) rotate(135deg);
transform: translateY(8px) translateX(0) rotate(135deg);}
.mobliem.activetm:before{-webkit-transform: translateY(-8px) translateX(0) rotate(225deg);
-ms-transform: translateY(-8px) translateX(0) rotate(225deg);
transform: translateY(-8px) translateX(0) rotate(225deg);}.liixn_nav li a{line-height:50px}
}
@media screen and (max-width:768px){
.liixn-logo img{width: 66%;margin-left: 17px;margin-top: -4px;}
}
@media screen and (min-width:768px) and (max-width:1000px){
.mobliem{height:62px;}
.mobliem:after{top: 20px;}
.mobliem:before{top: 40px;}
.mobliem:after,.mobliem:before{right:6px;}
.mobliem.activetm:after{-webkit-transform: translateY(8px) translateX(0) rotate(135deg);
-ms-transform: translateY(8px) translateX(0) rotate(135deg);
transform: translateY(8px) translateX(0) rotate(135deg);}
.mobliem.activetm:before{-webkit-transform: translateY(-8px) translateX(0) rotate(225deg);
-ms-transform: translateY(-8px) translateX(0) rotate(225deg);
transform: translateY(-8px) translateX(0) rotate(225deg);}
}
</style>
<div class="liixn_nav">
<ul class="lxnav">
<li><a href="/index.html">利信首页</a></li>
<li class="in_cpyx"><a href="/lottery.html#type=ssc&name=cqssc">彩票游戏</a></li>
<li><a href="/game-live.html">真人娱乐</a></li>
<li><a href="/game-recreation.html">电子游艺</a></li>
<li><a href="/game-athletic.html">体育竞技</a></li>
<!-- <li><a href="/game-aboutus.html">关于我们</a></li> -->
<li class="in_cpyx"><a href="/game-activity.html">优惠活动</a></li>
<!-- <li><a href="/game-question.html">帮助中心</a></li> -->
<li class="in_cpyx"><a href="/game-vipclub.html">vip俱乐部</a></li>
<li class="in_cpyx"><a href="/manager.html#mode=personalCenter&page=myCenter">管理中心</a></li>
<li><a href="/game-download.html">手机端下载</a></li>
<li class="nav-online"><a href="javascript:void(0)" data-command="kefu"><span class="glyphicon glyphicon-headphones"></span>在线客服</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="mobliem"></div>
</div><!-- /.container-fluid -->
</div>
</nav>
<script type="text/javascript">
$('.menu01').next()
$('.lxnav li a').each(function() {
if ($(this)[0].pathname === window.location.pathname) {
$(this).parent().addClass('active');
}
});
$(".mobliem").click(function(){
$('.liixn_nav').stop().slideToggle();
$('.mobliem').toggleClass('activetm');
$('.liixn_nav li a').click(function(){
$('.liixn_nav').hide();
$('.mobliem').removeClass('activetm')
})
});
/* $(window).resize(function(){
location.reload()
}); */
$(function(){
if(!AppData.isLogin()){
$('.in_cpyx a').attr('href','javascript:void(0)').click(function(){
Will.warning('您没有登录，请先登录！')
})
}
})
</script>