responsive navigation getting jumpy with display flex - javascript

so, I tried to remaster my previous projects and change it into flex. and it getting messed up because of ul element is block and I changed it using JavaScript into a display flex.
this is the fiddle
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$(menu).css("display", "flex");
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
/*default*/
#media screen and (max-width: 768px) {
header{
height:50px;
justify-content:flex-start;
}
nav {
z-index:2;
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:50px;
border-bottom: 0;
}
nav a#pull{
line-height:50px;}
nav ul.clearfix {
width:100%;
display: none;
height: auto;
background:#ccc;
position:relative;
flex-direction:column;
z-index:2;
}
ul.clearfix a{
border-bottom:1px dotted black;
font-size:14px;
width:100%;
position:relative;
height:50px;
text-align:center;
z-index:2;
}
ul.clearfix a:first-child{
border-top:1px dotted black;
margin-top:50px;
}
nav a#pull {
display: flex;
position: absolute;
align-items:flex-start;
justify-content:flex-start;
padding-left:10px;
right:10px;
top:5px;
}
nav a#pull:after {
background:#ccc;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height:50px;
right:15px;
top:0px;}
div#burger{
width:20px;
height:20px;
position: absolute;
right:0px;
top:0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index:4;}
div#burger span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: red;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}
#burger.open span:nth-child(1){
top: 7px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#burger.open span:nth-child(2){
opacity: 0;
left: -30px;
}
#burger.open span:nth-child(3){
top: 7px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
}
/*default Portrait*/
#media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
width:30%;
}
}
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div#logo{
width:20%;}
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
header{
width:100%;
height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}
/*default Landscape*/
#media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
width:20%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sameThisHeight">
<div id="logo" class="logo">
<img src="assets/Logo.png">
</div>
<nav class="clearfix">
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
<a href="#" id="pull">
<div id="burger">
<span></span>
<span></span>
<span></span>
</div>
</a>
</nav>
</header>
The thing is,
when i tried to clicked the burger at the first time it's back and forth like it has something wrong with it.
and the second time i opened the burger, it collapse the nav and it did good, no no it's not good actually it's not good at all.
Somehow the sequence has changed the "x" button for the opening the nav and the "burger icon" to close the nav. It definetly not ok.
I don't know for what i did so wrong about it, the right thing should be in place is the opposite of what i did the "x" button for close the nav and the "burger icon" to open up the nav.
My thought was because I inserted this in my JavaScript
$(menu).css("display", "flex");
Because, before i adding this into my javascript it did good performance but not good enough to match with the design. the last project i did fine because of not using flex and go stright with UL LI tags. is there anyway to solve this problem, and keep using flex for it? please help.


This lines causes the issue on first time clicking. You should put the display: flex after the slideToggle();, I should point out that it will not be a smooth transition as the slideToggle(); puts the display: block;. You should maybe do a css solution or maybe make a container around the <ul>...</ul>.
if ($('#burger').hasClass("open")) {
//here you set it to be display
$(menu).css("display", "flex");
$("section").css("z-index", 1);
//here you toggle display, which will be flex, so you hide it
menu.slideToggle();
}
change to (fiddle, I changed your styling a bit for demo, you are free to use your own)
$(function() {
var pull = $('#pull');
menu = $('nav ul.clearfix');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
$('#burger').toggleClass('open');
if ($('#burger').hasClass("open")) {
$("section").css("z-index", 1);
menu.slideToggle();
} else {
menu.slideToggle('slow', function() {
$("section").css("z-index", 4);
});
}
});
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Your html/css has some issues and should be re-worked.
The <ul> has to contain <li>
<ul class="clearfix">
<a id="currentPage" href="index.php">HOME</a>
REGISTRATION
TUTORIAL
CONTACT US
</ul>
should be
<ul class="clearfix">
<li><a id="currentPage" href="index.php">HOME</a></li>
<li>REGISTRATION</li>
<li>TUTORIAL</li>
<li>CONTACT US</li>
</ul>
Also why do you use the class clearfix when you are not using float? I never target a clearfix class for styling as you do in this case, rather give it a class of navigation or something.

Related

Select Dropdown Material Design only CSS/JS

