Why must I click twice to open and close my menu

Why must I click twice to open and close my menu - javascript

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');
...
}

Related

Angular 4+ Creating a Semi-Circular Nav Menu, Modular vs. Global CSS

I have been trying to create an animated circular navigation menu in Angular 4+ inspired by this blog post
However I am having a little bit of trouble translating this into Angular properly. As a starting point I have stripped down the code to the absolute minimum working point. 1 html, 1 js and 1 css file.
This is the goal:
And this is what the following code produces right now. Notice the icons stuck on the left top corner driving the circular nav size to 0:
Angular Code:
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>GuiltyGorillaMerch</title>
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="assets/modern.js"></script>
<script type="text/javascript" src="assets/polyfills.js"></script>
</head>
<body>
<app-root></app-root>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
myFunction()
</script>
<script type="text/javascript" src="assets/demo.js"></script>
</body>
</html>
bottom-menu.component.html
<button class="cn-button" (click)="handle()" id="cn-button">{{buttonLogo}}</button>
<div [ngClass] = "{'opened-nav': open}" class="cn-wrapper" id="cn-wrapper">
<ul>
<li><span class="icon-picture"></span></li>
<li><span class="icon-headphones"></span></li>
<li><span class="icon-home"></span></li>
<li><span class="icon-facetime-video"></span></li>
<li><span class="icon-envelope-alt"></span></li>
</ul>
</div>
<div [ngClass] = "{'on-overlay': open}" id="cn-overlay" class="cn-overlay"></div>
bottom-menu.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-bottom-menu',
templateUrl: './bottom-menu.component.html',
styleUrls: ['./bottom-menu.component.css']
})
export class BottomMenuComponent implements OnInit {
open : boolean;
buttonLogo: string = "+";
constructor() {
this.open = false;
}
ngOnInit() {
}
ngAfterViewInit(){
var button = document.getElementById('cn-button');
var wrapper = document.getElementById('cn-wrapper');
var overlay = document.getElementById('cn-overlay');
}
openNav(){
this.open = true;
this.buttonLogo = "-"
}
closeNav(){
this.open = false;
this.buttonLogo = "+";
}
handle(){
if(!this.open){
this.openNav()
}else{
this.closeNav()
}
}
}
bottom-menu.component.css (directly copied from original CSS):
#import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative
}
html,
body {
height: 100%;
}
body {
background: #f06060;
color: #fff;
}
.csstransforms .cn-wrapper {
font-size: 1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.csstransforms .opened-nav {
border-radius: 50%;
pointer-events: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.cn-overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
z-index: 2;
}
.cn-overlay.on-overlay {
visibility: visible;
opacity: 1;
}
.cn-button {
border: none;
background: none;
color: #f06060;
text-align: center;
font-size: 1.8em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11;
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus {
color: #aa1010;
}
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
-webkit-transition: border .3s ease;
-moz-transition: border .3s ease;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
-webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
-ms-transform: skew(-50deg) rotate(-70deg) scale(1);
-moz-transform: skew(-50deg) rotate(-70deg) scale(1);
transform: skew(-50deg) rotate(-70deg) scale(1);
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.3s, color 0.3s;
-moz-transition: opacity 0.3s, color 0.3s;
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em;
opacity: 0.7;
}
.csstransforms .cn-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(50deg);
-ms-transform: rotate(-10deg) skew(50deg);
-moz-transform: rotate(-10deg) skew(50deg);
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
-webkit-transform: rotate(30deg) skew(50deg);
-ms-transform: rotate(30deg) skew(50deg);
-moz-transform: rotate(30deg) skew(50deg);
transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
-webkit-transform: rotate(70deg) skew(50deg);
-ms-transform: rotate(70deg) skew(50deg);
-moz-transform: rotate(70deg) skew(50deg);
transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
-webkit-transform: rotate(110deg) skew(50deg);
-ms-transform: rotate(110deg) skew(50deg);
-moz-transform: rotate(110deg) skew(50deg);
transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
-webkit-transform: rotate(150deg) skew(50deg);
-ms-transform: rotate(150deg) skew(50deg);
-moz-transform: rotate(150deg) skew(50deg);
transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
.csstransforms .cn-wrapper li.active a {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus
{
position:fixed;
}
.no-csstransforms .cn-button {
display: none;
}
.no-csstransforms .cn-wrapper li {
position: static;
float: left;
font-size: 1em;
height: 5em;
width: 5em;
background-color: #eee;
text-align: center;
line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
font-size: 1.3em;
border-right: 1px solid #ddd;
}
.no-csstransforms .cn-wrapper li a:last-child {
border: none;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: white;
}
.no-csstransforms .cn-wrapper li.active a {
background-color: #6F325C;
color: #fff;
}
.no-csstransforms .cn-wrapper {
font-size: 1em;
height: 5em;
width: 25.15em;
bottom: 0;
margin-left: -12.5em;
overflow: hidden;
position: fixed;
z-index: 10;
left: 50%;
border: 1px solid #ddd;
}
#media screen and (max-width:480px) {
.csstransforms .cn-wrapper {
font-size: .68em;
}
.cn-button {
font-size: 1em;
}
.csstransforms .cn-wrapper li {
font-size: 1.52em;
}
}
#media screen and (max-width:320px) {
.no-csstransforms .cn-wrapper {
width: 15.15px;
margin-left: -7.5em;
}
.no-csstransforms .cn-wrapper li {
height: 3em;
width: 3em;
}
}
EDIT:
As soon as I moved the CSS to the global assets/styles.css
file the styling took effect properly. However I am curious as to why it works
in global CSS but not in the module's respective css file. Any thoughts?

