导航条PC端-移动端切换

程序员文章站 2024-03-21 11:43:58

...

导航条PC端-移动端切换

移动端样式图：
导航条PC端-移动端切换
PC端样式图：

1.html部分（引入的图片需要替换、记得引入jquery文件）

<div id="nav">
		<div class="bx">
			<ul class="listGroup">
				<li class="active" style="display: none;"><a href="#">首页</a></li>
				<li><a href="#">中心动态</a></li>
				<li><a href="#">研究力量</a></li>
				<li><a href="#">研究方向</a></li>
				<li><a href="#">科研项目</a></li>
				<li><a href="#">研究成果</a></li>
				<li><a href="#">政企服务</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
	<!--这些事mask层-->
	<div class="mask"></div>
	<!--这里是抽层-->
	<div class="draw">
	  <!-- <div class="draw_logo" > <img class="draw_logo_img" src="./../images/day.png"/> </div> -->
	  <div class="draw_box02" > <img class="draw_box02_img" src="./images/zhongxindongtai.png"/>
		<div class="draw_box02_mess">中心动态</div>
	  </div>
	
	<!--这里我故意写成二级列表跟一级列表并列-->
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/yanjiubaogao.png"/>
		  <div class="draw_box02_mess">研究力量</div>
		</div>
		<div class="draw_box02_box">
		  <div class="draw_box02_list">001</div>
		  <div class="draw_box02_list">002</div>
		  <div class="draw_box02_list">003</div>
		  <div class="draw_box02_list">004</div>
		</div>
	  </div>
	
	<!--这里我故意写成二级列表跟一级列表并列-->
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/fangxiangbiao.png"/>
		  <div class="draw_box02_mess">研究方向</div>
		</div>
	  </div>
	
	<!--这里我故意写成二级列表跟一级列表并列-->
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/keyanxiangmu.png"/>
		  <div class="draw_box02_mess">科研项目</div>
		</div>
	  </div>
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/keyanchengguohuojiang.png"/>
		  <div class="draw_box02_mess">研究成果</div>
		</div>
	  </div>
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/zhengqi.png"/>
		  <div class="draw_box02_mess">政企服务</div>
		</div>
	  </div>
	  <div>
		<div class="draw_box02" > <img class="draw_box02_img" src="./images/lianxiwomen.png"/>
		  <div class="draw_box02_mess">联系我们</div>
		</div>
	  </div>
	
	<!--这是主界面-->
	<div class="head_"> <img class="head_more" src="./images/liebiaoshezhi .png" /> </div>
	<div class="body"> </div>
	</div>
		</div>
	</div>	
<script src="./jquery-3.5.1.min.js"></script>

2.css部分

   @charset "UTF-8";
