Develop Reference

How to change the showing section with javascript

i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>

You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

How to achieve a card slide in animation?

Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?

Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>

Responsive navigation box

I made a navigation bar with CSS animation and javascript. But I could not make it responsive. I want the navigation bar animation to be none when the window is resized less than 700px and the animation should appear if it is greater than 700px.That means the transform property of three-d-box :hover on css paart must be hidden when window is resized to 700px.The navigation bar code is below;
$('.block-menu').find('a').each(function(){
var el = $(this),
elText = el.text();
el.addClass("three-d");
el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});
.container {
width: match-parent;
padding: 12px ;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: #fc0;
text-decoration:none;
}
.block-menu {
width:fit-content;
height:fit-content;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
font-family: 'Righteous', cursive;
overflow: visible;
width:fit-content;
height: fit-content;
font-size: 1.6vw;
padding: 15px 10px;
margin-left:auto;
margin-right:auto;
margin-top:1px;
margin-bottom:1px;
}
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all 0.3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius:15%;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
.back {
background: #d05ce8;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div id="navbox">
<div class="container" id="navbar">
<ul class="block-menu"><b>
<li >Gifts Corner</li>
<li >Our activities</li>
<li >Inspiration</li>
<li >Education</li>
<li >About us</li>
</ul></b>
</div>

Changing CSS panel to 100% width creates jumpy jQuery scroll

I'm trying to link the nav bar list items to transition a scroll to specific panels on the page. After making adjustment to the CSS to make all panel backgrounds (.maincontent) 100% page width the scroll effect no longer works...
CSS:
/****Landscape****/
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: #000000;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus,
a:hover {
color: #e6e8eb;
cursor: pointer;
transition: color 0.5s ease;
width: inherit;
right: 0;
left: 0;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*Maincontent*/
.maincontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
/*----/----Maincontent*/
/*contact panel*/
.letmeknow:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
.letmeknow {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
/*Contact submit Form*/
#container {
width: 840px;
margin: 25px auto;
}
.whysign {
float: left;
background-color: white;
width: 480px;
height: 347px;
border-radius: 0 5px 5px 0;
padding-top: 20px;
padding-right: 20px;
}
.signup {
float: left;
width: 300px;
padding: 30px 20px;
background-color: white;
text-align: center;
border-radius: 5px 0 0 5px;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0, 0, 0, .4);
}
input[type="submit"] {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
input[type="submit"]:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
[type='text']:focus {
outline: none;
border-color: #53CACE;
}
span:hover {
color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
}
.links {
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float: left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor: pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float: left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float: right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top,
#toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});
HTML:
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner">
<p>Work Title 1</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner">
<p>Work Title 2</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner">
<p>Work Title 3</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner">
<p>Work Title 4</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner">
<p>Work Title 5</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner">
<p>Work Title 6</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel8">
<div class="inner">
<P>Like what I do?</P>
<p>Let me know</p>
<div id='container'>
<div class='signup'>
<p> Send me a message </p>
<form>
<input type='text' placeholder='First:' />
<input type='text' placeholder='Last:' />
<input type='text' placeholder='Email:' />
<input type='text' placeholder='Phone:' />
<input type='submit' placeholder='SUBMIT' />
</form>
</div>
</div>
<div class="thank you">
<p>Thank you for your message!</p>
</div>
</div>
</div>
<div class="panel multiplepanels" id="panel9">
<div class="inner">
<p>Social</p>
</div>
</div>
</div>
<footer>
<div class="panel panel-blank" id="panel10">
<div class="inner"> © 2015 thiswebsite.com</div>
</div>
</footer>

It is caused by giving .maincontent absolute positioning. This makes html not be the full height of the document. And the script relies on this for the transition. So here are a few changes to make :
Demo
Take a way the dot from body (sidenote) :
.body {
...
}
Remove positioning here :
.maincontent {
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
And then box-sizing on this element to remove the horizontal scrollbar :
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}