Awesome Menu
MyApp
Asmat Qatea
1.0
False
720
540
False
False
False
False
WebApp
False
.neopage,.neobody{
overflow:hidden!important;
}
.navigation .list .icon{
border-radius:50%;
width:55px;
height:55px;
color:black;
z-index:2;
transition:0.5s;
transition-delay:0s;
}
.navigation .list.active .icon{
background:var(--clr);
color:white;
transform:translateY(-27px);
z-index:2;
transition-delay:0.25s;
}
.navigation div:nth-child(1).active ~ .indicator{
transform:translateX(0px);
}
.navigation div:nth-child(2).active ~ .indicator{
transform:translateX(calc( 70px * 1 ));
}
.navigation div:nth-child(3).active ~ .indicator{
transform:translateX(calc( 70px * 2 ));
}
.navigation div:nth-child(4).active ~ .indicator{
transform:translateX(calc( 70px * 3 ));
}
.navigation div:nth-child(5).active ~ .indicator{
transform:translateX(calc( 70px * 4 ));
}
.navigation .list .icon::before{
content:'';
position:absolute;
top:10px;
left:0px;
width:100%;
height:100%;
background:var(--clr);
z-index:-1;
border-radius:50%;
filter:blur(5px);
opacity:0;
transition:0.5s;
transition-delay:0s;
}
.navigation .active .icon::before{
opacity:0.5;
transition-delay:0.25s;
}
.indicator{
position:absolute;
border-radius:50%;
top:-35px;
left:25px ;
z-index:1;
width:70px;
height:70px;
background:white;
transition:0.5s;
}
.indicator::before{
content: '';
position: absolute;
width: 30px;
height: 30px;
background:transparent;
left: -28px;
top:5px;
border-radius:50%;
box-shadow:15px 18px #fff;
}
.indicator::after{
content: '';
position: absolute;
width: 30px;
height: 30px;
background:transparent;
right: -28px;
top:5px;
border-radius:50%;
box-shadow:-15px 18px #fff;
}
.flexCenter{
display:flex;
justify-content:center;
align-items:center;
}
en
standalone
Offline page
#000000
/
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
document.querySelectorAll('.list').forEach((item)=>{
item.classList.remove('active');
})
obj.classList.add('active');
$('#homePage').css('background',$(obj).attr('style').replace('--clr:',''))
//alert($(obj).attr('style').replace('--clr:',''));
obj|STRING|
JavaScript
.hide all the ocntent with a fade-out effect
Loop 1 5 [n]
HideObject "ContainerPage[n]Content" "fadeOut" 12
EndLoop
.show the desired content with a fade-in effect
ShowObject "ContainerPage[pageNumber]Content" "fadeIn" 15
[pageNumber]|INTEGER|Page number to show
0px
0px
640px
480px
False
custom