<!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>
代码如上