The styles specified in #Component metadata apply only within the template of that component.
https://angular.io/guide/component-styles#style-scope
You define they styles for html, body etc. in a component that doesn't use those elements in its template, so those styles don't take effect, those need to be in your common styles file.
bottom-menu.component.css seems the right place for the css that only applies to the html you defined in your component, such as the .cn- classes

Executing and formatting jQuery hamburger menu

I am having trouble figuring out how to make the hamburger menu I just spent a day on actually do something other than look cute. I have been trying to put together a couple different blocks of code I've gathered to create what I am envisioning but as I'm a bit of a newb to jQuery it's not working. I assume I'm likely missing something simple, but maybe not. Anyway... your help is greatly appreciated! (comments describing what I'm trying to do in the code.
Also- I added what's in my external jQuery and css file here inline but my actual file has links to both instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<style>
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 60px;
height: 45px;
position: fixed;
bottom: 25px;
right: 25px;
-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-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: darkred;
border-radius: 9px;
opacity: 2;
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;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #999;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0;
padding: 7px 15px 0px 15px;
color: #999;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
</style>
<title>hamburgers</title>
</head>
<body>
<!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->
<!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->
<header>
<span>Shine Design</span>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
<!-- Script (normally linked in external) for red hamburger -->
<script>
$(document).ready(function(){ $('#nav-icon4').click(function(){ $(this).toggleClass('open'); }); });
<!-- The following is the code for the grey hamburger icon-->
$( ".cross" ).hide(); $( ".menu" ).hide(); $( ".hamburger" ).click(function() { $( ".menu" ).slideToggle( "slow", function() { $( ".hamburger" ).hide(); $( ".cross" ).show(); }); }); $( ".cross" ).click(function() { $( ".menu" ).slideToggle( "slow", function()
{ $( ".cross" ).hide(); $( ".hamburger" ).show(); }); });
</script>
</body>
</html>

Remove the fixed position from your animated hamburger, add it to the header and float it to the right, hide the menu first and then toggle it
$(document).ready(function() {
$('.menu-title,#nav-icon4').click(function() {
$('#nav-icon4').toggleClass('open');
$(".menu").slideToggle("slow");
});
});
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: 15px;
margin-right: 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-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #999;
border-radius: 5px;
opacity: 2;
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;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.menu {
z-index: 1000000;
display: none;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
.menu-title {
float:right;
margin-top:20px;
margin-right:10px;
line-height:1;
color:#999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<h2 class="menu-title">MENU</h2>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
</html>

Try this:
$(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');
}
});
});
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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
Ref: https://jsfiddle.net/f19kz640/

