1.hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.list {
width: 200px;
margin: 0 auto;
}
.list h3 {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
display: block;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.list ul {
display: none;
margin-left: 25px;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.list:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="list">
<h3>导航一</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航二</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航三</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航四</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
</body>
</html>
2.target
- 目标伪类选择器:target
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.list {
width: 200px;
margin: 0 auto;
list-style: none;
}
.list li a {
color: #000;
height: 40px;
line-height: 40px;
display: block;
font-weight: bold;
margin-bottom: 5px;
text-decoration: none;
}
.list li ul{
line-height: 30px;
display: none;
overflow: hidden;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.list li:target ul{
display: block;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<ul class="list">
<li id="one"><a href="#one">导航一</a>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</li>
<li id="two"><a href="#two">导航二</a>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</li>
<li id="three"><a href="#three">导航三</a>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</li>
<li id="four"><a href="#four">导航四</a>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</li>
</ul>
</body>
</html>
3.checked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list {
width: 200px;
margin: 0 auto;
}
label {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
display: block;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
input {
display: none;
}
.list ul {
display: none;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#list1:checked + ul {
display: block;
}
#list2:checked + ul {
display: block;
}
#list3:checked + ul {
display: block;
}
#list4:checked + ul {
display: block;
}
</style>
</head>
<body>
<!-- 点击label选中对应的ul -->
<div class="list">
<label for="list1">导航一</label>
<input type="radio" name="list" id="list1" checked="checked">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<label for="list2">导航二</label>
<input type="radio" name="list" id="list2">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<label for="list3">导航三</label>
<input type="radio" name="list" id="list3">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<label for="list4">导航四</label>
<input type="radio" name="list" id="list4">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
</body>
</html>
4.JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.list {
width: 200px;
margin: 0 auto;
}
.list h3 {
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: bold;
display: block;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.list ul {
height: 0;
overflow: hidden;
margin-left: 25px;
}
</style>
</head>
<body>
<div class="list">
<h3>导航一</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航二</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航三</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div class="list">
<h3>导航四</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<script src="Move.js"></script>
<script>
var divs = document.querySelectorAll('.list');
var uls = document.querySelectorAll('ul');
var length = uls.length;
for(var i = 0; i < length; i++) {
divs[i].index = i;
divs[i].onmouseover = function() {
for(var j = 0; j < length; j++) {
Move(uls[j], {'height': 0}, 30);
}
Move(uls[this.index], {'height': 85}, 30);
}
divs[i].onmouseout = function() {
for(var j = 0; j < length; j++) {
Move(uls[j], {'height': 0}, 30);
}
}
}
</script>
</body>
</html>
function getStyle(obj, attr) {
if(obj.currentStyle) { //IE
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj, false)[attr];
}
}
function Move(obj, json, second, fn) {
clearInterval(obj.time);
obj.time = setInterval(function() {
var flag = true; // flag记录是否执行完成
for(var key in json) {
// 1.取当前的值
var temp = 0;
temp = parseFloat(getStyle(obj, key));
//2.计算速度
var speed = (json[key] - temp) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 3. 监测停止
if(temp != json[key]) {
flag = false; //flag 为 false 说明同时执行的属性没有执行完
obj.style[key] = temp + speed + "px";
}
}
//判断同时执行的属性,是否都执行完,若是则停止定时器
if(flag == true) {
clearInterval(obj.time);
if(fn) {
fn();
}
}
}, second);
}