/* CSS Document */
body{
	margin:0;
	padding:0;
}
#nav {
	height: .5rem;
    position: relative;
    /*width: 100%;*/
    padding: 0.2rem 0.4rem;
    font-size: 0.18rem;
    background:url("./images/navBG.png") no-repeat;
    background-size: cover;
}
.listGroup{
    display: block;
}
.draw{
    display: none;
}
#nav .navImg {
    width:1.5rem;
    height: 0.7rem;
    margin-left: 0.4rem;
    cursor: pointer;
    z-index: 999;
}
#nav .listGroup{
    float: right;
    position: relative;
    z-index: 2;
    margin: 0.2rem 1rem 0 0;
}
#nav .listGroup li {
    float: left;
    width: auto;
    margin: 0 0.1rem;
    font-size: 0.16rem;
    padding: 0.05rem 0.1rem;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
    cursor: pointer;
	border-radius: .05rem;
	list-style: none;
}
#nav .listGroup li.active,
#nav .listGroup li:hover {
    background: rgb(0, 188, 212);
}
#nav .listGroup li a {
	color: white;
	text-decoration:none;
}
#nav .nav_line{
    border-radius: 0.05rem;
    background: transparent;
}
/*按钮特效*/
a.hvr-shutter-in-horizontal.clicked:before {
    background: #1e8986;
}
a.hvr-sweep-to-right.clicked {
    background: #246794;
}
a.btn {
    padding: 0.05rem 0.12rem;
    cursor: pointer;
    background:none;
    text-decoration: none;
    font-size: 0.12rem;
    color: #666;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a.hvr-shutter-in-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: #12a6a2;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    color: #fff;
}
a.hvr-shutter-in-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #18bfa2;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
a.hvr-shutter-in-horizontal:hover,a.hvr-shutter-in-horizontal:focus,a.hvr-shutter-in-horizontal:active {
    color: white;
}
a.hvr-shutter-in-horizontal:hover:before,a.hvr-shutter-in-horizontal:focus:before,a.hvr-shutter-in-horizontal:active:before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
a.hvr-sweep-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background:#3598dc;
    color: #fff;
}
a.hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2178B4;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
a.hvr-sweep-to-right:hover,a.hvr-sweep-to-right:focus,a.hvr-sweep-to-right:active {
    color: white;
}
a.hvr-sweep-to-right:hover:before,a.hvr-sweep-to-right:focus:before,a.hvr-sweep-to-right:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);

}
/* 日期选择插件 */
.datetimepicker table.table-condensed tr td span {
    width: 31%;
}
.datetimepicker table tr td span.disabled, .datetimepicker table tr td span.disabled:hover {
    cursor: not-allowed !important;
}
.bx{
    width: 12.214rem;
    margin: 0 auto;
    z-index: 99;
}
html {
    font-size: 140px;
}
#nav .listGroup li.active, #nav .listGroup li:hover {
    background: rgb(0, 188, 212);
}
@media screen and (min-width: 320px)and (max-width: 750px){
    #nav{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
		z-index: 100;
		height: auto;
    }
    .bx{
		width: 100%;
		height: 20px;
    }
    #nav .navImg {
        margin: 0 auto;
        display: block;
    }
    .listGroup{
        display: none;
    }

    .head_{
        position:fixed;
        width:100%;
        height: 60px;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .head_more{
        position:absolute;
        width:30px;
        height:30px;
        top:0;
        bottom:0;
        left:10px;
        margin: auto;
        z-index: 999;
    }
    /*mask*/
    .mask{
        position:fixed;
        width:100%;
        height:100%;
        opacity: 0.5;
        z-index: 101;
		background: rgba(0,0,0,.15);
		margin-top: -20px;
    }
    
    .draw{
        display: block;
        position:fixed;
        width:240px;
        height:100%;
        background: #175CA5;
        z-index: 102;
        left:-240px;
        top:76px;
        color:#ffffff;
        overflow-y: auto;
    }
    
    .draw_logo{
        position:relative;
        width:100%;
        height:60px;
        margin:0;
    }
    .draw_logo_img{
        position:absolute;
        width:240px;
        height:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin: auto;
    }
    .draw_box02{
        position:relative;
        width:240px;
        height:50px;
        background: #11338E;
        margin: 2px 0 ;
    }
    .draw_box02_img{
        position:absolute;
        width:30px;
        height:30px;
        left:20px;
        top:0;
        bottom:0;
        margin: auto;
    }
    .draw_box02_mess{
        position:absolute;
        height:20px;
        top:0;
        bottom:0;
        left:60px;
        font-size: 14px;
        font-weight: 700;
        margin: auto;
    }
    .draw_box02_box{
        position:relative;
        width:100%;
    }
    .draw_box02_list{
        position:relative;
        width:240px;
        height:42px;
        background: #10296D;
        margin: 1px 0 ;
        text-align: center;
        line-height: 42px;
    }
    
    
    .draw_box02_img02{
        position:absolute;
        width:8px;
        height:13px;
        top:0;
        bottom:0;
        right:20px;
        margin: auto;
    }
    .null02{
        position:relative;
        width:100px;
        height:20px;
    }
    .hr{
        position:absolute;
        margin:0;
        padding: 0;
        width:80%;
        height:1px;
        background: #ffffff;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
    }
    .draw_box02_text{
        position:absolute;
        color: #ffffff;
        width:80%;
        height:50px;
        right:0;
        left:0;
        margin: auto;
        font-size: 14px;
        line-height: 50px;
        border-style:none none none none; /*  上 右 下  左 */
        background-color:transparent;
    }
}

