百度搜了一下,基本都是上下收缩二级菜单这些的,但是需求是要整个菜单栏都隐藏收起,只能自己弄了,如果不是要这个功能的就别看了,先上效果图(顺便晒晒我家的荷兰猪~~~)
左侧菜单栏未收起
点击左上的左箭头按钮,左侧菜单收起,有动画效果的,这里只展示结果,具体可以复制代码自己看
效果描述:
1、向左侧慢慢收起,历时500ms,展开也历时500ms
2、左下方有个放视频的地方,鼠标移动到那个区域后才会显示,不需要的自行去掉相关代码即可
3、左边的菜单用的是layui的控件,有需要读者可以自己去看layui的相关文档
4、本文tab切换在另一篇文章,这里主要展示左侧菜单栏隐藏收起代码
代码如下:
1、test-expand-left.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>图纸</title>
<style media="screen">
html,body {height:100%}
</style>
<link rel="stylesheet" href="css/expand-left-style.css"/>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="jq/jquery.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id = "exp