Adding an animation at the end of a scrolled section

Adding an animation at the end of a scrolled section - javascript

I made this web page. There are 3 sections #sidebar, #postbar and #content and they have their own scroll. I'd like to add an animation that lets users know that they reached the end of a section.
I could be searching with wrong keywords, but most information is either about animation-as-scroll thing with a library such as AOS or jQuery solution to jump to the top or the bottom. Is there any native way to add such an animation with just javascript or maybe a simple css library?

You should try Intersection Obeserver :) Its pretty well supported now.
const mySections = document.querySelectorAll('.section');
observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
console.log('in the view');
} else {
console.log('out of view. FIRE EVENT!');
}
});
});
mySections.forEach(image => {
observer.observe(image);
});

You can check the scroll position compare to the offset height
var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('scroll', function(e) {
if( e.target.scrollTop >= (e.target.scrollHeight - e.target.offsetHeight))
{
if (this.classList.contains('animate')) {
document.querySelector('#sidebar li:last-child').classList.remove('animate');
}
document.querySelector('#sidebar li:last-child').classList.add('animate');
}
});
.animate{
color: #ffffff;
-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
#-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Sidebar</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'>
<link rel="shortcut icon" href="#">
<!-- <script src="{{ url_for('static', filename='script.js')}}"></script> -->
<!-- Font Awesome JS -->
<script>
console.log('default')
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function(e) {
console.log(window.scrollY);
console.log(e.target);
if(e.target.tagName == 'ul'){
if( e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight))
{
alert('done');
}
}
});
var postlist = document.getElementsByClassName("postlist");
var showPost = function() {
console.log('CLICKED')
var ps ='';// {{ postSource|safe }};
var idOfPost = this.id;
var iframe = document.getElementById("serviceFrameSend")
iframe.setAttribute("src", ps[idOfPost])
};
for (var i = 0; i < postlist.length; i++) {
postlist[i].addEventListener('click', showPost, false)
}
});
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
</script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
</script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
<style>
/*
DEMO STYLE
*/
/*#import "https://fonts.googleapis.com/css?family=Menlo:300,400,500,600,700";*/
/* definition */
/* #font-face {
font-family: Menlo;
src: url('fonts/Menlo.ttc');
font-weight: normal;
font-style: normal;
} */
#import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
body {
/* font-family: 'Menlo', sans-serif; */
font-family: 'Fira Sans', sans-serif;
background: #2B3137;
overflow:hidden;
height: 100%;
}
p {
font-family: 'Fira Sans', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: #C7C7C7; /*원래inherit*/
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 0px dashed #ddd;
margin: 40px 0;
}
/* -------------------------------F--------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
height : 100px;
align-items: stretch;
}
#sidebar {
background: #2B3137;
color: #fff;
transition: all 0.3s;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
width : 190px;
padding : 10px;
}
#notebook_title{
padding:20px;
text-align:center;
border-bottom: 0.0px solid #2B3137;
box-shadow: 0 0.1px 0 #C7C7C7;
color:#C7C7C7;
}
#postbar {
width : 240px;
background: #2B3137;
color: #fff;
transition: all 0.3s;
border-right: 0.1px solid #2A3446;
border-left: 0.1px solid #2A3446;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
margin-left:190px;
padding : 10px 10px 10px 0px;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
margin : 2px 0px 5px 0px;
}
#posttbar .postbar-header {
padding: 20px;
background: #6d7fcc;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
#sidebar ul.components {
padding: 0px 0;
border-bottom: 0px solid #47748b; /*색깔지움*/
}
#postbar ul.components {
/* padding: 20px 0; */
border-bottom: 0px solid #47748b;/*색깔지움*/
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#postbar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
color:#C7C7C7;
}
#postbar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
height : 60px; /*포스트바블록사이즈*/
list-style-type:none;
color:#C7C7C7;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
/*bullet제거*/
/* #postbar li {
list-style-type:none;
} */
#sidebar ul li a:hover {
color: #7386D5;
background: #fff; /*움직일때 색깔*/
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content{
width: 100%;
/* padding: 20px; */
/* min-height : 1000px; */
height: 100vh;
transition: all 0.3s;
background-color:#2B3137;
margin-left:420px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: 0px; /* 원래 -250 */
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>HEADER</h3>
</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- POST BAR -->
<nav id="postbar">
<div id="notebook_title">{{currNoteBook}}</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
Some Contents
</div>
</div>
<!-- partial -->
</body>
</html>

Related

how to toggle or change HTML class name using JavaScript

I try to change the color of the navigation bar when the theme change button is clicked.
This is HTML code
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>
Javascript code
const themeChange = () => {
const navElements = document.getElementsByClassName("main-nav-link");
// console.log("nav: " + navElements.length);
for (let i = 0; i <= navElements.length; i++) {
console.log(document.getElementsByClassName("main-nav-link")[i]);
document.getElementsByClassName("main-nav-link")[i].className =
"main-nav-link-summer";
}
}
I'm trying to change the class name from "main-nav-link" to "main-nav-link-summer" so the color for active, hover can be changed. But weirdly, only the first and third tags are changed and the second remains the same. The length of the "navElements" variable is 3.
CSS code
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}

