Develop Reference

Spacing between navbar and first section

When I start to scroll down, the section home moves down and in between is a weird space which I don't know how to get rid of.
Any tips on how to fix this problem?
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 18px;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 18px;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
#spacer {
height: 128px;
border-bottom: 4px solid;
}
#Home {
height: 1000px;
border-style: solid;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<div id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</div>
<div id="spacer"></div>
<section id="Home" class="section">
<p>Home</p>
</section>
<section id="UberUns" class="section">
<p>section 2</p>
</section>
<section id="Aktionen" class="section">
<p>section 3</p>
</section>
<section id="Terminvereinbarung" class="section">
<p>section 4</p>
</section>
<section id="Infos" class="section">
<p>section 5</p>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Something is creating a margin-top when you scroll down
try add:
#Home {
margin-top: 0 !important;
}

Looking at your code I found a couple of issues.
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}
st is defined to be the current scrolling position of your browser.
This is in your scrolling code, meaning as soon as st is bigger than navTop, it will set margin-top to navHeight. But the issue is that a little bit up you defined navTop as followed: var navTop = $('#navbar').offset().top;
navTop is always 0. Meaning that whenever you scroll any amount it will add the margin-top. I'd start there with finding your problem.
Andrea's solution is but a solution for a problem that you introduced yourself.

try add:
#Home {
margin-top: 0 !important;
}

disable selected and other objects in javascript

