Input box wrong positioning in menu - javascript

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;
}

Related

Dropdown stays in the same place

The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>

You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>

Adding an animation at the end of a scrolled section

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>

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

Element width to match horizontal position of other element

Let's say we have a navigation div which contains elements. Below navigation div there is some bar that must expand to the width where it matches one of the navigation elements (3rd one in this case).
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
From this code, main_navigator_progression div must expand its width so it matches BTN 3.
You can see the concept here.
I've written a simple JS code, but it doesn't seem to be neat and doesn't always work:
function initializeProgressorPos() {
document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
Is there any way to create such a function that works even when browser is scaled? What could be wrong with my code? Is there any chance that this can be done with pure css?

As you have floatted the element to the right, first you have to get the width of document, then exclude the width from left of document to the right of element from that amount:
function initializeProgressorPos() {
var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
$("#main_navigator_progression").css({"width": elementRight + "px"});
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
body {
margin: 0;
overflow-y: scroll;
}
#main_navigator {
position: fixed;
background-color: black;
width: 100%;
}
#main_navigator_upper {
position: relative;
display: flex;
flex-direction: row;
}
#main_navigator_logo {
width: 416px;
height: 120px;
background-color: white;
}
#main_navigator_r1 {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
padding: 0;
padding-right: 5%;
text-align: center;
margin-top: 0px;
height: 98px;
list-style-type: none;
}
#main_navigator_r1 li {
flex-grow: 1;
flex-shrink: 1;
/* flex-basis: 0; */
flex-basis: auto; /* new */
}
#main_navigator_l1 {
flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
color: white;
display: block;
height: 100%;
font-family: "nexa_bold";
font-size: 0.9em;
text-decoration: none;
}
#main_navigator_s1 {
display: inline-block;
width: 2px;
height: 35px;
background-color: #B28039;
}
#main_navigator_regbox {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#main_navigator_regbox li {
display: inline-block;
flex-grow: 0.1;
flex-shrink: 0.1;
}
#regbox_signin {
display: block;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
color: #B28039;
font-size: 0.9em;
font-family: "nexa_light";
}
#regbox_signup {
display: block;
white-space: nowrap;
text-decoration: none;
color: white;
font-size: 0.9em;
font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
display: inline-block;
width: 1.4px;
height: 13.5px;
background-color: white;
}
#main_navigator_bottom {
background-color: black;
height: 24px;
}
#main_navigator_progression {
position: relative;
background-color: #B28039;
height: 100%;
width: 416px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
</body>
</html>

This is a proof of concept.
You can use a combination of a custom HTML5 data-* attribute and an ::after pseudo-element on your navigation menu (and a dash of javascript) to indicate which menu item you have most recently selected.
Despite the dash of javascript, most of the work is done using CSS.
Working Example:
var menu = document.querySelector('nav ul');
var menuItems = [... menu.getElementsByTagName('li')];
function selectMenu() {
menu.dataset.selectedMenu = (menuItems.indexOf(this) + 1);
}
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', selectMenu, false);
}
nav ul {
display: flex;
position: relative;
margin: 0;
padding: 0;
}
nav li {
flex: 0 0 60px;
padding: 12px 12px 24px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
list-style-type: none;
cursor: pointer;
}
nav ul::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
background-color: rgba(0, 0, 0, 0.5);
transition: width 0.6s linear;
}
nav ul[data-selected-menu="1"]::after {
width: 80px;
}
nav ul[data-selected-menu="2"]::after {
width: 160px;
}
nav ul[data-selected-menu="3"]::after {
width: 240px;
}
nav ul[data-selected-menu="4"]::after {
width: 320px;
}
nav ul[data-selected-menu="5"]::after {
width: 400px;
}
<nav>
<ul data-selected-menu="1">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>

Enable links of the menu when the default action was prevented