in javascript that's the easiest way, for what you wanna achieve I'm not exactly sure.
const navElements = document.querySelectorAll(".main-nav-link");
navElements.forEach((link) => {
link.classList.add("main-nav-link-summer");
});
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

I'd suggest a different approach all together. Going through and doing mass class name changes is really sub-optimal for dev and maintenance. Perhaps consider an approach like the example below instead as a simple proof of concept using separated css var themes so as you build you don't think about such things and can handle a design system much more flexibly without piling on lots of unnecessary extra code. Cheers.
const htmlEl = document.documentElement;
// set a detault or read their saved selection from localstorage or whatever.
htmlEl.dataset.theme = 'default';
// set the new selectiong when made.
toggleTheme = (theme) => htmlEl.dataset.theme = theme;
html[data-theme="default"] {
--body-bg: #f1f1f1;
--body-color: #000;
--btn-color: #212121;
--btn-bg: #fff;
--btn-hover-color: #a63ec5;
--btn-hover-bg: #ddd;
}
html[data-theme="summer"] {
--body-bg: lightblue;
--body-color: #000;
--btn-color: darkgreen;
--btn-bg: lightyellow;
--btn-hover-color: #1d4116;
--btn-hover-bg: #f1f1f1;
}
html[data-theme="winter"] {
--body-bg: #333;
--body-color: #fff;
--btn-color: #f1f1f1;
--btn-bg: #212121;
--btn-hover-color: lightblue;
--btn-hover-bg: #555;
}
html {
color: var(--body-color);
background-color: var(--body-bg);
}
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link {
text-decoration: none;
display: inline-block;
color: var(--btn-color);
background-color: var(--btn-bg);
padding: .25rem 1rem;
border-radius: 5px;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-list li:not(:last-child) {
margin-right: 1.5rem;
}
.main-nav-link:hover,
.main-nav-link:active {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg);
}
<br>
<strong>Choose your theme:</strong>
<select id="mySelect" onchange="toggleTheme(this.value)">
<option value="default">Default</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>
<br><hr><br>
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

I want to close this side bar by clicking same button

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Sidebar</button>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
The sidebar opens the contents when I click the button, and it closes the sidebar when I click the
x mark placed at right to in the sidebar. However I want to close this sidebar using same button when I used to open. However I also want to keep the x mark in the sidebar. I have idea that if the sidebar is opened it can be closed by clicking same button.

try this,
Here toggleclass() used to toggle open class while clicking both of one ☰ Sidebar or x button.
Add new style in css
#mySidebar.open{ width:250px; }
#main.open{ margin-left:250px; }
Add change in html code
In both of click() event call OpenOrClose() function.
×
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>
Result:
function OpenOrClose() {
document.getElementById("mySidebar").classList.toggle("open");
document.getElementById("main").classList.toggle("open");
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
#mySidebar.open{width:250px;}
#main.open{margin-left:250px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled bg-info text-white">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed text-white">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>About</li>
<li>Blog</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>
</div>
</body>
</html>

Toggle a class instead of change the style properties and doing this you only need a single function, so I called it toggleNav.
New CSS:
#mySidebar.active{
width: 250px;
}
#main.active{
margin-left: 250px;
}
New Javascript:
function toggleNav() {
document.getElementById("mySidebar").classList.toggle("active");
document.getElementById("main").classList.toggle("active");
}
Update your HTML by replacing all of your onclicks with: onclick="toggleNav()"

use js toggle function
add class toggleBtn anywhere do you want .. it will work...
document.querySelectorAll(".toggleBtn").forEach(function(el){
el.addEventListener('click',function(e){
e.preventDefault();
document.getElementById("mySidebar").classList.toggle('width');
document.getElementById("main").classList.toggle('margin');
})
})
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.width{
width: 250px;
}
.margin{
margin-left:250px;
}
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="openbtn toggleBtn" >×</a>
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn toggleBtn" >☰ Sidebar</button>
</div>

