html实现提示框箭头指向，html实现菜单展开收起

慕云枫

2024-05-10 帮助1人

前言

提示框箭头指向，及实现左侧菜单展开收起

效果图

学新通

实现

这里展开收起操作使用了jquery，引入即可查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.left-box{
				float: left;
				width: 10%;
				height: 90vh;
				border: 1px solid #dcdcdc;
				overflow: hidden;
			}
			
			.left-content1{
				width: 0px;
			    height: 0px;
			    border-right: 0px solid transparent;
			    border-left: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			}
			.left-content2{
			    width: 0px;
			    height: 0px;
			    border-left: 10px solid transparent;
			    border-top: 10px solid #58a9ff;
			    border-right: 10px solid transparent;
			    border-bottom: 0px solid transparent;
			}
			.left-content3{
				width: 0px;
			    height: 0px;
			    border-left: 10px solid transparent;
			    border-bottom: 10px solid #58a9ff;
			    border-right: 10px solid transparent;
			    border-top: 0px solid transparent;
			}
			.left-content4{
				width: 0px;
			    height: 0px;
			    border-left: 0px solid transparent;
			    border-right: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			}
			.left-content5{
			    width: 0px;
			    height: 0px;
			    border-top: 10px solid #58a9ff;
			    border-left: 0px solid transparent;
			    border-right: 10px solid transparent;
			    border-bottom: 10px solid transparent;
			}
			.left-content6{
			    width: 0px;
			    height: 0px;
			    border-top: 10px solid #58a9ff;
			    border-left: 10px solid transparent;
			    border-right: 0px solid transparent;
			    border-bottom: 10px solid transparent;
			}
			.left-content7{
				width: 0px;
			    height: 0px;
			    border-right: 10px solid #58a9ff;
			    border-left: 0px solid transparent;
			    border-bottom: 0px solid transparent;
			    border-top: 10px solid transparent;
			}
			.left-content8{
				width: 0px;
			    height: 0px;
			    border-left: 10px solid #58a9ff;
			    border-right: 0px solid transparent;
			    border-bottom: 0px solid transparent;
			    border-top: 10px solid transparent;
			}
			
			.lay-animation{
				 transition: all .3s;
			    -webkit-transition: all .3s;
			}
			.lay-menu-box {
			    float: left;
			    cursor: pointer;
			    position: relative;
			    top: 43vh;
			}
			.lay-menu-btn {
			    width: 0px;
			    height: 50px;
			    border-right: 0px solid transparent;
			    border-left: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			    background: transparent;
			}
			.lay-menu-box > i {
			    color: white;
			    position: absolute;
			    top: 28px;
			    font-size: 12px;
			}
			.lay-menu-btn2 {
				margin-left: 10px;
			    width: 0px;
			    height: 50px;
			    border-left: 0px solid transparent;
			    border-right: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			    background: transparent;
			}
			.lay-menu-btn3 {
				margin-left: 10px;
			    width: 50px;
			    height: 0px;
			    border-right: 10px solid transparent;
			    border-left: 10px solid transparent;
			    border-bottom: 10px solid #58a9ff;
			    border-top: 10px solid transparent;
			    background: transparent;
			}
			.lay-menu-btn4 {
				margin-left: 10px;
			    width: 50px;
			    height: 0px;
			    border-right: 10px solid transparent;
			    border-left: 10px solid transparent;
			    border-top: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    background: transparent;
			}
		</style>
	</head>
	<body>
		<div class="left-box lay-animation">
			<div class="left-content1"></div>
			<div class="left-content2"></div>
			<div class="left-content3"></div>
			<div class="left-content4"></div>
			<div class="left-content5"></div>
			<div class="left-content6"></div>
			<div class="left-content7"></div>
			<div class="left-content8"></div>
		</div>
		<div class="lay-menu-box lay-animation" lay-id="1" title="收起组织">
            <div class="lay-menu-btn"></div>
            <!--将此处改成所需图标即可-->
            <i class="layui-icon"><</i>
        </div>
        <div class="lay-menu-box lay-animation" lay-id="2" title="收起组织">
            <div class="lay-menu-btn2"></div>
            <!--将此处改成所需图标即可-->
            <i class="layui-icon">></i>
        </div>
        <div class="lay-menu-box lay-animation" lay-id="2" title="收起组织">
            <div class="lay-menu-btn3"></div>
            <!--将此处改成所需图标即可-->
            <i class="layui-icon">></i>
        </div>
        <div class="lay-menu-box lay-animation" lay-id="2" title="收起组织">
            <div class="lay-menu-btn4"></div>
            <!--将此处改成所需图标即可-->
            <i class="layui-icon">></i>
        </div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	<script>
		
		$(".lay-menu-box").click(function(){
			var layId = $(this).attr("lay-id");
			if(layId == 1){
				$(this).attr("lay-id", 2);
				$(this).find("i").text(">");
				$(".left-box").css("width", "0%");
			}else{
				$(this).attr("lay-id", 1);
				$(this).find("i").text("<");
				$(".left-box").css("width", "10%");
			}
		})
		
	</script>
</html>

这篇好文章是转载于：学新通技术网

html实现提示框箭头指向，html实现菜单展开收起

前言

效果图

实现

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开