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

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

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

Related

How to make hover circular menu to toggle with javascript?

I need to make this circular menu with toggle instead of hover
i've tried https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show
but still it's not working and my circle position is really bad.
and this menu is from https://www.youtube.com/watch?v=4h9WH6YsMro&t=13s
My CSS :
body{
background-color: #f273ba;
font-family: tahoma;
overflow: hidden;
}
.navbar{
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background: white;
margin: 190px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 2.75em;
font-weight: bold;
color: #f273ba;
transition: 0.24s 0.2s;
}
.navbar .menu{
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: -75px;
left: -75px;
border: 150px solid transparent;
cursor: default;
border-radius: 50%;
transform: scale(0);
transition: transform 1.4s 0.07s;
z-index: -1;
}
.navbar .menu.active{
transition: transform 0.4s 0.08s, z-index 0s 0.5s;
transform: scale(1);
z-index: 1;
}
.navbar .menu li{
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
.navbar:active .menu li{
transition: all 0.7s;
}
.navbar .menu li a {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: white;
position: absolute;
font-size: 59%;
color: #f273ba;
transition: 0.7s;
}
.navbar:hover .menu li:nth-child(1){
transition-delay: 0.02s;
transform: rotate(85deg);
}
.navbar:hover .menu li:nth-child(1) a{
transition-delay: 0.04s;
transform: rotate(635deg);
}
.navbar:hover .menu li:nth-child(2){
transition-delay: 0.04s;
transform: rotate(125deg);
}
.navbar:hover .menu li:nth-child(2) a{
transition-delay: 0.08s;
transform: rotate(595deg);
}
.navbar:hover .menu li:nth-child(3){
transition-delay: 0.06s;
transform: rotate(165deg);
}
.navbar:hover .menu li:nth-child(3) a{
transition-delay: 0.12s;
transform: rotate(555deg);
}
.navbar:hover .menu li:nth-child(4){
transition-delay: 0.08s;
transform: rotate(205deg);
}
.navbar:hover .menu li:nth-child(4) a{
transition-delay: 0.16s;
transform: rotate(515deg);
}
.navbar:hover .menu li:nth-child(5){
transition-delay: 0.1s;
transform: rotate(245deg);
}
.navbar:hover .menu li:nth-child(5) a{
transition-delay: 0.2s;
transform: rotate(475deg);
}
.navbar:hover .menu li:nth-child(6){
transition-delay: 0.12s;
transform: rotate(285deg);
}
.navbar:hover .menu li:nth-child(6) a{
transition-delay: 0.24s;
transform: rotate(435deg);
}
.navbar:hover .menu li:nth-child(7){
transition-delay: 0.14s;
transform: rotate(325deg);
}
.navbar:hover .menu li:nth-child(7) a{
transition-delay: 0.28s;
transform: rotate(395deg);
}
.navbar:hover .menu li:nth-child(8){
transition-delay: 0.16s;
transform: rotate(365deg);
}
.navbar:hover .menu li:nth-child(8) a{
transition-delay: 0.32s;
transform: rotate(355deg);
}
.navbar:hover .menu li:nth-child(9){
transition-delay: 0.18s;
transform: rotate(405deg);
}
.navbar:hover .menu li:nth-child(9) a{
transition-delay: 0.36s;
transform: rotate(315deg);
}
a,a:active {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular menu onclick</title>
<link rel='stylesheet' href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">MENU
<ul class="menu" onclick="click()">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

use this for toggle onclick so you basically need to use toogle and querySelector instead and you need to change the :hover to .active
btw this is my first account for people who try to answered thank you <3
<script type="text/javascript">
function toggleMenu() {
var navigation = document.querySelector(".navbar");
var menuToggle = document.querySelector(".toggle");
var menu = document.querySelector(".menu");
navigation.classList.toggle("active");
menuToggle.classList.toggle("active");
menu.classList.toggle('active');
}
</script>

How to hide/show the menu using classList toogle

I am creating an interactive hamburger button that shows and hides the menu. what I am trying to achieve here is when I click the hamburger button, the menu shows up and when I click transformed "X" button, the menu hides itself vice versa. I would appreciate tips. Thank you so much.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

You have done everything except connect those two. You just need to add the following CSS:
.menu {
display: none;
}
.change + .menu {
display: block;
}
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
display: none;
}
.change + .menu {
display: block;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>
Bonus
If you want a nice fading animation, you can also use opacity.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
opacity: 0;
transition: opacity 0.5s linear;
}
.change + .menu {
opacity: 1;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Please try this code
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -7px);
transform: rotate(45deg) translate(-8px, -7px);
}
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
max-height: 0;
padding: 0;
}
.change + .menu {
max-height: 500px;
}
.change + .menu,
.change ,
.menu {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Why must I click twice to open and close my menu

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

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

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

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

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

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

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

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>

align sections side by side

I have tried several attempts to align the section & main to sit side by side? by using a display of inline-block and floating <section> to the left etc. But I am unsuccessful, any help as to what I am doing wrong here would be greatly appreciated :-)
jQuery(document).ready(function($) {
//on mobile - open/close primary navigation clicking/tapping the menu icon
$('.cd-primary-nav').on('click', function(event) {
if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
});
//upload videos if not on mobile
uploadVideo($('.cd-hero-slider'));
//change visible slide
$('.cd-slider-nav li').on('click', function(event) {
event.preventDefault();
var selectedItem = $(this);
if (!selectedItem.hasClass('selected')) {
// if it's not already selected
var selectedPosition = selectedItem.index(),
activePosition = $('.cd-hero-slider .selected').index();
if (activePosition < selectedPosition) {
nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
} else {
prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
}
updateNavigationMarker(selectedPosition + 1);
}
});
function nextSlide(container, pagination, n) {
var visibleSlide = container.find('.selected'),
navigationDot = pagination.find('.selected');
visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
visibleSlide.removeClass('is-moving');
});
container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
navigationDot.removeClass('selected')
pagination.find('li').eq(n).addClass('selected');
checkVideo(visibleSlide, container, n);
}
function prevSlide(container, pagination, n) {
var visibleSlide = container.find('.selected'),
navigationDot = pagination.find('.selected');
visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
visibleSlide.removeClass('is-moving');
});
container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
navigationDot.removeClass('selected');
pagination.find('li').eq(n).addClass('selected');
checkVideo(visibleSlide, container, n);
}
function uploadVideo(container) {
container.find('.cd-bg-video-wrapper').each(function() {
var videoWrapper = $(this);
if (videoWrapper.is(':visible')) {
// if visible - we are not on a mobile device
var videoUrl = videoWrapper.data('video'),
video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' + videoUrl + '.webm" type="video/webm" /></video>');
video.appendTo(videoWrapper);
}
});
}
function checkVideo(hiddenSlide, container, n) {
//check if a video outside the viewport is playing - if yes, pause it
if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause();
//check if the select slide contains a video element - if yes, play the video
if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0).play();
}
function updateNavigationMarker(n) {
$('.cd-marker').removeClassPrefix('item').addClass('item-' + n);
}
$.fn.removeClassPrefix = function(prefix) {
//remove all classes starting with 'prefix'
this.each(function(i, el) {
var classes = el.className.split(" ").filter(function(c) {
return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = $.trim(classes.join(" "));
});
return this;
};
});
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* --------------------------------
Primary style
-------------------------------- */
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #2c343b;
background-color: #f2f2f2;
}
a {
color: #d44457;
text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Main Components
-------------------------------- */
/* --------------------------------
Slider
-------------------------------- */
.cd-hero {
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-hero-slider {
position: relative;
height: 360px;
overflow: hidden;
}
.cd-hero-slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-hero-slider li.selected {
/* this is the visible slide */
position: relative;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider li.move-left {
/* slide hidden on the left */
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
/* the is-moving class is assigned to the slide which is moving outside the viewport */
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
#media only screen and (min-width: 768px) {
.cd-hero-slider {
height: 500px;
}
}
#media only screen and (min-width: 1170px) {
.cd-hero-slider {
height: 680px;
}
}
/* --------------------------------
Single slide style
-------------------------------- */
.cd-hero-slider li {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.cd-hero-slider li:first-of-type {
background-color: #2c343b;
}
.cd-hero-slider li:nth-of-type(2) {
background-color: #3d4952;
background-image: url("../assets/tech-1-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(3) {
background-color: #586775;
background-image: url("../assets/tech-2-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(4) {
background-color: #2c343b;
background-image: url("../assets/video-replace-mobile.jpg");
}
.cd-hero-slider li:nth-of-type(5) {
background-color: #2c343b;
background-image: url(../assets/img.jpg);
}
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
/* this padding is used to align the text */
padding-top: 100px;
text-align: center;
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.cd-hero-slider .cd-img-container {
/* hide image on mobile device */
display: none;
}
.cd-hero-slider .cd-img-container img {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider .cd-bg-video-wrapper {
/* hide video on mobile device */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cd-hero-slider .cd-bg-video-wrapper video {
/* you won't see this element in the html, but it will be injected using js */
display: block;
min-height: 100%;
min-width: 100%;
max-width: none;
height: auto;
width: auto;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.cd-hero-slider h2,
.cd-hero-slider p {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
line-height: 1.2;
margin: 0 auto 14px;
color: #ffffff;
width: 90%;
max-width: 400px;
}
.cd-hero-slider h2 {
font-size: 2.4rem;
}
.cd-hero-slider p {
font-size: 1.4rem;
line-height: 1.4;
}
.cd-hero-slider .cd-btn {
display: inline-block;
padding: 1.2em 1.4em;
margin-top: .8em;
background-color: transparent;
border: 1px solid white;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff;
text-transform: uppercase;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-hero-slider .cd-btn.secondary {
background-color: rgba(22, 26, 30, 0.8);
}
.cd-hero-slider .cd-btn:nth-of-type(2) {
margin-left: 1em;
}
.no-touch .cd-hero-slider .cd-btn:hover {
background-color: #d44457;
}
.no-touch .cd-hero-slider .cd-btn.secondary:hover {
background-color: #161a1e;
}
#media only screen and (min-width: 768px) {
.cd-hero-slider li: nth-of-type(2) {
background-image: none;
}
.cd-hero-slider li:nth-of-type(3) {
background-image: none;
}
.cd-hero-slider li:nth-of-type(4) {
background-image: none;
}
.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
padding-top: 150px;
}
.cd-hero-slider .cd-bg-video-wrapper {
display: block;
}
.cd-hero-slider .cd-half-width {
width: 45%;
}
.cd-hero-slider .cd-half-width:first-of-type {
left: 5%;
}
.cd-hero-slider .cd-half-width:nth-of-type(2) {
right: 5%;
left: auto;
}
.cd-hero-slider .cd-img-container {
display: block;
}
.cd-hero-slider h2,
.cd-hero-slider p {
max-width: 520px;
}
.cd-hero-slider h2 {
font-size: 2.4em;
font-weight: 300;
}
.cd-hero-slider .cd-btn {
font-size: 1.4rem;
}
}
#media only screen and (min-width: 1170px) {
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
padding-top: 220px;
}
.cd-hero-slider h2,
.cd-hero-slider p {
margin-bottom: 20px;
}
.cd-hero-slider h2 {
font-size: 3.2em;
}
.cd-hero-slider p {
font-size: 1.6rem;
}
}
/* --------------------------------
Single slide animation
-------------------------------- */
#media only screen and (min-width: 768px) {
.cd-hero-slider .cd-half-width {
opacity: 0;
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
}
.cd-hero-slider .move-left .cd-half-width {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-ms-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
}
.cd-hero-slider .selected .cd-half-width {
/* this is the visible slide */
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider .is-moving .cd-half-width {
/* this is the slide moving outside the viewport
wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
-webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
-moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
/* this is the selected slide - different animation if it's entering from left or right */
-webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
-moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
/* this is the selected slide - different animation if it's entering from left or right */
-webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
-moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}
.cd-hero-slider .cd-full-width h2,
.cd-hero-slider .cd-full-width p,
.cd-hero-slider .cd-full-width .cd-btn {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
.cd-hero-slider .move-left .cd-full-width h2,
.cd-hero-slider .move-left .cd-full-width p,
.cd-hero-slider .move-left .cd-full-width .cd-btn {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
.cd-hero-slider .selected .cd-full-width h2,
.cd-hero-slider .selected .cd-full-width p,
.cd-hero-slider .selected .cd-full-width .cd-btn {
/* this is the visible slide */
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-hero-slider li.is-moving .cd-full-width h2,
.cd-hero-slider li.is-moving .cd-full-width p,
.cd-hero-slider li.is-moving .cd-full-width .cd-btn {
/* this is the slide moving outside the viewport
wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
-webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
-moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected h2 {
-webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
-moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected p {
-webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
-moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
}
.cd-hero-slider li.selected .cd-btn {
-webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
-moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
}
}
/* --------------------------------
Slider navigation
-------------------------------- */
.cd-slider-nav {
position: absolute;
width: 100%;
bottom: 0;
z-index: 2;
text-align: center;
height: 55px;
background-color: rgba(0, 1, 1, 0.5);
}
.cd-slider-nav nav,
.cd-slider-nav ul,
.cd-slider-nav li,
.cd-slider-nav a {
height: 100%;
}
.cd-slider-nav nav {
display: inline-block;
position: relative;
}
.cd-slider-nav .cd-marker {
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 100%;
color: #d44457;
background-color: #ffffff;
box-shadow: inset 0 2px 0 currentColor;
-webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s;
-moz-transition: -moz-transform 0.2s, box-shadow 0.2s;
transition: transform 0.2s, box-shadow 0.2s;
}
.cd-slider-nav .cd-marker.item-2 {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-slider-nav .cd-marker.item-3 {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
.cd-slider-nav .cd-marker.item-4 {
-webkit-transform: translateX(300%);
-moz-transform: translateX(300%);
-ms-transform: translateX(300%);
-o-transform: translateX(300%);
transform: translateX(300%);
}
.cd-slider-nav .cd-marker.item-5 {
-webkit-transform: translateX(400%);
-moz-transform: translateX(400%);
-ms-transform: translateX(400%);
-o-transform: translateX(400%);
transform: translateX(400%);
}
.cd-slider-nav ul::after {
clear: both;
content: "";
display: table;
}
.cd-slider-nav li {
display: inline-block;
width: 60px;
float: left;
}
.cd-slider-nav li.selected a {
color: #2c343b;
}
.no-touch .cd-slider-nav li.selected a:hover {
background-color: transparent;
}
.cd-slider-nav a {
display: block;
position: relative;
padding-top: 35px;
font-size: 1rem;
font-weight: 700;
color: #a8b4be;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-slider-nav a::before {
content: '';
position: absolute;
width: 24px;
height: 24px;
top: 8px;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background: url(../assets/cd-icon-navigation.svg) no-repeat 0 0;
}
.no-touch .cd-slider-nav a:hover {
background-color: rgba(0, 1, 1, 0.5);
}
.cd-slider-nav li:first-of-type a::before {
background-position: 0 0;
}
.cd-slider-nav li.selected:first-of-type a::before {
background-position: 0 -24px;
}
.cd-slider-nav li:nth-of-type(2) a::before {
background-position: -24px 0;
}
.cd-slider-nav li.selected:nth-of-type(2) a::before {
background-position: -24px -24px;
}
.cd-slider-nav li:nth-of-type(3) a::before {
background-position: -48px 0;
}
.cd-slider-nav li.selected:nth-of-type(3) a::before {
background-position: -48px -24px;
}
.cd-slider-nav li:nth-of-type(4) a::before {
background-position: -72px 0;
}
.cd-slider-nav li.selected:nth-of-type(4) a::before {
background-position: -72px -24px;
}
.cd-slider-nav li:nth-of-type(5) a::before {
background-position: -96px 0;
}
.cd-slider-nav li.selected:nth-of-type(5) a::before {
background-position: -96px -24px;
}
#media only screen and (min-width: 768px) {
.cd-slider-nav {
height: 80px;
}
.cd-slider-nav .cd-marker,
.cd-slider-nav li {
width: 95px;
}
.cd-slider-nav a {
padding-top: 48px;
font-size: 1.1rem;
text-transform: uppercase;
}
.cd-slider-nav a::before {
top: 18px;
}
}
/* --------------------------------
Main content
-------------------------------- */
.cd-main-content {
width: 100%;
max-width: 768px;
margin: 0 auto;
padding: 2em 0;
display: inline-block;
}
.cd-main-content p {
font-size: 1.4rem;
line-height: 1.8;
color: #999999;
margin: 2em 0;
}
#media only screen and (min-width: 1170px) {
.cd-main-content {
padding: 3em 0;
}
.cd-main-content p {
font-size: 1.6rem;
}
}
/* --------------------------------
Javascript disabled
-------------------------------- */
.no-js .cd-hero-slider li {
display: none;
}
.no-js .cd-hero-slider li.selected {
display: block;
}
.no-js .cd-slider-nav {
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section class="cd-hero">
<ul class="cd-hero-slider">
<li class="selected">
<div class="cd-full-width">
Like what I do? Let me know
</div>
<!-- .cd-full-width -->
<div class="cd-bg-video-wrapper" data-video="assets/video/video">
<!-- video element will be loaded using jQuery -->
<img src=[!["http://blog.franceandson.com/wp-content/uploads/2015/02/marilyn-monroe-by-andy-warhol-medium.jpg"][1]][1] alt="" width=1200/>
</div>
<!-- .cd-bg-video-wrapper -->
</li>
<li>
<div class="cd-full-width">
<div id="container">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<p>Send me a message</p>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message'></textarea>
</fieldset>
</div>
Send
</div>
<!-- .cd-half-width -->
</li>
<li>
<div class="cd-full-width">
Thank you
</div>
<!-- .cd-full-width -->
<div class="cd-bg-video-wrapper" data-video="assets/video/video">
<!-- video element will be loaded using jQuery -->
<img src=[!["http://www.therealbest.com/img/items/big/587/Turquoise-Marilyn_The-Head-of-Marilyn_789.jpg"][1]][1] alt="" </div>
<!-- .cd-half-width -->
</li>
</ul>
<!-- .cd-hero-slider -->
<div class="cd-slider-nav">
<nav>
<span class="cd-marker item-1"></span>
<ul>
<li class="selected">Intro</li>
<li>Tech 1</li>
<li>Tech 2</li>
</ul>
</nav>
</div>
<!-- .cd-slider-nav -->
</section>
<!-- .cd-hero -->
<main class="cd-main-content">
<p>I'd love to hear from you.</p>
</main>
<!-- .cd-main-content -->

Here's one quick and simple way:
In your CSS...
Remove position: absolute from .cd-full-width.
Add body { display: flex; }
Add width: 100% to .cd-hero.
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For my first suggestion, i would wrap both elements in a container:
<div class="hero-main-container">
<section class="cd-hero">[...]</section>
<main class="cd-main-content">[...]</main>
</div>
and then in your css, add the following:
.hero-main-container {
display: flex;
flex-direction: row;
}
.cd-hero, cd-main-content {
width: 50%;
}
If wrapping them in a container is not an option, positioning them side-by-side would be a second option:
//css
.cd-hero {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
}
.cd-main-content {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
}

We Keep Coding

JavaScript is the programming language of the Web.

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

Related

How to make hover circular menu to toggle with javascript?

How to hide/show the menu using classList toogle

Why must I click twice to open and close my menu

overlay issue with menu

align sections side by side

Categories

Resources