I have the following situation:
jQuery(document).ready(function($) {
"use strict";
function active_menu(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if (!$this.is(':animated')) { // to prevent double click issue
$this.toggleClass('active');
}
}
$(document).on('click', '.menu-item-has-children', active_menu);
});
nav {
position: relative;
display: inline-block;
top: auto;
overflow: visible;
background-color: transparent;
}
nav > ul {
list-style: none;
margin: 14px 0 0 0;
float: right;
position: relative;
}
nav > ul > li {
float: left;
min-width: 0;
position: relative;
}
nav > ul > li.menu-item-has-children:before {
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 7px;
height: 7px;
position: absolute;
right: -4px;
bottom: 7px;
background-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
nav > ul > li a {
color: #1c1c1c;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding-bottom: 4px;
margin: 0;
padding: 0 20px;
}
nav > ul > li span {
display: inline-block;
}
nav > ul ul {
display: none;
list-style: none;
position: absolute;
background: #fff;
border: 1px solid #e1e1e1;
margin: 0;
min-width: 200px;
margin-top: 33px;
z-index: 2001;
}
nav > ul > li > ul:before {
content: "";
display: block;
position: absolute;
width: 200px;
min-width: 200px;
height: 36px;
top: -36px;
left: 0;
z-index: 2004;
}
nav > ul li.active > ul {
display: block;
z-index: 2003;
}
nav > ul ul li {
position: relative;
}
nav > ul ul li a {
width: 100%;
text-align: left;
padding: 6px 13px 7px 13px;
}
nav > ul ul ul {
position: absolute;
left: 100%;
top: 0;
margin-left: 10px;
margin-top: 0;
z-index: 2002;
border: 1px solid #e1e1e1;
}
nav > ul ul ul:before {
position: absolute;
content: "";
top: 0;
left: -11px;
width: 11px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul id="main_menu">
<li id="nav-menu-item-1636" class="main-menu-item menu-first menu-item-type-custom menu-item-object-custom">
<a href="http://wpthemetestdata.wordpress.com/" class="menu-link main-menu-link">
<span>Home</span>
</a>
</li>
<li id="nav-menu-item-1637" class="main-menu-item">
<a href="#/?page_id=703" class="menu-link main-menu-link">
<span>Blog</span>
</a>
</li>
<li id="nav-menu-item-1638" class="main-menu-item">
<a href="#/?page_id=701" class="menu-link main-menu-link">
<span>Front Page</span>
</a>
</li>
<li id="nav-menu-item-1639" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=2" class="menu-link main-menu-link">
<span>About The Tests</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1697">
<a href="#/?page_id=1133" class="menu-link sub-menu-link">
<span>Page Image Alignment</span>
</a>
</li>
<li id="nav-menu-item-1698">
<a href="#/?page_id=1134" class="menu-link sub-menu-link">
<span>Page Markup And Formatting</span>
</a>
</li>
<li id="nav-menu-item-1640">
<a href="#/?page_id=501" class="menu-link sub-menu-link">
<span>Clearing Floats</span>
</a>
</li>
<li id="nav-menu-item-1641">
<a href="#/?page_id=155" class="menu-link sub-menu-link">
<span>Page with comments</span>
</a>
</li>
<li id="nav-menu-item-1642">
<a href="#/?page_id=156" class="menu-link sub-menu-link">
<span>Page with comments disabled</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1643" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=174" class="menu-link main-menu-link">
<span>Level 1</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1644" class=" menu-item-has-children has_children">
<a href="#/?page_id=173" class="menu-link sub-menu-link">
<span>Level 2</span>
</a>
<ul class="navi navi menu-depth-2">
<li id="nav-menu-item-1645" class=" navi ">
<a href="#/?page_id=172" class="menu-link sub-menu-link">
<span>Level 3</span>
</a>
</li>
<li id="nav-menu-item-1699" class=" navi ">
<a href="#/?page_id=746" class="menu-link sub-menu-link">
<span>Level 3a</span>
</a>
</li>
<li id="nav-menu-item-1700" class=" navi ">
<a href="#/?page_id=748" class="menu-link sub-menu-link">
<span>Level 3b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1701">
<a href="#/?page_id=742" class="menu-link sub-menu-link">
<span>Level 2a</span>
</a>
</li>
<li id="nav-menu-item-1702">
<a href="#/?page_id=744" class="menu-link sub-menu-link">
<span>Level 2b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1646" class="main-menu-item">
<a href="#/?page_id=146" class="menu-link main-menu-link">
<span>Lorem Ipsum</span>
</a>
</li>
<li id="nav-menu-item-1703" class="main-menu-item">
<a href="#/?page_id=733" class="menu-link main-menu-link">
<span>Page A</span>
</a>
</li>
<li id="nav-menu-item-1704" class="main-menu-item">
<a href="#/?page_id=735" class="menu-link main-menu-link">
<span>Page B</span>
</a>
</li>
</ul>
</nav>
The functionality is sort of ok - I click on the menu that has children, toggle the class active and the unsorted children list shows. But the problem is that when I click on the anchor in the child, the list closes and the links don't do anything because of e.preventDefault();.
Can this be sorted out? I tried unbinding the click, but that didn't work.

just use javascript to emulate anchor click with window.location.href = $(this).attr("href")

Categories