Just add a little (and easy) javascript to change the attribute.
In the openNav() function, add a line which turns the onclick to closeNav().
Also, add an id to the button so that you will be able to change the attribute, specific for the button you want.
<button id="btn123" class="openbtn" onclick="openNav()">☰ Sidebar</button>
<!-- adding id -->
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("btn123").setAttribute("onclick", "closeNav()");
// add this line to set the attribute
}
and also do the opposite: in the closeNav() function, set the onclick attribute to openNav() like this:
document.getElementById("btn123").setAttribute("onclick", "openNav()");

You can do this without the usage of a helper class in this situation, and by merging both functions into one function named manageNav(). Here is an example:
function manageNav() {
document.getElementById("mySidebar").style.width == "0px" || document.getElementById("mySidebar").style.width == 0 ? document.getElementById("mySidebar").style.width = "250px" : document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft == "0px" || document.getElementById("main").style.marginLeft == 0 ? document.getElementById("main").style.marginLeft = "250px" : document.getElementById("main").style.marginLeft = "0px";
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="mySidebar" class="sidebar">
×
<ul class="list-unstyled">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="manageNav()">☰ Sidebar</button>
</div>

You can do what #imvain2 said.
Or you can do what #php123 said: change the value of onclick property to "closeNav()" when it is clicked to open, and change it to "openNav()" when it is clicked to close.
Let's say your button has id="sideBarBtn"
then,
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "closeNav()");
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
//extra line down here
document.getElementById("sideBarBtn").setAttribute("onclick" , "openNav()");
}

change megamenu from click event to hover

