<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生实现导航菜单栏效果</title>
<style>
* {margin:0px; padding:0px;}
a{
text-decoration: none;
color: black;
}
dd:hover{
background: #38f;
text-decoration: none;
color: #fff;
}
dl {background:#fff;display:none;margin-left: -10px;margin-top: 10px;
width: 70px;font-size: 15px;
border: 1px solid #d1d1d1;z-index: 302;-webkit-box-shadow: 1px 1px 5px #d1d1d1;
transform-origin:50% 0;
-webkit-animation:gary .5s ease-in;
transition: all .3s ;}
dd{
display: block;
text-align: left;
margin: 0!important;
padding: 0 9px;
line-height: 26px;
text-decoration: none;
}
@-webkit-keyframes gary{
0%{transform:scale(1,0);}
25%{transform:scale(1,1.2);}
50%{transform:scale(1,0.85);}
75%{transform:scale(1,1.05);}
100%{transform:scale(1,1);}
}
</style>
</head>
<body>
<div id="d1" style="margin-left: 50px;display: inline-block">选项卡
<dl style="">
<dd><a href="" onclick="tiyan(this)">菜单1</a></dd>
<dd><a href="" onclick="tiyan(this)">菜单2</a></dd>
<dd><a href="" onclick="tiyan(this)">菜单3</a></dd>
<dd><a href="" onclick="tiyan(this)">菜单4</a></dd>
</dl>
</div>
<script src="JS/jquery-3.3.1.js"></script>
<script>
var $d1 = $(‘#d1‘);
$d1.mouseover(function () {
var $dls = $(‘dl‘);
$dls.css("display", "block");
});
$d1.mouseout(function () {
var $dls = $(‘dl‘);
$dls.css("display", "none");
});
function tiyan(obj) {
alert(‘执行了‘+obj.text)
}
</script>
</body>
</html>
代码如上
原文地址：https://www.cnblogs.com/nixindecat/p/11129827.html
时间： 2024-10-29 09:14:40