So i deleted the jQuery for the grey icon it is not working anyway.
Also you dont need to wrap the jQuery for the red hamburger menu with document ready.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="hamburgers.css">
<script type="text/javascript" src="ham.js"></script>
<style>
/* The following CSS is for the red hamburger animation in the lower left corner */
#nav-icon4 {
width: 60px;
height: 45px;
position: fixed;
bottom: 25px;
right: 25px;
-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-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: darkred;
border-radius: 9px;
opacity: 2;
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;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
/* CSS for the grey hamburger icon and menu -- note about what I'm tying to figure out: how to replace the grey hamburger icon with the fancier red one in the bottom left corner */
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #999;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0;
padding: 7px 15px 0px 15px;
color: #999;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #f1f1f1;
position: absolute;
text-align: center;
font-size: 12px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #ffffff;
padding: 15px 0 15px 0;
border-bottom: #dddddd 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #666;
}
.menu a:hover {
text-decoration: none;
color: #666;
}
.glyphicon-home {
color: white;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
header {
display: inline-block;
font-size: 12px;
padding-left: 20px;
}
</style>
<title>hamburgers</title>
</head>
<body>
<!-- This is how I want my hamburger icon/animation to look (the red one on the bottom right). However I need to put the text "menu" next to the icon when in desktop, but responsive and disappearing in mobile -->
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
<!--I want the rest of the nav bar to resemble this (but with the red hamburger on the top right) and the drop down menu appearing when said icon is clicked-->
<!-- The menu isn't working at all now. I assume there's some conflict with the jQuery codes for each menu but I may be totally off on that assumption. -->
<header>
<span>Shine Design</span>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
<!-- Script (normally linked in external) for red hamburger -->
<script>
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
</script>
</body>
</html>

my mega menu in safari not same as firefox and chrome.. weird css behaviour?

Safari show the overlap text... I have no idea what is happen in safari.
firefox and chrome no overlap text.
here is my screenshot:
safari:
firefox:
PLEASE USE the safari to test the result. I believe that is conflict about my css? jquery should not be a problem
//START MEGA MENU JQUERY
jQuery(document).ready(function($){
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
$('.lg-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.lg-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.lg-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.lg-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
});
/* BASIC style for nav, you can ingore this part */
a:focus {
text-decoration:none;
}
a {
transition: all 0.3s ease 0s;
text-decoration:none;
}
a:hover {
color: #5ad5f4;
text-decoration: none;
}
a:active, a:hover {
outline: 0 none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.lg-dropdown-content {
background-color: #ddd;
}
/* END BASIC style for nav, you can ingore this part */
/* START MEGA MENU CSS */
.back-width {
width: 100%;
}
ul.column-two {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.minheight2{
min-height:0px;
}
.lg-dropdown h2,
.lg-dropdown-content a,
.lg-dropdown-content ul a {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.lg-dropdown {
margin-top: 15px;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background-color: #111433;
color: #ffffff;
visibility: hidden;
position: absolute;
height: auto;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
background-color: transparent;
color: #111433;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.lg-dropdown.dropdown-is-active {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
}
.lg-dropdown-content > li{
display: inline-block;
}
.lg-dropdown-content, .lg-dropdown-content ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
padding-top: 0;
overflow: visible;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.lg-dropdown-content a {
display: block;
color: #000;
height: 50px;
line-height: 50px;
font-size: 1.5rem;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-style: solid;
border-color: #ebebeb;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.lg-dropdown-content ul a {
display: block;
color: #111433;
/* truncate text with ellipsis if too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-top-width: 1px;
border-color: #242643;
border-style: solid;
border:none;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
}
.lg-dropdown-content.is-hidden > li > a, .lg-dropdown-content.move-out > li > a, .lg-dropdown-content ul.is-hidden > li > a, .lg-dropdown-content ul.move-out > li > a {
opacity: 1;
}
.lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden {
/* push the secondary dropdown items to the right */
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.lg-dropdown-content ul.move-out > li > a{
/* push the dropdown items to the left when secondary dropdown slides in */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
visibility: hidden;
}
.lg-dropdown-content .see-all a {
color: #5f88c3;
}
.lg-dropdown-content.move-out > li > a{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.lg-dropdown-content .lg-menu {
top: 100%;
height: auto;
overflow: hidden;
padding-bottom: 65px;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5);
}
.lg-dropdown-content .lg-menu.is-hidden {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu.fade-in {
/* animate fade in */
-webkit-animation: xs-fade-in 0.2s;
-moz-animation: xs-fade-in 0.2s;
animation: xs-fade-in 0.2s;
}
.lg-dropdown-content .lg-menu.fade-out {
/* animate fade out */
-webkit-animation: xs-fade-out 0.2s;
-moz-animation: xs-fade-out 0.2s;
animation: xs-fade-out 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all {
position: absolute;
bottom: 1px;
height: 45px;
text-align: center;
}
.lg-dropdown-content .lg-menu > .see-all a {
margin: 0;
height: 100%;
line-height: 45px;
background: #ebebeb;
pointer-events: auto;
-webkit-transition: color 0.2s, background-color 0.2s;
-moz-transition: color 0.2s, background-color 0.2s;
transition: color 0.2s, background-color 0.2s;
}
.lg-dropdown-content .lg-menu > .see-all a:hover {
color: #ffffff;
background-color: #111433;
}
.lg-dropdown-content .lg-menu > li {
/* 3 column */
width: 33.333%;
float: left;
}
.lg-dropdown-content .lg-menu::before {
/* this is the separation line in the middle of the .lg-menu element */
position: absolute;
content: '';
top: 290px;
left: 15px;
right: 15px;
height: 1px;
width: 100%;
background-color: #ebebeb;
}
.lg-dropdown-content .lg-menu > li > a {
color: #5f88c3;
font-size: 1.6rem;
margin-bottom: 10px;
line-height: 30px;
height: 30px;
pointer-events: none;
}
.lg-dropdown-content .lg-menu > li > a::after, .lg-dropdown-content .lg-menu > li > a::before {
/* hide the arrow */
display: none;
}
.lg-dropdown-content .lg-menu.move-out > li > a {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.lg-dropdown-content .lg-menu > li {
margin: 20px 0;
border-right: 1px solid #ebebeb;
padding: 0 30px;
height: 250px;
}
.lg-dropdown-content .lg-menu > li > ul {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
position: relative;
height: auto;
}
.lg-dropdown-content .lg-menu > li > ul > .go-back {
display: none;
}
.lg-dropdown-content .lg-menu a {
line-height: 22px;
height: 20px;
font-size: 1.3rem;
padding-left: 0;
}
.lg-dropdown-content .lg-menu ul {
padding-bottom: 25px;
overflow: hidden;
height: auto;
min-height: 100%;
}
.lg-dropdown-content .lg-menu .go-back a {
padding-left: 20px;
}
.lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after {
left: 0;
}
.lg-dropdown-content .lg-menu .see-all {
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
width: 100%;
}
.lg-dropdown-content > .has-children > ul {
visibility: hidden;
}
.lg-dropdown-content > .has-children > ul.is-active {
/* when hover over .lg-dropdown-content items - show subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > .lg-menu.is-active > li > ul {
/* if .lg-menu is visible - show also subnavigation */
visibility: visible;
}
.lg-dropdown-content > .has-children > a.is-active {
/* hover effect for .lg-dropdown-content items with subnavigation */
color: #5f88c3;
}
.lg-dropdown-content > .has-children > a.is-active::before, .lg-dropdown-content > .has-children > a.is-active::after {
background: #5f88c3;
}
.has-children > a::before, .go-back a::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.has-children.root-menu > a::after {
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
.has-children > a {
padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
/* arrow goes on the right side - children navigation */
right: 20px;
-webkit-transform-origin: 9px 50%;
-moz-transform-origin: 9px 50%;
-ms-transform-origin: 9px 50%;
-o-transform-origin: 9px 50%;
transform-origin: 9px 50%;
}
.lg-dropdown-content .go-back a {
padding-left: 40px;
}
.lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after {
/* arrow goes on the left side - go back button */
left: 20px;
-webkit-transform-origin: 1px 50%;
-moz-transform-origin: 1px 50%;
-ms-transform-origin: 1px 50%;
-o-transform-origin: 1px 50%;
transform-origin: 1px 50%;
}
.root-menu.has-children > a::before, .root-menu.has-children > a::after {
background: #fff;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
/* arrow icon in CSS - for element with nested unordered lists */
content: '';
position: absolute;
top: 50%;
margin-top: 1px;
display: inline-block;
height: 2px;
width: 10px;
background: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#media only screen and (min-width: 1024px) {
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
background: #b3b3b3;
}
}
<head>
<!-- css bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"></script>
<!-- END import jquery -->
</head>
<!-- header start -->
<header class="header-pos navbar-fixed-top">
<div class="header-bottom-area" >
<div class="container-fluid">
<div class="inner-container">
<div class="row">
<div class="col-lg-12" style="padding:0px;">
<nav class="lg-dropdown dropdown-is-active">
<ul class="lg-dropdown-content">
<li class="has-children root-menu">
Products
<ul class="lg-menu is-hidden fade-out">
<li class="see-all">All Products</li>
<li class="has-children">Fashion
<ul class="is-hidden column-two move-out">
<li class="go-back">Products</li>
<li class="see-all">All Fashion</li>
<li class="has-children">Women Fashion
<ul class="column-two menu-level-2">
<li class="go-back back-width">Back</li>
<li class="see-all">All Women Fashion</li>
<li>Tudung</li>
<li>safari</li>
<li>safari 2</li>
<li>Jubah</li>
<li>Cheong Sam</li>
</ul>
</li>
<li>Baby Fashion</li>
<li>Man Fashion</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>

Safari is bugged in column-count rules.
Remove in class .lg-dropdown-content .lg-menu ul the min-height in % rules or define it in px.

changing css class and a jquery function when it reaches a div

I want to change a class from "class A" to "Class B" when it reaches DIV of "Class A" to "Class B"..
Here is the thing what I want, I have push menu when hamburger icon. The icon is generally in white background with black box shadow. My whole website background is dark. So it is perfect for dark background.
But I have few DIVs which are in white, when I reach that white DIV my menu is hardly visible.
So my question is I want to change the class of my menu from white to black when it reaches white background div. And I want to change the function of that menu as well in jquery. Because I have a "click" function to expand the menu.
Here is the HTML:
$('.nav-trigger').on('click', function() {
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>
as you can see in the snippit above when i reach the white background section, my hamburger menu trigger is hardly visible..
I have a css class with dark menu in the name of "nav-trigger dark".
Now I want to change that "nav-trigger" class to "nav-trigger-dark" class in that html and in that jquery script as well.

I believe I understood the effect you're trying to achieve.
In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.
Check this Fiddle for more information.
It goes like this:
HTML:
<nav>
<p class="js_header white">
Text
</p>
</nav>
<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>
CSS (the important part):
nav .white {
color: white;
}
nav .black {
color: black;
}
section.bg-black {
background-color: black;
}
section.bg-white {
background-color: white;
}
Javascript:
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bg-black')) {
$('.js_header').removeClass('black');
$('.js_header').addClass('white');
} else {
$('.js_header').removeClass('white');
$('.js_header').addClass('black');
}
}
});
});
UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.
The JS would go like this for the changing the click behaviour:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
I've altered your snippet to the following:
$('body').on('click', '.nav-trigger', function() {
alert('light clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$('body').on('click', '.nav-trigger-dark', function() {
alert('dark clicked');
$(this).toggleClass('on');
$('.nav-menu').fadeToggle(200);
});
$(document).scroll(function (e) {
$.each($('section'), function (index, section) {
if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
if ($(section).hasClass('bgwhite')) {
$('.js_navbar').removeClass('nav-trigger');
$('.js_navbar').addClass('nav-trigger-dark');
} else {
$('.js_navbar').removeClass('nav-trigger-dark');
$('.js_navbar').addClass('nav-trigger');
}
}
});
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Advent Pro", sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #23222a;
height: 100vh;
color: #fff;
}
.content {
display: table-cell;
vertical-align: middle;
color: #fff;
}
.nav-trigger {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger span {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
top: 0;
left: 0;
}
.nav-trigger span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger span:last-child {
top: 20px;
left: 0;
}
.nav-trigger .on {
top: 10px;
}
.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-trigger-dark {
width: 30px;
height: 30px;
position: fixed;
top: 10px;
right: 10px;
z-index: 20;
cursor: pointer;
-webkit-transition: top .1s ease-in-out;
transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
display: block;
width: 100%;
height: 2px;
background: #000;
margin: 7px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
top: 0;
left: 0;
}
.nav-trigger-dark span:nth-child(2) {
width: 20px;
top: 10px;
left: 0;
}
.nav-trigger-dark span:last-child {
top: 20px;
left: 0;
}
.nav-trigger-dark .on {
top: 10px;
}
.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
}
.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 19;
overflow: hidden;
}
.nav-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
position: relative;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
position: relative;
float: left;
margin: 0;
width: 25%;
height: 100vh;
text-align: center;
cursor: pointer;
background: #e65454;
color: #fff;
text-decoration: none;
}
#media (max-width: 30em) {
.nav-menu ul a {
width: 100%;
height: 25vh;
}
}
.nav-menu ul a li {
position: absolute;
text-transform: uppercase;
font-family: "Advent Pro", sans-serif;
top: 45%;
left: 0;
position: relative;
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
}
#media (max-width: 30em) {
.nav-menu ul a li {
top: 25%;
}
}
.nav-menu ul a h2.mb {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -20px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mb {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mb {
font-size: 2rem;
/* 32/16 */
margin-bottom: -13px;
}
}
.nav-menu ul a h2.mt {
-webkit-transition: -webkit-transform 0.35s;
transition: -webkit-transform 0.35s;
transition: transform 0.35s;
transition: transform 0.35s, -webkit-transform 0.35s;
margin-bottom: -73px;
font-size: 2.25rem;
/* 36/16 */
}
#media (max-width: 30em) {
.nav-menu ul a h2.mt {
font-size: 1.688rem;
/* 27/16 */
}
}
#media (min-width: 48em) and (max-width: 61.9375em) {
.nav-menu ul a h2.mt {
font-size: 2rem;
/* 32/16 */
}
}
.nav-menu ul a i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
font-size: 1.875rem;
/* 30/16 */
}
#media (max-width: 30em) {
.nav-menu ul a i {
display: none;
}
}
.nav-menu ul a:hover {
background: #fff;
color: #e65454;
}
.nav-menu ul a:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
background: #fff;
color: #e65454;
}
.nav-menu ul a.active:hover {
color: #000;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.bgwhite {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger js_navbar">
<span></span><span></span><span></span>
</div>
<div class="nav-menu">
<ul>
<li><h2 class="mt">Home</h2><i>Go to</i></li>
<li><h2 class="mb">About</h2><i>Me</i></li>
<li><h2 class="mt">Work</h2><i>My</i></li>
<li><h2 class="mb">Contact</h2><i>Me</i></li>
</ul>
</div>
<section>
<div class="content">
</div>
</section>
<section class="bgwhite">
<div class="content">
</div>
</section>

You can calculate the offset of white elements and then compare that with the scroll value. Then if you are on that divs, you change your css :
$(function() {
var oTop = $('#blueDiv').offset().top - $('#blueDiv').outerHeight() ;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
//console.log( pTop + ' - ' + oTop );
if( pTop > oTop && pTop<oTop + $('#blueDiv').outerHeight() + $('#navbar').outerHeight() ){
white();
}else {
blue();
}
});
});
function white(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-white";
//Add your code here
}
function blue(){
document.getElementById("navbar").className = "";
document.getElementById("navbar").className = "navbar-blue";
//Add your code here
}
#navbar {
position : fixed;
top : 0px;
height : 30px;
width:100%;
opacity:0.7;
}
#blueDiv {
background-color : blue;
height:30px;
}
.navbar-white {
background-color: white;
}
.navbar-blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-blue">
menu
</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>
<div id="blueDiv">counter...</div>
<p> s</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s2</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s3</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> s4</p>
<p> </p>
<p> </p>

