原生实现导航菜单效果
Posted nixindecat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生实现导航菜单效果相关的知识，希望对你有一定的参考价值。
<!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>
代码如上
以上是关于原生实现导航菜单效果的主要内容，如果未能解决你的问题，请参考以下文章