I have this door open/close script made from HTML, CSS, and JavaScript which I got from here.
My question is how can I disable/prevent from clicking/closing again the same selected door?
For example, I will click the first door it will disable what I clicked and will also disable the remaining doors. I want this because I need to trigger an ajax request after I've clicked on one of the doors.
My javascript code:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});
Demo from codepen:
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('.doorFrame').click(function(event){
console.log('click');
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
/*
// move the overlay
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
*/
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
}
.door img {
width:100%;
height:100%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.swing {
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.swing figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
background-color: brown;
width:80px;
height:130px;
}
.swing .back {
transform: rotateY( 180deg);
}
.swing:hover {
outline:3px solid white;
}
.swing.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
.popover {
position:absolute;
border:1px solid red;
width:200px;
height:200px;
background-color:#fff;
transition: transform .5s;
transition: box-shadow .5s;
transform:scale3d(0,0,0);
}
.popover.open {
transform:scale3d(1,1,1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
<figure class="back"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
</div>
</div>
</section>
<div class="popover">Surprise!</div>

Updated and fixed :
In JQuery you can just use the .off() method on the main to remove the click event.
Ex: $('section.container').off("click");
In pure javascript (vanilla) you can just use the removeEventListener() method.
Ex: document.querySelector('section.container').removeEventListener('click', function(event) {}, false);
You can take a look at my fixed CodePen.
for (var i = 1; i < 30; i++) {
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
}
$('section.container').on('click', '.doorFrame', (event) => {
$('section.container').off("click");
let doorFrame = $(event.currentTarget);
doorFrame.find('.swing').toggleClass('flipped');
});
body {
font-family:sans-serif;
}
.container {
background-color: tan;
perspective: 5000px;
margin: 100px;
}
.container:after {
content: "";
display: table;
clear: both;
}
.doorFrame {
width: 80px;
height: 130px;
margin: 10px;
float: right;
background-color:brown;
color:#fff;
padding:5px 5px 2px 5px;
}
.door {
width:100%;
height:100%;
text-align:center;
cursor:pointer;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
transition: transform .5s, box-shadow .5s;
transform-origin: right center;
}
.door:hover {
outline:3px solid white;
}
.door figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.door .front {
background-color:green;
width:80px;
height:130px;
}
.door .back {
transform: rotateY( 180deg);
}
.door img {
width:100%;
height:100%;
}
.door.flipped {
transform: rotateY( 120deg);
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container group">
<div class="doorFrame" id="c0">
<div class="door swing">
<figure class="front">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
<figure class="back">
<img src="http://www.sharecg.com/images/medium/11603.jpg">
</figure>
</div>
</div>
</section>

The simple solution is to just use one
-- edit --
Replaced .one with .on, anded a call to .off in the function handler to conform with your specifications
//edit - using on instead of one
$('.doorFrame').on('click',function(event){
console.log('click');
//edit - removing listener for all doorFrames
$('.doorFrame').off('click', this);
var doorFrame = $(event.currentTarget)
// open door
doorFrame.find('.swing').toggleClass('flipped');
// ajax code here
});

Only one out of five divs transitions correctly

After clicking the button the elements should move to their second positions. It only seems to work with the last element where I used !important which I don't want to use. Here is my code:
let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
myArray.forEach(function (item) {
if (item == myArray[0]) {
item.classList.add('run1');
} else if (item == myArray [4]) {
item.classList.add('run2');
} else {
item.classList.add('run');
}
});
});
body {
background-color: #302e2e;
font-size:22px;
}
#btn{
position: absolute;
left: 914px;
top: 180px;
}
.wrapper{
position: relative;
width:600px;
margin: 0 auto;
}
.container{
position:absolute;
top:250px;
width:0px;
}
.menu{
padding:5px;
border:1px solid #323232;
width:100px;
height:100px;
background:#46f4a0;
border-radius:20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2){
left:105px;
}
.menu:nth-child(3){
left:210px;
}
.menu:nth-child(4){
left:315px;
}
.menu:nth-child(5){
left:420px;
}
.run{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
top:110px;
}
.run1{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:-110px;
}
.run2{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:530px!important;
}
<button id="btn">
Kliknij
</button>
<div class="wrapper">
<div class="container ">
<div class="menu ">About</div>
<div class="menu ">My Projets</div>
<div class="menu ">Some stuff</div>
<div class="menu ">Werid shits</div>
<div class="menu ">Contact</div>
</div>
</div>
Thanks for your help

Like this? (complementary CodePen)
let menuItems = Array.from(document.querySelectorAll(".menu"));
document.getElementById("btn").addEventListener("click", function() {
menuItems[0].classList.add("run1");
menuItems[4].classList.add("run2");
menuItems.slice(1, 4).forEach(function(item) {
item.classList.add("run");
});
});
body {
background-color: #302e2e;
font-size: 22px;
}
#btn {
position: absolute;
left: 914px;
top: 180px;
}
.wrapper {
position: relative;
width: 600px;
margin: 0 auto;
}
.container {
position: absolute;
top: 250px;
width: 0px;
}
.menu {
padding: 5px;
border: 1px solid #323232;
width: 100px;
height: 100px;
background: #46f4a0;
border-radius: 20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2) {
left: 105px;
}
.menu:nth-child(3) {
left: 210px;
}
.menu:nth-child(4) {
left: 315px;
}
.menu:nth-child(5) {
left: 420px;
}
.menu.run {
opacity: 0;
transition: 3s ease-in-out;
transform: translateY(110px);
}
.menu.run1 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(-110px);
}
.menu.run2 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(110px);
}
<button id="btn">Kliknij</button>
<div class="wrapper">
<div class="container">
<div class="menu">About</div>
<div class="menu">My Projets</div>
<div class="menu">Some stuff</div>
<div class="menu">Werid shits</div>
<div class="menu">Contact</div>
</div>
</div>
Please also look into your CSS again. You should avoid working with absolute positioning and pixel values only since it will look different on every device.

U need to move transition to '.menu' and it should look like that:transition:3s transform ease-in-out;. And in '.run', '.run1', '.run2' when left replace with: transform: translateX(/*value*/px);. And when top replace with: transform: translateY(/*value*/px);.

Change Background on ID load

I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?

You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>

JS, Menu button works, external link doesnt