overlay issue with menu

I'm having the issue with the overlay of a menu, when I open the menu the content in the background is still visible, i have tried playing with the z-index but it doesn't help.
The paragraph is seen in light gray when you open the menu .
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: -2;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

If you want to have different colors per paragraph, I suggest you to use a pseudo-element inside your .overlay element. You'll be able to colorize it, and it will hide your content:
.overlay {
position: relative;
...
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Whole snippet:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
}
.overlay {
position: relative;
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
}
.overlay.is-visible:after {
content: '';
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home
</li>
<li>About
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
<div class="overlay">Hello,<br>this is the para that is still visible when you open the menu</div>

Below code is working for your.
$("#menu").click(function () {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(this).toggleClass('open');
});
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
html {
color: #222;
font-family: Avenir, sans-serif;
}
a {
color: #111;
display: inline-block;
text-decoration: none;
padding: 10px 0;
text-transform: uppercase;
font-weight: lighter;
opacity: .7;
transition: all 0.4s ease-in-out;
}
a:hover {
opacity: 1;
}
.nav {
text-align: right;
float: right;
}
.nav li {
transition-delay: 0.15s;
transform: translate(30px, 0);
opacity: 0;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav.is-open li {
transform: translate(0px, 0);
opacity: 1;
}
.nav.is-open li:nth-child(1) {
transition-delay: 0.1s;
}
.nav.is-open li:nth-child(2) {
transition-delay: 0.15s;
}
.nav.is-open li:nth-child(3) {
transition-delay: 0.2s;
}
.nav.is-open li:nth-child(4) {
transition-delay: 0.25s;
}
.nav.is-open li:nth-child(5) {
transition-delay: .3s;
}
.nav.is-open li a {
color: #fff;
}
#menu {
float: right;
width: 25px;
height: 15px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor: pointer;
}
#menu span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #222;
border-radius: 2px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu span:nth-child(1) {
top: 0px;
}
#menu span:nth-child(2),
#menu span:nth-child(3) {
top: 9px;
}
#menu span:nth-child(4) {
top: 18px;
}
#menu.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menu.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#menu.open span {
background: #fff;
}
header {
float: right;
padding: 50px;
}
header {
position: relative;
z-index:2
}
.overlay {
background: transparent;
width: 100%;
height: 100vh;
z-index: -4;
transition: background .5s ease-in-out;
position:absolute;
top:0px;
}
.overlay-2 {
width: 100%;
}
.overlay.is-visible {
background: #000;
position: absolute;
z-index: 1;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="menu" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<nav>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="overlay-2">Hello, <br> this is the para that is still visible when you open the menu</div>
<div class="overlay"></div>
Or
You want single div with .overlay then write below line in css.
.overlay.is-visible {
color:transparent;
}

In the js code:
$("#menu").click(function() {
$(".nav").toggleClass('is-open');
$(".overlay").toggleClass('is-visible');
$(".overlay p").toggle('display');
$(this).toggleClass('open');
});
And in the html add p tag to content :
<div class="overlay"><p>Hello, <br> this is the para that is still visible when you open the menu</p></div>

We Keep Coding

JavaScript is the programming language of the Web.

Why must I click twice to open and close my menu - javascript

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'); ... }

Related

Angular 4+ Creating a Semi-Circular Nav Menu, Modular vs. Global CSS

Executing and formatting jQuery hamburger menu

my mega menu in safari not same as firefox and chrome.. weird css behaviour?

changing css class and a jquery function when it reaches a div

overlay issue with menu

Categories

Resources

We Keep Coding

JavaScript is the programming language of the Web.

Why must I click twice to open and close my menu - javascript

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'); ... }

Related

Angular 4+ Creating a Semi-Circular Nav Menu, Modular vs. Global CSS

Executing and formatting jQuery hamburger menu

my mega menu in safari not same as firefox and chrome.. weird css behaviour?

changing css class and a jquery function when it reaches a div

overlay issue with menu

Categories

Resources

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'); ... }