Off-canvas menu and a fixed positioned header - javascript

I am creating a very basic off canvas menu, everything is working brilliantly BUT this one small thing that I can't fix!
Visit www.loaistudio.com and re-size the window to under 1000px.
Scroll down a bit and then click on the Menu button from the top left on the header.
Why does it despair? it actually does not despair but it just move to the very top of the page! Why is that? How can I fix it and just keep it to the top of the view area...
Here is the HTML
<div id="page"><!--Main Container-->
<!--Header (small screens only)-->
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">Website Name</p>
</div>
<!--/////////////////////////////////////////////////-->
<div class="wrapper">
<div id="homeSectionA" class="content">
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<p><strong>Paragraph Strong</strong></p>
<p><em>Paragraph Empaissaied</em></p>
<p><small>Paragraph Small</small></p>
<br>
<a>I am a Button</a>
<br><br>
<p><strong>List</strong></p>
<ul>
<li>List Item</li>
<li>List Item
<ul>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ul>
</li>
</ul>
<br>
<p><strong>List</strong></p>
<ol>
<li>List Item</li>
<li>List Item
<ol>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ol>
</li>
</ol>
<br>
<p>Abber (<abbr title="Oh, you found me :)">Hover over me</abbr>).</p>
<br>
<p>Paragraph<sub>subscript.</sub></p>
<br>
<p>Paragraph<sup>subscript.</sup></p>
<br>
<p>Paragraph<mark>Marked Line</mark></p>
<br>
<img alt="" src="http://placehold.it/600x400/cdcdcd">
</div>
</div>
<!--Footer-->
<footer id="footer">
<?php include ("assets/templates/footer.inc"); ?>
</footer>
</div><!--The End Of The Page-->
CSS
/* Landscape Tablets //////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 1024px) {
body, #headerContent {
min-width: 100%;
}
/*PAGE LAYOUT ==================================================================*/
/*Main Page Container*/#page {
padding-top: 50px;
z-index: 1;
-webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*Content Container*/
.content {
padding: 30px;
}
/*HEADER ======================================================================*/
/*Header Wrapper*/
#headerWrapper {
background-color: #191E25;
width: 200px; height: 100%;
z-index: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translate(-200px, 0px);
-moz-transform: translate(-200px, 0px);
-o-transform: translate(-200px, 0px);
-ms-transform: translate(-200px, 0px);
transform: translate(-200px, 0px);
}
#headerWrapper.headerOpen {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#page.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
/*Header Content Container*/
#headerContent {
width: 210px; height: 100%;
padding: 0;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
/*Header Logo*/
#headerLogo {
display: none;
}
/*Main Menu*/
#mainMenu, #mainMenu li {
text-align: left;
margin-top: 0;
float: none;
}
#mainMenu a {
color: #A0A8B1;
border-bottom: 1px solid #13171C;
width: 100%;
padding: 20px 0px 20px 20px;
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#mainMenu a:hover {
color: #CACFD3;
background-color: #232A34;
}
#mainMenu a.active {
color: #6E737A;
background-color: #13171C;
}
/*Second Header Container & Elements (Hidden From Widescreen)*/
#secondHeader {
color: #FFFFFF;
background-color: #49AB8E;
border-bottom: 1px solid #398770;
width: 100%;
display: block;
position: fixed; top: 0;
padding: 0 20px 0 0;
z-index: 1000;
line-height: 50px;
}
.secondHeader-menuButton {
background: #41997F url('../../assets/elements/nav-icon.png') no-repeat 20px;
background-size: 25px 24px;
width: 120px;
display: inline-block;
font-weight: bold;
text-indent: 55px;
}
.secondHeader-menuButton-active {
background: #41997F url('../../assets/elements/nav-icon-close.png') no-repeat 20px;
background-size: 25px 24px;
}
#logo-smallScreen {
display: inline-block;
float: right;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails {
width: 50%;
padding-left: 50px;
margin-left: -6px;
text-align: center;
}
#contactForm {
width: 50%;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Portrait Tablets ///////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 770px) {
/*PAGE LAYOUT =================================================================*/
/*Content Container*/.content {
padding: 20px;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails, #contactForm {
width: 100%;
padding: 0;
margin: 0;
}
#contactDetails {
margin-top: 30px;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Phones /////////////////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 500px) {
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails-normal {
display: none;
}
#contactDetails-smart {
display: block;
border-top: 1px solid #CED1D6;
padding-top: 30px;
}
#contactDetails-smart a {
color: #FFFFFF;
background-color: #49AB8E;
width: 100%;
padding: 10px 15px;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#contactDetails-smart a:hover,
#contactDetails-smart a:active {
background-color: #398770;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Mini Devices ///////////////////////////////////////////////////////////////////////////////////////*/
#media only screen and (max-width: 290px) {
#logo-smallScreen {
display: none
}
}
JavaScript:
$(document).ready(function() {
//Prevent clicking on .active links
'use strict'; $('.active').click(function(a) {
a.preventDefault();
});
//Smart Navigation
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});
});