3.js部分

$(document).ready(function () {
	//这里我采用了continue的方法；主要是避免第一项为“首页”没有二级列表的问题；
	//当然也可以使用var i = 1 ；来直接选择避免它——；
	function close(e){
        for (var i = 0; i < $(".draw_box02").length; i++) {
        	if(i==0){
        		continue;
			}
            $(".draw_box02").eq(i).next().hide(200);
        }
    };
	//这里在ready中，直接调用函数，并且关闭蒙版层（这里有弊端）——
	$(".mask").hide();
	close();


	//	抽屉打开事件---------------------------------------

	//这里没什么，主要就是运用jq的animate来动画控制开关——以及蒙版层的显示与隐藏
	$(".head_more").click(function () {
        $(".mask").show();
		$(".draw").animate({
			left: "0px"
		}, 200);
	});
	//	抽屉关闭事件
	$(".mask").click(function () {
        $(".mask").hide();
		$(".draw").animate({
			left: "-240px"
		}, 200);
	});

	//二级列表的展示与关闭————
	//对于$(this).index();都很熟悉，但是这里不能用，因为我的html结构的关系，
	//首页选项的索引永远是1；其他的索引永远是0；
	//所以这里只能使用$(".draw_box02").index(this)；（当初也是在这里采坑了）
	//第一个首页直接跳转至相关页面——
	//其他的是展开二级列表页面
    //is(":hidden")方法是用来判定元素是否处于隐藏状态；
    if (screen.width >= 320 && screen.width <= 1269){
        $("#nav").css("width",`${window.screen.width}`)
    }

	$(".draw_box02").click(function () {
    	if($(".draw_box02").index(this) == 0){
            window.location.href = "https://www.baidu.com/";
		}
        if($(this).next().is(":hidden")){
            close();
            $(this).next().toggle(200);
        }else{
            $(this).next().toggle(200);
        }
    });
    
});

文件下载：原生Drawer 抽屉下载

相关标签：导航栏 css html jquery javascript css3

上一篇： AJAX js django

下一篇： jQuery读书分享博客分类： jQuery jquery读书ajaxJavaScript

导航条PC端-移动端切换

导航条PC端-移动端切换

导航条PC端-移动端切换

iphone6等移动端的css自适应博客分类： javascript cssJavaScript

java 考试系统在线学习视频直播人脸识别 springboot框架前后分离 PC和手机端

用原生JS写一个网页版的2048小游戏（兼容移动端）

JS检测移动端横竖屏的代码

移动端适配（简单的js代码搞定）

移动端适配的js代码

移动端报表使用教程-如何添加服务器博客分类：移动端报表添加服务器

移动端报表使用教程-如何添加服务器博客分类：移动端报表添加服务器

移动端屏幕尺寸

导航条PC端-移动端切换

导航条PC端-移动端切换

导航条PC端-移动端切换

iphone6等移动端的css自适应 博客分类： javascript cssJavaScript

java 考试系统 在线学习 视频直播 人脸识别 springboot框架 前后分离 PC和手机端

用原生JS写一个网页版的2048小游戏（兼容移动端）

JS检测移动端横竖屏的代码

移动端适配（简单的js代码搞定）

移动端适配的js代码

移动端报表使用教程-如何添加服务器 博客分类： 移动端报表添加服务器

移动端报表使用教程-如何添加服务器 博客分类： 移动端报表添加服务器

移动端屏幕尺寸

iphone6等移动端的css自适应博客分类： javascript cssJavaScript

java 考试系统在线学习视频直播人脸识别 springboot框架前后分离 PC和手机端

移动端报表使用教程-如何添加服务器博客分类：移动端报表添加服务器

移动端报表使用教程-如何添加服务器博客分类：移动端报表添加服务器