I have a megamenu and I want to change the click event to hover event. When you hover the "All Categories" to be able to display the submenu.
For now the example is working only for click. You have to click the "All Categories" to display all the categories.
I have tried to change the event:
$('.categorie-title').hover(function () {
$('.vertical-menu-list').slideToggle();
});
but when you go with the mouse on a category ex: "IT" all the megamenu is closing.
How can i make the megamenu work from click to hover ?
$(document).ready(function() {
$('.categorie-title').on('click', function () {
$('.vertical-menu-list').slideToggle();
});
});
li {
list-style: none;
}
.vertical-menu {
width: 100%;
position: relative;
}
.vertical-menu > span {
background: #03A9F4 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0;
padding: 14px 30px 12px;
position: relative;
text-transform: uppercase;
height: 49px;
}
.vertical-menu > span::after, .search-box-view .submit::before {
content: "";
font-family: FontAwesome;
font-size: 18px;
font-weight: normal;
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
}
.has-mega-menu {
line-height: 43px;
float: left;
padding: 0;
background-color: #3e3e3e;
width: 220px;
}
.vertical-menu-list {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 0 25px;
position: absolute;
top: 100%;
width: 100%;
z-index: 999;
border: 2px solid #03A9F4;
border-top-width: 0;
}
.vertical-menu-list > li {
position: relative;
}
.vertical-menu-list > li > a, .category-menu li a {
color: #333;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 19px;
overflow-wrap: break-word;
padding: 17px 0;
position: relative;
text-align: left;
text-transform: capitalize;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-menu-list > li span, .category-sub li span {
display: inline-block;
width: 35px;
}
.vertical-menu-list > li:hover ul.ht-dropdown {
visibility: visible;
-webkiit-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.vertical-menu-list > li ul.megamenu {
background: #fff none repeat scroll 0 0;
border: 1px solid #e5e5e3;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
left: 100%;
padding: 10px;
top: 0;
width: 905px;
}
.vertical-menu-list .ht-dropdown:before {
background-color: #fff;
border-color: #f1f1f1 transparent transparent #f1f1f1;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 1px;
content: "";
display: block;
height: 15px;
left: -8px;
position: absolute;
top: 21px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 15px;
}
.vertical-menu-list > li:nth-child(n) > a:after {
content: "\f107";
font-family: 'FontAwesome';
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.vertical-menu-list > li:nth-child(n):hover > a:after {
-wekit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.has-mega-menu a:hover {
color: #03A9F4;
white-space: normal;
text-decoration: none;
}
.fix {
overflow: hidden;
}
.ht-dropdown {
background: #fff;
left: 0;
opacity: 0;
padding: 10px 20px;
position: absolute;
top: 100%;
-webkiit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
width: 150px;
text-align: left;
visibility: hidden;
z-index: 99999999;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.sub-menu.mega-menu {
left: 100%;
padding: 0;
top: 0;
background-color: #ffffff;
}
.sub-menu.mega-menu .row .mega-col {
display: inline-block;
position: relative;
vertical-align: top;
width: 20%;
height: 100%;
overflow: hidden;
}
.sub-menu.mega-menu .mega-content:last-child {
border: medium none;
margin-bottom: 0;
padding-bottom: 0;
}
.sub-menu.mega-menu .mega-item-title {
font-size: 13px;
font-family: sans-serif;
text-align: left;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
ul.menu {
float: left;
}
.megamenu ul {
position: relative;
margin: 0;
padding: 0 15px;
}
.has-mega-menu ul.menu > li.menu-item {
width: 100%;
float: none;
text-align: left;
padding: 0 0 0 10px;
}
.main-menu ul li a, .megamenu ul li a {
display: block;
line-height: 1.5;
font-size: 12px;
}
.menu-hidden {
display: none;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 hidden-xs">
<div class="vertical-menu">
<span class="categorie-title">All Categories </span>
<nav class="has-mega-menu">
<ul class="vertical-menu-list menu-hidden">
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-leaf"></i></span>IT</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Components
<ul class="menu">
<li class="menu-item">Motherboards</li>
<li class="menu-item">Memories</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Software
<ul class="menu">
<li class="menu-item">Windows</li>
<li class="menu-item">Office</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-black-tie"></i></span>Fashion</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Shoes
<ul class="menu">
<li class="menu-item">Some Shoes</li>
<li class="menu-item">Another Shoes</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Dresses
<ul class="menu">
<li class="menu-item">Dresses 1</li>
<li class="menu-item">Dresses 2</li>
<li class="menu-item">Dresses 3</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

You can add mouseenter and mouseleave as per below to act like hover
$(document).ready(function() {
$('.categorie-title').on('mouseenter', function () {
$('.vertical-menu-list').slideDown();
});
$('.vertical-menu').on('mouseleave', function () {
$('.vertical-menu-list').slideUp();
});
});
li {
list-style: none;
}
.vertical-menu {
width: 100%;
position: relative;
}
.vertical-menu > span {
background: #03A9F4 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0;
padding: 14px 30px 12px;
position: relative;
text-transform: uppercase;
height: 49px;
}
.vertical-menu > span::after, .search-box-view .submit::before {
content: "";
font-family: FontAwesome;
font-size: 18px;
font-weight: normal;
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
}
.has-mega-menu {
line-height: 43px;
float: left;
padding: 0;
background-color: #3e3e3e;
width: 220px;
}
.vertical-menu-list {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 0 25px;
position: absolute;
top: 100%;
width: 100%;
z-index: 999;
border: 2px solid #03A9F4;
border-top-width: 0;
}
.vertical-menu-list > li {
position: relative;
}
.vertical-menu-list > li > a, .category-menu li a {
color: #333;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 19px;
overflow-wrap: break-word;
padding: 17px 0;
position: relative;
text-align: left;
text-transform: capitalize;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-menu-list > li span, .category-sub li span {
display: inline-block;
width: 35px;
}
.vertical-menu-list > li:hover ul.ht-dropdown {
visibility: visible;
-webkiit-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.vertical-menu-list > li ul.megamenu {
background: #fff none repeat scroll 0 0;
border: 1px solid #e5e5e3;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
left: 100%;
padding: 10px;
top: 0;
width: 905px;
}
.vertical-menu-list .ht-dropdown:before {
background-color: #fff;
border-color: #f1f1f1 transparent transparent #f1f1f1;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 1px;
content: "";
display: block;
height: 15px;
left: -8px;
position: absolute;
top: 21px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 15px;
}
.vertical-menu-list > li:nth-child(n) > a:after {
content: "\f107";
font-family: 'FontAwesome';
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.vertical-menu-list > li:nth-child(n):hover > a:after {
-wekit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.has-mega-menu a:hover {
color: #03A9F4;
white-space: normal;
text-decoration: none;
}
.fix {
overflow: hidden;
}
.ht-dropdown {
background: #fff;
left: 0;
opacity: 0;
padding: 10px 20px;
position: absolute;
top: 100%;
-webkiit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
width: 150px;
text-align: left;
visibility: hidden;
z-index: 99999999;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.sub-menu.mega-menu {
left: 100%;
padding: 0;
top: 0;
background-color: #ffffff;
}
.sub-menu.mega-menu .row .mega-col {
display: inline-block;
position: relative;
vertical-align: top;
width: 20%;
height: 100%;
overflow: hidden;
}
.sub-menu.mega-menu .mega-content:last-child {
border: medium none;
margin-bottom: 0;
padding-bottom: 0;
}
.sub-menu.mega-menu .mega-item-title {
font-size: 13px;
font-family: sans-serif;
text-align: left;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
ul.menu {
float: left;
}
.megamenu ul {
position: relative;
margin: 0;
padding: 0 15px;
}
.has-mega-menu ul.menu > li.menu-item {
width: 100%;
float: none;
text-align: left;
padding: 0 0 0 10px;
}
.main-menu ul li a, .megamenu ul li a {
display: block;
line-height: 1.5;
font-size: 12px;
}
.menu-hidden {
display: none;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 hidden-xs">
<div class="vertical-menu">
<span class="categorie-title">All Categories </span>
<nav class="has-mega-menu">
<ul class="vertical-menu-list menu-hidden">
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-leaf"></i></span>IT</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Components
<ul class="menu">
<li class="menu-item">Motherboards</li>
<li class="menu-item">Memories</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Software
<ul class="menu">
<li class="menu-item">Windows</li>
<li class="menu-item">Office</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-black-tie"></i></span>Fashion</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Shoes
<ul class="menu">
<li class="menu-item">Some Shoes</li>
<li class="menu-item">Another Shoes</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Dresses
<ul class="menu">
<li class="menu-item">Dresses 1</li>
<li class="menu-item">Dresses 2</li>
<li class="menu-item">Dresses 3</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Well, it required that you modify the javascript source of the menu.
So it should look something like this.
<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li> Products
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Downloads
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Holy Cannoli
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Applications
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Projects
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Holy Cannoli
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Freeware
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Utilities</h4>
<ul>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
and the code after beautifying and changes
var cbpHorizontalMenu = (function () {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on("mouseover", a);
b.on("mouseover", function (h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
d = h;
c.off("click").on("click", e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
$(function () {
cbpHorizontalMenu.init();
});
on jsfiddle

auto showing and hiding navigation bar

Hi I'm trying to implement a auto show and hide navigation menu. I'm not sure how I would implement this idea. The idea I'm wanting is so the navbar slips away out of site above the website and when the cursor hovers over the top the nav bar appears. (A better example is (if you own a Mac) the idea comes from the Dock when auto hidden).
Would I use a .CSS transition or a JQuery/Javascript to implement this.
Heres the navbar I'm working with,
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background-color: #a137a7;
font-family:'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family:'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
<li><a href=/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"><img class="blog"
src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
<li style="float:right"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li>
<li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
</ul>
</nav>
<body>

I would use the nav to slide up and down. See my code:
I've added a red border to the nav, so you can see it (for demo).
$(function() {
$('.hover').on('mouseenter mouseleave', function() {
$('nav').toggleClass('toggleNav');
});
});
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
.hover {
width: 50px;
height: 50px;
background: lightblue;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<div class="hover">Hover here</div>

This Is An Example Of Your Requirement Please Try Once
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
if(y<=50){
document.getElementById("navBar").style.display = 'block';
}
else{
document.getElementById("navBar").style.display = 'none';
}
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
}
.nav{
width:100%;
height:50px;
background:#00ffff;
display:none;
}
<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>
</div>
<p id="demo"></p>

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<body>

Input box wrong positioning in menu

I tried to add an input box to the most right side of the bar on the same line as those menu bars, but everytime its positioned bad or its not even there. Can you help me with this? It needs to be in the menu bar because of my JS hide-on-scroll function. I'm trying to use JQuery-ui's
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML:
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}

check this fiddle. what i did was, made your nav display as block. and centered it with margin:auto. then added the text bar next to it. made it float and with margin-top i moved it up so it's in right place.
<body>
<!--MENU BAR!-->
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
<input type="text" class="tib" />
</nav>
body,nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* menu*/
nav {
display: inline-block;
position: fixed;
width: 100%;
/* text-align: center; */
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav ul > li > a{
text-align:center;
}
ul.nav{
margin:auto;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
/* display: inline-block; */
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tib{
float:right;
margin-top:-28px;
}

We Keep Coding

JavaScript is the programming language of the Web.

Adding an animation at the end of a scrolled section - javascript

Related

how to toggle or change HTML class name using JavaScript

I want to close this side bar by clicking same button

change megamenu from click event to hover

auto showing and hiding navigation bar

Input box wrong positioning in menu

Categories

Resources