I have been working to create some input fields with Material Design Looking.
Sadly, I could not use the usual frameworks available on the internet (e.g. Materialize), so I need to develop it my own, I have almost everything created. Although, the select field dropdown with no results, I could not make it.
The goal is to look like the Simple Select with arrow of this git here
For now what I did is this on codepen
Do you know any source or example rather than the getmdl-select only with CSS(scss) and JS
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
$md-color-blue:#1074ac;
$md-color-black: rgba(0, 0, 0, 0.54);
/* ---- text field ----- */
.md-group{
position:relative;
margin: 35px 0;
// margin-bottom:45px;
.md-input__text{
background: transparent;
font-size:14px;
padding:5px 5px 2px 5px;
// display:block;
width:50%;
border:none;
border-bottom:1px solid #757575;
vertical-align: bottom;
}
.md-input__text:focus {
outline:none;
}
option:active,
option:hover, option:focus, {
background: rgba(0,0,0,.04);
}
}
/* LABEL */
.md-input__label {
color:rgba(0,0,0,.54);
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:-20px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.md-input__text:focus ~ label, .md-input__text:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS */
.md-input__bar {
position:relative;
display:block;
width:50%;
background-color: rgba(0,0,0,.42);
}
.md-input__bar:before, .md-input__bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:$md-color-blue;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.md-input__bar:before {
left:50%;
}
.md-input__bar:after {
right:50%;
}
/* active state */
.md-input__text:focus ~ .md-input__bar:before, .md-input__text:focus ~ .md-input__bar:after {
width:50%;
}
/* HIGHLIGHTER */
.md-input__highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.md-input__text:focus ~ .md-input__highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS */
#-webkit-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
.md-btn__right{
position: absolute;
top: 1px;
right: 1px;
}
.md-autocomplete-clear{
display: none;
}
.md-input__text:focus ~ .md-autocomplete-clear {
display: block;
}
<div class="md-group">
<select class="md-input__text" required>
<option>Yes</option>
<option>No</option>
</select>
<span class="md-input__highlight"></span>
<span class="md-input__bar"></span>
<label class="md-input__label">Select</label>
</div>

Why must I click twice to open and close my menu

Hello I got a situation which I do not understand quite well. I have the following setup:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
Why should I press two times on the open / close button to open / close the menu?
Anyone any idea / fix?

The problem is that you checking for .act on the button instead of the menu. There are two buttons so you need to toggle twice.
Changing:
$(this).toggleClass('act');
if($(this).hasClass('act')) {
to
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
fixes it:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

May I offer a solution where you have a single button controlling the display of the menu instead of two buttons?
Main changes were to increase the z-index of .mobile-menu-button so it's always on top of your menu and to check in the text value of the button and decide whether to open or close it. You could also check if the menu has .act on it instead of checking the text of the button; tomayto, tomahto.
$( document ).ready( function () {
var $mobileMenu = $( '.mobileMenu' );
$('.menuBtn').on( 'click touch', function () {
var $this = $( this ),
isOpen = 'Close' === $this.text();
$this.text( isOpen ? 'Open' : 'Close' );
$mobileMenu.toggleClass( 'act', !isOpen );
} );
} );
.mobile-menu-button {
display: block;
position: fixed;
top: 20px;
left: 20px;
z-index: 105;
background-color: #19b698;
padding: 5px 10px;
color: #fff;
font-family: Open Sans;
font-weight: bold;
cursor: pointer;
}
.mobile-menu-button i {
font-size: 26px;
background-color: #00adee;
padding: 5px 10px;
color: #fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow: hidden;
}
.mobileMenu img {
max-width: 90%;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px dotted #717274;
padding-bottom: 20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block !important;
}
.mobileMenu ul {
display: block;
list-style: none;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
I also added list-style: none; to .mobileMenu ul as I noticed some bullet points. I'm assuming you didn't want those.
Why Two Clicks?
As far as why you had to click twice, you were using toggleClass() on two different buttons to open/close the menu. The first button (Open) would get .act added and the menu would show. Now we're seeing the second button (Close) which doesn't have .act yet, so you click it and toggleClass() adds .act to it (instead of removing .act from the first button (Open) like you might have been expecting). Since a button needs .act on it to hide the menu, you now need to click the second button (Close) a second time to for toggelClass() to remove .act and hide the menu. Now the first button (Open) is shown, which still has .act. But clicking it removes .act, thus necessitating one more click to add .act back to the button and now the menu can be show because the button has .act.
It's more simple to use a single button.

You should use below jQuery code instead of using yours::
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if(!$('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
Working URL:: https://jsfiddle.net/Lxz9v34L/2/

You have 2 .menuBtn.
You could simplify your code to something like this:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
$(this).text($(this).text() === 'Open' ? 'Close' : 'Open')
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:101;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
cursor: pointer;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

$(this).toggleClass('act');
to
$('.menuBtn').toggleClass('act');
because this will return the only span which is clicked not other. Hence it is not going toggle class on both div.
please find working snippet below
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.menuBtn').toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

In fact, there are two buttons (1 for open, 1 for close).
The 1 first click on "open" works, but then, it doesn't because the close button does not have the act class.
I think you should toggle class on both :
$('.menuBtn').on('click touch', function () {
**$('.menuBtn')**.toggleClass('act');
...
}

jQuery Content slider blocks responsive menu drawer

The content slider blocks the menu items of my responsive site
I have used the following css to accomplish this
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;
border:1px solid #CCC;
background-color:#FFF;
}
#slider, #slider .sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
border-radius:0px;
}
#slider {
background-color:white;
float:left;
position:relative;
transform: translate3d(0,0,0);
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px;
bottom:10px;
overflow:hidden;
font:bold 13px/16px Arial;
color:#069;
text-align:center;
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
border-radius: 5px;
}
#slider .mc-caption a {
color:#060;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
display:none;
}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
/* -- thumbnails -- */
#thumbs
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
cursor:pointer;
}
#thumbs .thumb-on
{
background:#FFF;
}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}
#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}
/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}
And the following html for the slider
<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
<div id="slider">
<img src="img/3.jpg" alt="Caption for slide 1" />
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
<img src="slide-3.jpg" alt="Header File" />
<img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
<img src="img/3.jpg" alt="Caption for slide 4"/>
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
</div>
</div>
here is the html for the menu drawer
<header role="banner">
<div id="cd-logo"><img src="img/cd-logo.svg" alt="logo" onClick="#"></div>
<nav class="main-nav">
<ul><!-- insert more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>
and its corresponding CSS
/* --------------------------------
Main components
-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index:inherit;
}
}
.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
#media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}
Can Anyone help me???

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:
.header {
...
z-index: 10;
}
For more information on stacking context there is an excellent article on mdn.

Using % as height for grid system

Guys im having big problems with a site i created i can't get heights in % to make everything equal. Instead i used px and i feel like it is inadequate. I tried changing all the items to % but the div collapse to the containing elements and don't actually use the % of space given. I have sectioned my page into 2 part with a couple of rows in each and i can't set the row height in % only in px it works. any ideas? i will upload the parts of the script here and the rest of Jfiddle.
HTML:
<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
<!-- end primary div.container --></div>
<!-- end primary div.table-block -->
<div class="table-block cont">
<div class="container">
<footer class="twelve columns" id="footer">
<div class="four columns steps">
<div class="active-cases"><a>Active Cases</a></div>
<div class="newcomments"><a>New Comments</a></div>
<div class="active-open-cases"><a>Active Open Cases</a></div>
<div class="newcomments2"><a>New Comments</a></div>
<div class="stats">
<div class="guages">
<div class="c100 p12 small dark orange"><span>90</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark green"><span>20</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark"><span>12%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="four columns jonarand">
<div class="box1">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20jonar%20logo.png">
<figcaption>Jonar & You</figcaption>
</figure>
</div>
<div class="box2">
<figure><img src="http://www.npnrmanagement.com/Portal/img/person%20(1).png">
<figcaption>Customer & You</figcaption>
</figure>
</div>
<div class="box3">
<figure><img src="http://www.npnrmanagement.com/Portal/img/Community%20Icon%20(1).png">
<figcaption>Paragon Community</figcaption>
</figure>
</div>
<div class="box4">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20Paragon%20Logo.png">
<figcaption>Paragon Software</figcaption>
</figure>
</div>
</div>
<div class="four columns menuitem">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</footer>
</div>
<!-- end footer div.container -->
<!-- end footer div.table-block --></div>
</div>
the part of the css that pertains to this problem:
html, body {
height: 100%
}
.table-container {
display: table;
height: 100%;
width: 100%;
}
.table-block {
display: table-row;
height: 1px;
}
.footer-push {
height: 50%;
}
#footer {
/* Placeholder footer styles */
}
.cont { height: 50%;}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 100%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 100%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 33.33333333333333%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Paragon Partner Portal Styles
-------------------------------------------------- */
.bbar {
opacity:.81;
font-family:'Roboto',sans-serif;
font-size:16px;
font-style:italic;
color:#FFF;
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
/*padding: 10px 20px;*/
padding-left:5px;
padding-right:5px;
height:21px;
width:115px;
text-align:center;
border:0 solid rgba(0,0,0,0.22);
-webkit-border-radius:20px;
border-radius:12px;
-o-text-overflow:clip;
text-overflow:clip;
background:rgba(255,255,255,0.13);
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1);
margin-left:20px
}
.person {
text-align:right;
height:inherit
}
.person a {
opacity:.41;
font-family:'Roboto',sans-serif;
font-size:16px;
color:#FFF;
font-weight:500;
text-transform:uppercase
}
.person span {
margin-right:15px
}
.loginimg {
margin-bottom:-6px;
margin-right:15px
}
.pbox {
background:rgba(255,255,255,0.20);
box-shadow:2px 3px 4px 0 rgba(12,12,12,0.05);
margin:0 auto;
display:inline-block;
border-radius:50%;
height:110px;
width:110px;
text-align:center
}
.pimg {
padding-top:21px;
width:70px;
height:60px
}
.PP {
/*margin-top: 133px;*/
text-align:left;
height:50px
}
.PP a {
opacity:.64;
font-family:'Roboto' sans-serif;
font-size:32px;
color:#FFF;
margin-left:20px
}
.more-button {
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
height:17px;
cursor:pointer;
padding:4px 14px;
border:none;
-webkit-border-radius:21px;
border-radius:21px;
color:rgba(255,255,255,0.9);
-o-text-overflow:clip;
text-overflow:clip;
background:#000;
font-family:'Roboto' sans-serif;
font-size:16px;
color:#FFF;
margin-top:15px;
margin-right:15px;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1)
}
.steps {
font-size:20px;
font-weight:500;
color:#fff
}
.active-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.active-open-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments2 {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.stats {
background:rgba(51,51,51,0.28);
height:172px;
font-size:10px
}
.guages {
padding-left:95px;
padding-top:52px
}
.jonarand {
height:426px;
margin-left:0px;
border-left: 3px solid rgba(0,0,0,0);
border-right: 3px solid rgba(0,0,0,0);
}
.jonarand img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 41px;
}
.jonarand figcaption {
text-align: center;
padding-top: 10px;
font-size: 20px;
color: #FFF;
opacity: .60;
}
.box1 {
height:49.25%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
margin-bottom:2px;
}
.box2 {
height:49.25%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left;
margin-bottom:2px;
}
.box3 {
height:50.75%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
}
.box4 {
height:50.75%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left
}
.menuitem {
height:418px;
margin-left:0;
text-align: center;
font-size:20px;
font-weight:500;
color:#fff
}
.menuitem a:link {
text-decoration: none;
color:#FFF;
}
.item1 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item2 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item3 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item4 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item5 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.item6 {
height:20%;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
I am using Skeleton grid system and made some modifications. As you guys can see i tried adding height % to some items to try to make it work but i don't see whats wrong. Can someone point me to the right direction? the rest is on JSFIDDLE.
http://jsfiddle.net/qbj0r5bk/
here is the fullscreen result: https://jsfiddle.net/qbj0r5bk/embedded/result/

Lets take an example. Lets make a div and set it to be height:30%.
Html
<div id="container1"></div>
CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
That won't work, you will end up with a blank page. The reason is, though div is the only component you are going to work with, the page has other components, html and body. When you set the height of the div as 30%, what you are actualy telling is to set the height to be 30% the height of body which is 100% the height of html. However, html does not have any height by default, it is as tall as its content and you initially don't have any content. Lets make a small change to your css.
New CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
html, body {
height:100%;
}
Try out this fiddle: http://jsfiddle.net/r628n48L/1/

I think you shouldn't set html and body height to 100%, because the page will have the same height as the screen height and everything inside it will be an overflow.
If you mean set the height to % instead of fixed unit to create the element responsive to the screen, just write it in vh. For example, height: 50vh or 50% of the viewport height. Try it.
And just delete html, body {height: 100%}.

Why are some of my elements jumping when my css transition are initialized?

I'm creating a widget with animated transitions. On click, the circular elements hidden behind the main circle element should expand outward from center.
My initial styles position these animated elements correctly, my active styles position these elements correctly, but something is making half of them start in an odd position when the active class is toggled.
Why is this happening ?
Here is the fiddle.
The CSS code :
#al_stage {
border:1px solid #000;
width:650px;
height:650px;
position:relative;
margin:20px auto;
}
.al_container {
position:relative;
padding:70px;
box-sizing:border-box;
width:255px;
display:block;
background:#5c76a3;
border-radius:10px;
}
.al_scale {
width:100%;
padding-bottom:100%;
position:relative;
display:block;
}
.al_circle {
z-index:2;
border-radius:50%;
background:gray;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.al_wrapper {
display:table;
width:100%;
height:100%;
}
.al_center {
height:100%;
width:100%;
vertical-align:middle;
text-align:center;
display:table-cell;
position:relative;
}
.al_bubble {
position:absolute;
z-index:3;
display:block;
left:50%;
right:50%;
bottom:50%;
top:50%;
margin-right:0;
margin-bottom:0;
margin-top:0;
margin-left:0;
}
.al_md {
width:76%;
height:76%;
margin-left:-38%;
margin-top:-38%;
margin-right:initial;
margin-bottom:initial;
}
.al_sm {
width:60%;
height:60%;
margin-left:-30%;
margin-top:-30%;
margin-right:initial;
margin-bottom:initial;
}
.active {
-webkit-transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
}
.al_twelve.active {
top:initial;
bottom:100%;
margin-top:0;
margin-bottom:1%;
}
.al_six.active {
top:100%;
bottom:initial;
margin-bottom:0;
margin-top:1%;
}
.al_three.active {
left:100%;
right:initial;
margin-left:1%;
margin-right:0;
}
.al_nine.active {
right:100%;
left:initial;
margin-right:1%;
margin-left:0;
}
.bubble_container {
width:100%;
height:100%;
position:absolute;
}
.deg30 {
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.deg30 .al_scale {
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.deg60 {
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.deg60 .al_scale {
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hide {
display: none;
}

Ok, after another round of fiddling, I've solved the problem by being a little more verbose with the positioning. Here are the primary changes:
.al_bubble {
position: absolute;
z-index: 3;
}
.al_md {
width: 76%;
height: 76%;
}
.al_sm {
width: 60%;
height: 60%;
}
.al_three.al_md,
.al_six.al_md {
top: 50%;
left: 50%;
margin-top: -38%;
margin-left: -38%;
}
.al_three.al_sm,
.al_six.al_sm {
top: 50%;
left: 50%;
margin-top: -30%;
margin-left: -30%;
}
.al_twelve.al_md,
.al_nine.al_md {
bottom: 50%;
right: 50%;
margin-bottom: -38%;
margin-right: -38%;
}
.al_twelve.al_sm,
.al_nine.al_sm {
bottom: 50%;
right: 50%;
margin-bottom: -30%;
margin-right: -30%;
}
.active {
-webkit-transition: left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
transition: left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
}
.al_twelve.active {
bottom: 100%;
margin-bottom: 5px;
}
.al_six.active {
top: 100%;
margin-top: 5px;
}
.al_three.active {
left: 100%;
margin-left: 5px;
}
.al_nine.active {
right: 100%;
margin-right: 5px;
}
And here is the fiddle

Categories