我试图使一些动画效果,其中一个菜单按钮,当点击分成三个子菜单。我在这方面面临两个问题:
-
子菜单图标重叠菜单图标,然后开始移动。这是因为我一直以这种方式保存JS代码,因为最近,我想要显示子菜单图标的移动。我知道原因但无法修复它。
-
当点击菜单图标时,第三个子菜单的悬停效果会保持,只有当鼠标在稍微移动。这是因为它的初始位置是单击鼠标。我不知道该怎么阻止这事的发生。
<ul class="list-inline">
<li class="text-center admin-menu-item">
<a id="applicationMenuBtn" class="User admin-menu-btn animates">
<i class="app-master-data-icon admin-icon"></i><br />
Application Master Data
</a>
<div class="dashboard-submenu-wrapper animates" id="applicationMenu">
<a href="#/manageApplicationUser" class="dashboard-submenu-item dashboard-submenu-item-one animates">
<i class="users-icon admin-sub-icon"></i><br />
Users
</a>
<a href="#/manageProjects" class="dashboard-submenu-item dashboard-submenu-item-two animates">
<i class="users-icon admin-sub-icon"></i><br />
Create Project
</a>
<a href="#/manageUserMapping" class="dashboard-submenu-item dashboard-submenu-item-three animates">
<i class="users-icon admin-sub-icon"></i><br />
User Mapping
</a>
</div>
</li>
</ul>
<div class="overlay"></div>
JS:
$(document).ready(function(){
$("#applicationMenuBtn").on('click', function(){
var parentLi = $(this).parents('li');
var adminMenu = parentLi.find('>div');
var adminMenuBtn = parentLi.find('>a');
adminMenuBtn.addClass('admin-menu-btn-animate').removeClass('admin-menu-reset');
adminMenu.show().addClass('submenu-visible');
$(".overlay").fadeIn();
adminMenu.find('.dashboard-submenu-item-one').css('transform', 'translate(135%, -100%)');
adminMenu.find('.dashboard-submenu-item-two').css('transform', 'translate(100%, 0)');
adminMenu.find('.dashboard-submenu-item-three').css('transform', 'translate(54%, 100%)');
});
$(".overlay").on('click', function(){
$(".overlay").fadeOut();
$('.submenu-visible').fadeOut(200).removeClass('submenu-visible');
$('.admin-menu-btn').removeClass('admin-menu-btn-animate').addClass('admin-menu-reset');
$('.dashboard-submenu-item-one, .dashboard-submenu-item-two, .dashboard-submenu-item-three').css('transform', 'translate(0, 0)');
});
});
CSS: .overlay {
position: fixed;
display: none;
background-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.admin-menu-item {
width: 150px;
float: left;
height: 100px;
margin: 40px 14px;
position: relative;
}
.admin-menu-item a {
display: inline-block;
text-decoration: none;
font-size: 16px;
color: #E50654;
}
.admin-icon {
background-repeat: no-repeat;
height: 100px;
width: 100px;
display: inline-block;
background-position: 13px 15px;
}
.admin-sub-icon {
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-position: 0;
}
.app-master-data-icon,
.users-icon {
background-image: url("http://www.icosy.com/images/icons/career_icon.png");
}
.admin-menu-item .dashboard-submenu-item i {
width: 50px;
height: 50px;
line-height: 45px;
}
.dashboard-submenu-wrapper {
display: none;
z-index: 2;
}
.dashboard-submenu-item {
display: inline-block;
position: absolute;
top: 33%;
left: 17%;
z-index: 2;
color: #e50654;
transform: translate(0%, 0%);
}
.dashboard-submenu-item:hover {
color: blue;
}
.admin-menu-btn-animate {
transform: scale(0.8) translateX(-20%) translateY(-5%);
-ms-transform: scale(0.8) translateX(-20%) translateY(-5%); /* IE 9 */
-webkit-transform: scale(0.8) translateX(-20%) translateY(-5%); /* Chrome, Safari, Opera */
}
.admin-menu-reset {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: translateX(0);
}
.animates {
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
这里是提琴
将我的评论作为答案,
这里的解决方法可以是在每个过渡事件上调整z-index。
更新小提琴
注意下面的CSS变化
.hoverTweak{ //new class
z-index: 2 !important;
}
.dashboard-submenu-item {
display: inline-block;
position: absolute;
top: 33%;
left: 17%;
z-index: 0; //change
color: #e50654;
transform: translate(0%, 0%);
}
我认为问题出在你采用的方法上。我看到了非常复杂的HTML和CSS,然后是JS。简化它可以解决这个问题。
我不擅长CSS动画,所以我没有达到与你相同的效果,但类似的东西我已经做了没有问题。试试这个,也许你能找到解决办法。
JS Fiddle: http://jsfiddle.net/ashishanexpert/gvqc3yn8/
$(function(){
var $menuContainer = $("#container"),
$defaultMenu = $menuContainer.find(".default"),
$allMenuItems = $menuContainer.find(".nav");
//
function toggleMenu(){
$allMenuItems.toggleClass("active");
}
//
$defaultMenu.on("click", toggleMenu);
});
.container{
position: relative;
}
.nav {
background:#FFF url("http://www.icosy.com/images/icons/career_icon.png") top center no-repeat;
color: #E50654;
cursor: pointer;
font:16px normal "Helvetica Neue",Helvetica,Arial,sans-serif;
width: 150px;
padding: 90px 10px 10px;
position: absolute;
top: 100px;
text-align:center;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.n1:hover, .n2:hover, .n3:hover {
color: blue;
}
.nav.active{
background-color: transparent;
transform: scale(0.8) translateX(-20%) translateY(-5%);
-ms-transform: scale(0.8) translateX(-20%) translateY(-5%); /* IE 9 */
-webkit-transform: scale(0.8) translateX(-20%) translateY(-5%); /* Chrome, Safari, Opera */
}
.n1.active{
top: 0;
left: 80px
}
.n2.active{
left: 140px
}
.n3.active{
top: 220px;
left: 80px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="container">
<div class="nav n1">Users</div>
<div class="nav n2">Create Project</div>
<div class="nav n3">User Mapping</div>
<div class="nav default">Application Master Data</div>
</div>