实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>案例练习</title>
<link rel="icon" type="image/x-icon" href="2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul li {
float: left;
width: 100px;
line-height: 40px;
text-align: center;
font-weight: bold;
}
.box1 {
width: 100%;
height: 70px;
background-color: #f5f5f5;
box-shadow: 1px 1px 10px rgb(240, 0, 80);
line-height: 70px;
position: relative;
top: -65px;
}
.box1 form {
width: 800px;
margin: 0 auto;
position: relative;
}
.box1 input {
width: 700px;
height: 35px;
padding-left: 20px;
border: none;
border-radius: 20px;
}
.box1 i {
position: absolute;
font-size: 20px;
right: 100px;
}
.box1 span {
position: absolute;
display: block;
width: 48px;
height: 48px;
background: url(show.jpg) -64px 168px;
right: 0;
margin-top: 5px;
}
.box2,
.box3,
.box4 {
width: 1000px;
height: 40px;
line-height: 40px;
margin: 50px auto;
background: #f5f5f5;
}
.box2 li:hover a {
color: #f5f5f5;
}
.box4 li {
position: relative;
}
.box4 li i {
margin-left: 10px;
}
.box4 li ul {
box-shadow: 1px 1px 10px rgb(223, 223, 223);
position: absolute;
display: none;
}
.box4 li ul li:hover {
background: #f5f5f5;
}
</style>
</head>
<body>
<div class="box1">
<form class="">
<input type="text" name="" id="" placeholder="# 请输入内容 #">
<i class="layui-icon"></i>
</form>
<span></span>
</div>
<div class="box2">
<ul class="menu">
<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>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a></li>
</ul>
</div>
<div class="box3" style="position: relative;">
<ul class="menu">
<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>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a></li>
</ul>
<div class="box3_bottom" style="position: relative;width: 100px;height:3px;background: #ff6500;top: 37px;left: 100px;"></div>
</div>
<div class="box4">
<ul class="menu">
<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>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他</a><i class="layui-icon layui-icon-up"></i>
<ul style="">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
$(".box1").hover(function () {
// over
$(this).stop().animate({
"top": 0
}, 500);
}, function () {
// out
$(this).stop().animate({
"top": "-65px"
}, 500);
});
$(".box1 input").focus(function (e) {
// e.preventDefault();
$(this).css("box-shadow", "0px 0px 10px rgba(240, 0, 80, 0.555) inset");
});
$(".box1 input").blur(function (e) {
e.preventDefault();
$(this).css("box-shadow", "none");
});
$(".box2 li").hover(function () {
// over
$(this).css({
"background": "#ff6500"
});
}, function () {
// out
$(this).css({
"background": "none"
});
});
$(".box3 li").hover(function () {
// over
let index = parseInt($(".box3 li").index($(this))) * 100;
console.log(index);
$(".box3>.box3_bottom").stop().animate({
"left": index + "px"
}, 500);
}, function () {
// out
$(".box3>.box3_bottom").stop().animate({
"left": "0px"
}, 500);
});
$(".box4 li").hover(function () {
// over
$(this).find('i').attr('class', "layui-icon layui-icon-down")
$(this).find('ul').slideDown(300)
}, function () {
// out
$(this).find('i').attr('class', "layui-icon layui-icon-up")
$(this).find('ul').slideUp()
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