Try changing your #headerWrapper transitions to:
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
As for the header becoming "unfixed" after the translate: this seems to be a known bug in Webkit.
You can fix it by:
1) moving #secondHeader outside of #page:
<body>
<header id="headerWrapper"></header>
<div id="secondHeader"></div>
<div id="page"></div>
</body>
2) adding a new CSS class:
#page.pageOpen, #secondHeader.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
3) add transitions to #secondHeader
#secondHeader {
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
}
4) toggling this class via Javascript as well:
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page, #secondHeader").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page, #secondHeader").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});


First of all, the menu doesn't disappear. It is merely moving to the top of #page. When you scroll to the top, you will see it.
This is documented behaviour, see MDN - transform
Summary
...
If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.
This means, instead of body, #page will be now the containing block for #secondHeader.
Since secondHeader is position: fixed; top: 0;, it will be now fixed at the top of page.
As #janfoeh has shown, you can "fix" it by moving the inner div outside, and duplicate the necessary transformation on the inner (now outside) div.

Related

How to hide scrollbar thumb in border radius element

I'm having problem with styling scroll bar on element with border-radius i've tried to use partent element with overflow: hidden but still it keeps going over. Is there a way to hide it?
<div class="match-container">
<ul class="match-list">
<li class="match-list__item">Hamlet</li>
<li class="match-list__item">Ham</li>
<li class="match-list__item">Hamster</li>
<li class="match-list__item">Hamburger</li>
<li class="match-list__item">Hammock</li>
</ul>
</div>
.match-container {
width: 100%;
margin: 0 auto;
background-color: #131313;
border-radius: 0 0 23px 23px;
transform: scaleY(0);
transform-origin: top center;
transition: 0.1s ease;
}
.match-container--active {
transform: scaleY(1);
transition: 0.3s ease;
}
.match-container--active-scroll {
transform: scaleY(1);
transition: 0.3s ease;
overflow-x: hidden;
overflow-y: scroll;
height: 200px;
}
::-webkit-scrollbar {
padding-right: 3px;
width: 10px;
background-color: #ffffff41;
}
::-webkit-scrollbar-thumb {
width: 10px;
background: #6d6d6d;
}
::-webkit-scrollbar-thumb:hover {
background: #999999;
}
It's looks like this.

Make hamburger menu fadeout work

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-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;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

Click outside nav to close

