css3+jQuery制作导航菜单（带动画效果）
生活随笔
收集整理的這篇文章主要介紹了
css3+jQuery制作导航菜单（带动画效果）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css3+jQuery制作導航菜單（帶動畫效果）</title><style>body{margin: 0;padding: 0;}.m-menu{margin: 0;padding: 10px; width: 100%; height: 100px;}.m-menu-item{display: inline-block; position: relative; margin: 0 -5px 0 0; width: 200px;height: 100px;background-color: #dddddd;list-style-type: none;}.m-menu-item:hover{background-color: #999999;}.m-menu-item-text{display: inline-block; width: 100%; line-height: 100px;text-align: center;cursor: pointer;}.m-menu-empty{height: 50px;background-color: transparent;}.m-menu-item-detail{opacity: 0; position: absolute; top: 120px;width: 200px;height: 200px;background-color: rgba(102,102,102,0.5);box-shadow: 0 0 10px #3366cc;transform: scale(0, 0);z-index: 999;}.m-menu-item-detail-inner{padding: 5px;}.m-menu-item-detail-show {animation:detail 0.5s linear;animation-fill-mode: forwards;}@keyframes detail{0% {transform: scale(0.5, 0.5);opacity: 0.5;}50% {transform: scale(0.9, 0.9);opacity: 0.9;}100% {transform: scale(1, 1);opacity: 1;}} </style><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head><body><ul class="m-menu" id="m-menu"><li class="m-menu-item js-menu-item"><span class="m-menu-item-text">菜單1</span><div class="m-menu-empty"></div><div class="m-menu-item-detail js-detail"><div class="m-menu-item-detail-inner">菜單1的詳細信息</div></div></li><li class="m-menu-item js-menu-item"><span class="m-menu-item-text">菜單2</span><div class="m-menu-empty"></div><div class="m-menu-item-detail js-detail"><div class="m-menu-item-detail-inner">菜單2的詳細信息</div></div> </li></ul><script>$(function () {var myAction = {};var dom = {menu: $('#m-menu'),menuItem: $('.js-menu-item'),detail: $('.js-detail')};$.extend(myAction, {openMenu: function (that) {var detail = that.find('.js-detail');if (!detail.hasClass('m-menu-item-detail-show')) {detail.addClass('m-menu-item-detail-show');}},closeMenu: function () {//$('.js-detail').hide();$('.js-detail').removeClass('m-menu-item-detail-show');},initEvent: function () {dom.menu.on('mouseenter', '.js-menu-item', function () {var that = $(this);myAction.openMenu(that);});dom.menu.on('mouseleave', '.js-menu-item', function () {var that = $(this);myAction.closeMenu(that);}); }});var init = function () {myAction.initEvent();}();})</script>
</body></html>
?
轉載于:https://www.cnblogs.com/xutongbao/p/9924800.html
總結
以上是生活随笔為你收集整理的css3+jQuery制作导航菜单（带动画效果）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jq点击按钮打开和关闭弹出层，点击除了当
- 下一篇： springboot情操陶冶-web配置