function transition() {
var divtran = document.getElementById('mobile_menu');
if (divtran.style.height == '100vh')
divtran.style.height = '0vh'
else
divtran.style.height = '100vh'
}
/*mobile Menu */
.mobilemenu{
z-index: 21;
margin-top: -80px;
margin-right: -7px;
position:relative;
width:50px;
height:40px;
border: 0px;
-webkit-transition:background .3s;
transition:background .3s
}
.mobilemenu span{
height:-2px;
top:20px;
left:10px;
right:10px;
position:absolute;
}
.mobilemenu span::after,.mobilemenu span::before{
position:absolute;
left:0;
height: 3px;
width:100%;
border-radius: 50px;
background-color: #232323;
content:"";
}
.mobilemenu_transition {
background-color: transparent;
}
/*transition code persec*/
.mobilemenu_transition span{
-webkit-transition:background 0s .3s;
transition:background 0s .3s;
}
.mobilemenu_transition span::after,.mobilemenu_transition span::before{
-webkit-transition-duration:.3s,.3s;
transition-duration:.3s,.3s;
-webkit-transition-delay:.3s,0s;
transition-delay:.3s,0s;
}
.mobilemenu_transition span::before{
-webkit-transition-property:top,-webkit-transform;
transition-property:top,transform;
}
.mobilemenu_transition span::after{
-webkit-transition-property:bottom,-webkit-transform;
transition-property:bottom,transform;
}
.mobilemenu_transition.act{
background-color: transparent;
}
.mobilemenu_transition.act span::before{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.mobilemenu_transition.act span::after{
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#mobile_menu {
width: 100%;
height: 0vh;
position: absolute;
z-index: 18;
background-color: orange;
overflow: hidden;
position: fixed;
background-color: #f3f3f3;
-webkit-transition-duration:.3s,.3s;
transition-duration:.3s,.3s;
-webkit-transition-delay:.3s,0s;
transition-delay:.3s,0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="mobile_menu">
<br /><br /><br />bottom
</div>
<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
</div></a>
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".mobilemenu");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("act") === true) ? this.classList.remove("act") : this.classList.add("act");
});
}
})();
</script>
</body>
</html>
https://github.com/Arxhtects/Css_menu_onepage
link above to the menu code. I cant seem to work out how to get an external link to not only close the menu div that appears after you have clicked the line but also remove the menu class "act" so that the animation reverts to its original state.
getting an external link to close the menu div that appears is easy. But I cant seem to make it remove the class "act" that the menu button does.
so basically it leaves the X there once you click on the link. I appreciate any help at all. thank you in advance :)
I'm sorry if I'm being vague, but can anyone help?

function transition() {
var divtran = document.getElementById('mobile_menu');
var mobileMenu = document.querySelectorAll(".mobilemenu");
var menuOpen = false;
if (divtran.style.height == '100vh') {
divtran.style.height = '0vh';
menuOpen = false;
}
else {
divtran.style.height = '100vh'
menuOpen = true;
}
for(var i=0;i<mobileMenu.length;i++){
if(menuOpen) {
mobileMenu[i].classList.add("act");
}
else {
mobileMenu[i].classList.remove("act");
}
}
}
/*mobile Menu */
.mobilemenu{
z-index: 21;
margin-top: -80px;
margin-right: -7px;
position:relative;
width:50px;
height:40px;
border: 0px;
-webkit-transition:background .3s;
transition:background .3s
}
.mobilemenu span{
height:-2px;
top:20px;
left:10px;
right:10px;
position:absolute;
}
.mobilemenu span::after,.mobilemenu span::before{
position:absolute;
left:0;
height: 3px;
width:100%;
border-radius: 50px;
background-color: #232323;
content:"";
}
.mobilemenu_transition {
background-color: transparent;
}
/*transition code persec*/
.mobilemenu_transition span{
-webkit-transition:background 0s .3s;
transition:background 0s .3s;
}
.mobilemenu_transition span::after,.mobilemenu_transition span::before{
-webkit-transition-duration:.3s,.3s;
transition-duration:.3s,.3s;
-webkit-transition-delay:.3s,0s;
transition-delay:.3s,0s;
}
.mobilemenu_transition span::before{
-webkit-transition-property:top,-webkit-transform;
transition-property:top,transform;
}
.mobilemenu_transition span::after{
-webkit-transition-property:bottom,-webkit-transform;
transition-property:bottom,transform;
}
.mobilemenu_transition.act{
background-color: transparent;
}
.mobilemenu_transition.act span::before{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.mobilemenu_transition.act span::after{
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#mobile_menu {
width: 100%;
height: 0vh;
position: absolute;
z-index: 18;
background-color: orange;
overflow: hidden;
position: fixed;
background-color: #f3f3f3;
-webkit-transition-duration:.3s,.3s;
transition-duration:.3s,.3s;
-webkit-transition-delay:.3s,0s;
transition-delay:.3s,0s;
}
<!DOCTYPE html>
<html lang="en">
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="mobile_menu">
<br /><br /><br />bottom
</div>
<a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button>
</div></a>
</body>
</html>