I have the below code which is working fine, however I need it to close the nav when clicked on the outside of the nav (so not the button)
I have tried this but it doesnt work
$("body").click(function (e) {
$('#navwrapper').removeClass('is-visible');
});
any help would be appreciated
many thanks
var offset = 0;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
checkMenu();
$(window).scroll(function(){
checkMenu();
});
$('.cd-nav-trigger').click(function(){
$('.content').toggleClass('static');
})
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
#cd-nav {
outline: 0px;
z-index: 1002;
position: absolute;
display: block;
}
#cd-nav ul {
position: fixed;
width: 90%;
right: 5%;
bottom: 80px;
padding-bottom:20px;
box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
background: white;
visibility: hidden;
overflow: hidden;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #ffffff;
width: 90%;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 5%;
border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
max-height: 70%;
overflow: scroll;
}
#cd-nav ul.is-visible::-webkit-scrollbar {
-webkit-appearance: none;
}
#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
width: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
height: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#cd-nav ul.is-visible::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
#cd-nav li a {
display: block;
text-decoration: none;
color: #57585b;
overflow: hidden;
width: 95%;
}
.cd-nav-trigger {
position: fixed;
bottom: 40px;
right: 5%;
width: 45%;
height: 45px;
background: #ecb75f;
white-space: nowrap;
z-index: 2;
color: #000000 !important;
line-height: 45px;
text-decoration: none;
text-align: center;
border-right: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
span.Icontext {
float: left;
width: 66px;
white-space: normal;
line-height: 17px;
padding-left: 28px;
padding-top: 4px;
}
.cd-nav-left { position: fixed;
bottom: 40px;
left: 5%;
width: 45%;
height: 45px;
background: #fafafb;
white-space: nowrap;
z-index: 2;
color: #57585b;
line-height: 45px;
text-decoration: none;
text-align: center;
border-left: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
.navIcon {font-size: 26px; vertical-align: middle;}
.rotate{
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
<span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span>
Compare park
<nav id="cd-main-nav">
<ul id="navwrapper">
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>

The code works fine, there are only two minor tweaks to make it work completely:
Attach the click event listener to the document and not to the body.
$(document).on("click", function() {
$('#navwrapper').removeClass('is-visible');
});
Right now you only have one element (#cd-nav) in the body, and it has position:absolute; That means that it is taken out of the regular flow of the document, "emptying" the body, that will have a height of 0 and you will never be able to click on it. So attach the event handler to the document instead of the body.
Note: This many not be necessary on the real page, as I guess that you will have more content that will occupy the window, but it applies for the demo that you posted in the question.
Stop propagation of events when the element that opens the menu is clicked.
$('.cd-nav-trigger').on('click', function(e){
e.preventDefault();
e.stopPropagation();
The click event will bubble to the body and the document, so even if the trigger displays it, then the event will bubble up and the click event handler of the document will hide it. You want to stop the propagation to avoid that.
You can see it working in this code (find the changes by looking for the comment // AM below):
var offset = 0;
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
checkMenu();
// AM: add the listener to the document
$(document).on("click", function() {
$('#navwrapper').removeClass('is-visible')
});
$(window).scroll(function(){
checkMenu();
});
$('.cd-nav-trigger').click(function(){
$('.content').toggleClass('static');
})
$('.cd-nav-trigger').on('click', function(e){
// AM: prevent the default behavior
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('menu-is-open');
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
#cd-nav {
outline: 0px;
z-index: 1002;
position: absolute;
display: block;
}
#cd-nav ul {
position: fixed;
width: 90%;
right: 5%;
bottom: 80px;
padding-bottom:20px;
box-shadow: 0 0 10px rgba(0, 0,0, 0.4);
background: white;
visibility: hidden;
overflow: hidden;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #ffffff;
width: 90%;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 5%;
border-bottom: 1px solid rgb(235, 235, 235);
}
#cd-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
max-height: 70%;
overflow: scroll;
}
#cd-nav ul.is-visible::-webkit-scrollbar {
-webkit-appearance: none;
}
#cd-nav ul.is-visible::-webkit-scrollbar:vertical {
width: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar:horizontal {
height: 12px;
}
#cd-nav ul.is-visible::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
#cd-nav ul.is-visible::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
#cd-nav li a {
display: block;
text-decoration: none;
color: #57585b;
overflow: hidden;
width: 95%;
}
.cd-nav-trigger {
position: fixed;
bottom: 40px;
right: 5%;
width: 45%;
height: 45px;
background: #ecb75f;
white-space: nowrap;
z-index: 2;
color: #000000 !important;
line-height: 45px;
text-decoration: none;
text-align: center;
border-right: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
span.Icontext {
float: left;
width: 66px;
white-space: normal;
line-height: 17px;
padding-left: 28px;
padding-top: 4px;
}
.cd-nav-left { position: fixed;
bottom: 40px;
left: 5%;
width: 45%;
height: 45px;
background: #fafafb;
white-space: nowrap;
z-index: 2;
color: #57585b;
line-height: 45px;
text-decoration: none;
text-align: center;
border-left: 1px solid #57585b;
border-top: 1px solid #57585b;
border-bottom: 1px solid #57585b;
}
.navIcon {font-size: 26px; vertical-align: middle;}
.rotate{
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-nav">
<span class="Icontext">subnav</span><span class="rotate ha ha-th navIcon"></span>
Compare park
<nav id="cd-main-nav">
<ul id="navwrapper">
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
<li>Homepage</li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
</div>

Code not working in internet explorer [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code working good in mozilla and opera .But not working in IE. Please help.The JavaScript is ok. But in IE 10 only back panel is coming ..
Thank you..
http://codepen.io/syedrafeeq/pen/eCkFt
CSS 3D FLIP BOX
Flipping content to a div (Transitions and 3D Transforms)
<div class="wrapper">
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
<div class="col_third end">
<div class="hover panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #ecf0f1;
margin: 20px;
font-family: Arial, Tahoma;
font-size: 20px;
color: #666666;
text-align: center;
}
p { color: #ffffff; }
/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */
.wrapper{ width: 980px; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;}
.panel {
margin: 0 auto;
height: 130px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.panel .front,
.panel .back {
text-align: center;
}
.panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
background-color: #14bcc8;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.box2{
background-color: #ff7e70;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});

CSS3 3D Transforms Doesn't support to IE version Upto 8 and 9. And IE version 10 and 11 Partial support.
Partial support menas not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
Reference Link.

Why is this working on Safari and Firefox but not on Chrome?

I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)

Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}

if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/

Categories

Resources