Make active hyperlinks opaque and others transparent - javascript

I want to give some style to my active hyperlink in navigation by making the active one opaque and others transparent.
The opacity value and other styles are exactly the same with my hover styling. When I hover on the hyperlinks the hovered element becomes opaque and the others become transparent. I want exactly the same thing for the active hyperlink, but I don't know why it's not working.
Any help will be appreciated.
$(document).ready(function() {
$('#header-nav ul li').on('click', '#header-nav ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
#header-nav {
background-color: yellow;
color: var(--our-dark-color);
justify-content: space-between;
height: 70px;
background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
width: 100%;
margin: 0 auto;
transition: .4s ease-out;
animation: nav-load var(--nav-load-time) ease-in;
align-items: center;
z-index: 10000;
}
#header-nav ul li {
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
margin: 0 auto;
transition: .4s ease-out;
animation-name: nav-link-load;
animation-duration: var(--nav-link-load-time);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: scale(0);
}
#header-nav ul li.active {
opacity: .5;
}
nav .mainMenu li a {
font-weight: bold;
color: var(--our-dark-color);
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
#header-nav:hover li:not(:hover) {
opacity: .5;
}
#keyframes nav-link-load {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Home">
<div class="container-fluid">
<div class="row">
<nav id="header-nav">
<ul class="mainMenu">
<li class="active">test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</nav>
</div>
</div>
</div>


I've changed the transform: scale to 1.
Your issue came from the way you set up the eventListener.
This is what you've written:
$(document).ready(function() {
$('#header-nav ul li').on('click', '#header-nav ul li', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
What you need is this:
$(document).ready(function() {
$('#header-nav ul li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
I removed the parameter that you entered after 'click', since you don't need it. You've already specified the element that you want to add the eventListener to at the beginning of the line.
I've also changed the CSS a bit to keep both the active element opaque, and the element being hovered over. If you don't want this, you don't need to make any changes to your CSS. Just fix the JS statement.
Here's a snippet of the changes:
$(document).ready(function() {
$('#header-nav ul li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active')
});
});
#header-nav {
background-color: yellow;
color: var(--our-dark-color);
justify-content: space-between;
height: 70px;
background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
width: 100%;
margin: 0 auto;
transition: .4s ease-out;
animation: nav-load var(--nav-load-time) ease-in;
align-items: center;
z-index: 10000;
}
#header-nav ul li {
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
margin: 0 auto;
transition: .4s ease-out;
animation-name: nav-link-load;
animation-duration: var(--nav-link-load-time);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: scale(1);
opacity: 0.5;
}
#header-nav ul li.active {
opacity: 1; //This has been modified
}
nav .mainMenu li a {
font-weight: bold;
color: var(--our-dark-color);
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
#header-nav ul li:hover {
opacity: 1; //This is new
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Home">
<div class="container-fluid">
<div class="row">
<nav id="header-nav">
<ul class="mainMenu">
<li class="active">test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</nav>
</div>
</div>
</div>

Related

CSS/HTML | Whats the best way to move signup to the bottom of the menu? [duplicate]

This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Closed 2 years ago.
How can I move "Sign up" to the bottom of the nav bar.
It looks like mobilemenu margin is taking priority. I am not 100% sure how to fix this
I have tried multiple things such as symbols like this > and +. Additionally, I tried moving the margin edits to each class "main" and "account" but the mobilemenu is the navbar itself.
HTML:
<style>
<%#include file="../css/header/header.css" %>
</style>
<!-- Mobile Navigation -->
<script>var checkbox = document.querySelector('#myInput');
var icon = document.querySelector('#menuToggle span');
var listener = function (e) {
if (e.target != checkbox && e.target != icon) {
checkbox.checked = false;
document.removeEventListener('click', listener);
}
};
checkbox.addEventListener('click', function () {
if (this.checked) {
document.addEventListener('click', listener);
}
});
</script>
<header>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" id="myInput"/>
<span></span>
<span></span>
<span></span>
<ul class="mobilemenu">
<li>About Me</li>
<li>Experience</li>
<li>Projects</li>
<li>About Me</li>
<li>Experience</li>
<li>Projects</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
</header>
CSS:
/* Mobile Menu */
body {
background: #1F2833;
font-family: 'Source Sans Pro', sans-serif;
color: #66FCF1;
}
#menuToggle {
display: block;
position: relative;
top: 20px;
left: 20px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
padding: 6px 4px 1.5px 4px;
}
#menuToggle a {
text-decoration: none;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: #45A29E;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #0b0C10;
border-radius: 1px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #66FCF1;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.mobilemenu {
width: 8.7rem;
height: 100%;
margin: -80px -20px 0 -35px;
padding: 25px;
padding-top: 75px;
padding-bottom: 20px;
background: #0b0C10;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
position: fixed;
vertical-align: middle;
}
.mobilemenu li {
padding: 10px 0;
padding-left: 20px;
font-size: 22px;
}
.mobilemenu .main{
color: #66FCF1;
}
#menuToggle .account{
color: #66FCF1;
padding-top: 200px;
}
#menuToggle input:checked ~ ul {
transform: none;
}

use span tag like:
<li> <span class="myaccount"> <a href="#projects" >Sign Up</a></span> </li>
or P tag:
<li> <p class="myaccount"><a href="#projects" >Sign Up</a></p></li>
change this
#menuToggle .account{
color: #66FCF1;
padding-top: 200px;
}
TO:
.myaccount{
color: #66FCF1;
padding-top: 60px;
}
you can edit padding or margin.

.account{
position: absolute;
bottom:0;
}

You simply can try this code:
.mobilemenu li:last-child{
position:absolute;
bottom:1rem;
left:2rem;
}
This will work fine.
If you want to try flex-box. You can do it using below Code:
.mobilemenu {
width: 8.7rem;
height: 90vh;
/* margin: -80px -20px 0 -35px; */
padding: 25px;
padding-bottom: 20px;
background: #0b0c10;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
/* transform: translate(-100%, 0); */
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
position: fixed;
vertical-align: middle;
display: flex;
flex-direction: column;
}
.mobilemenu li:nth-child(6) {
flex: 1;
}
<header>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" id="myInput"/>
<span></span>
<span></span>
<span></span>
<ul class="mobilemenu">
<li>About Me</li>
<li>Experience</li>
<li>Projects</li>
<li>About Me</li>
<li>Experience</li>
<li>Projects</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
</header>

CSS menu underline slide without javascript?

I created a pen that has a nice slide effect between elements in menu.
<ul>
<li id="home"><a>home</a></li>
<li id="libra"><a>libra</a></li>
<li id="libra2"><a>libra22</a></li>
<div class="line"></div>
</ul>
ul {
list-style: none;
padding: 0;
background: black;
color: white;
}
ul li {
display: inline-block;
}
ul li:first-child {
margin-left: 0;
}
ul li a {
width: 100px;
text-align: center;
display: block;
}
.line {
width: 100px;
height: 5px;
background: red;
transition: all 500ms ease-in-out;
}
#libra:hover ~ div {
margin-left: 100px;
}
https://codepen.io/anon/pen/vPxmZV
However, that only works forwards, not backwards and it's not dynamic, you pre-set the margin amount of the underline to slide with transition.
Is there a way to make it work forwards and backwards, and be dynamic without javascript?
and if not, what would be the best clean way with javascript?
Explained
For example, currently it's hardcoded, so if you hover #libra your underline will go right by 100px, so currently I need to add that case for every element in the array, for example the next element will be margin left 200px, etc.

I have created it using Translate property:
Without hardcoding you'll have to use javascript with alot of calculations
nav {
height: 50px;
font-size: 20px;
padding: 10px;
width: 100%;
z-index: 1;
background:black;
}
nav ul,
nav li,
nav a {
display: inline;
text-decoration: none;
list-style: none;
outline: none;
color: ghostwhite;
}
nav ul:hover,
nav li:hover,
nav a:hover {
color: white;
text-decoration: none;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(3):hover ~ .line,
nav li:nth-child(3):hover ~ .line,
nav a:nth-child(3):hover ~ .line {
-webkit-transform: translate(240px);
transform: translate(240px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(4):hover ~ .line,
nav li:nth-child(4):hover ~ .line,
nav a:nth-child(4):hover ~ .line {
-webkit-transform: translate(340px);
transform: translate(340px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(5):hover ~ .line,
nav li:nth-child(5):hover ~ .line,
nav a:nth-child(5):hover ~ .line {
-webkit-transform: translate(450px);
transform: translate(450px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav li {
margin: 0 20px;
display: inline-block;
}
nav ul {
position: absolute;
right: 20px;
}
nav .line {
margin-top: 5px;
width: 120px;
height: 3px;
background-color: white;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Quota</li>
<li>About</li>
<li>Contact</li>
<div class="line"></div>
</ul>
</div>
</nav>

How to apply the same JQuery to two navs and add a different class for each nav

I implemented this Vertical Fixed Navigation from Codyhouse into my site and everything works fine. The problem is with the fixed main-nav I have on top of the page (i.e. two navs in total, one on top and one vertical).
I would like to make both navigations behave the same, i.e. smooth scrolling and toggling class depending on scroll position, with a specific addClass for each nav.
I tried to select the links elements from both navs this way:
var navigationItems = $('#cd-vertical-nav a', '#main-nav a')
but it didn't work. As a matter of fact, in the snippet below the JQuery isn't working too. Dunno why :) But in my site the vertical nav works fine.
I am still a noob coder and new at StackOverflow. I would really appreciate any help!
jQuery(document).ready(function($) {
var contentSections = $('.cd-section'),
navigationItems = $('#cd-vertical-nav a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//smooth scroll to second section
$('.arrow-down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//open-close navigation on touch devices
$('.touch .cd-nav-trigger').on('click', function() {
$('.touch #cd-vertical-nav').toggleClass('open');
});
//close navigation on touch devices when selectin an elemnt from the list
$('.touch #cd-vertical-nav a').on('click', function() {
$('.touch #cd-vertical-nav').removeClass('open');
});
function updateNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('is-selected');
} else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate({
'scrollTop': target.offset().top - 120
},
1500, 'easeOutExpo'
);
}
});
.main-header-container {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
header {
background: DarkGray;
}
a {
text-decoration: none;
color: white;
}
li {
list-style-type: none;
}
.menu {
line-height: 1.5;
margin: auto;
}
.menu,
.menu__list {
padding: 0;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
color: white;
text-transform: uppercase;
letter-spacing: 2.3px;
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
display: block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
margin: 0 1em;
padding: 0.75em 0;
text-align: center;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu__link:hover,
.menu__link:focus {
outline: none;
color: yellow;
}
.menu__item--current .menu__link {
color: yellow;
}
.menu__link::before {
content: '';
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
background: yellow;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
}
.menu__item--current .menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/****Vertical Nav Styles****/
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
z-index: 9999;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
#cd-vertical-nav li {
text-align: right;
}
#cd-vertical-nav a {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: white;
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.3s;
transition: transform 0.5s, background-color 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 1.3px;
font-weight: 400;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.cd-section {
height: 400px;
}
#landing-section {
background: DarkCyan;
}
#biography-section {
background: CornflowerBlue;
}
#recordings-section {
background: OrangeRed;
}
#gallery-section {
background: Coral;
}
#contact-section {
background: MediumPurple;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="main-header-container">
<header>
<nav class="menu clearfix" id="main-nav">
<ul class="menu__list">
<li class="menu__item menu__item--current" id="news">
<a class="menu__link" href="#landing-section" data-number="1">News</a>
</li>
<li class="menu__item" id="biography">
<a class="menu__link" href="#biography-section" data-number="2">Biography</a>
</li>
<li class="menu__item" id="recordings">
<a class="menu__link" href="#recordings-section" data-number="3">Recordings</a>
</li>
<li class="menu__item" id="gallery">
<a class="menu__link" href="#gallery-section" data-number="4">Gallery</a>
</li>
<li class="menu__item" id="contact">
<a class="menu__link" href="#contact-section" data-number="5">Contact</a>
</li>
</ul>
</nav>
</header>
</div>
<nav id="cd-vertical-nav">
<ul>
<li id="vertical-nav1">
<a href="#landing-section" data-number="1">
<span class="cd-dot"></span>
<span class="cd-label">News</span>
</a>
</li>
<li id="vertical-nav2">
<a href="#biography-section" data-number="2">
<span class="cd-dot"></span>
<span class="cd-label">Biography</span>
</a>
</li>
<li id="vertical-nav3">
<a href="#recordings-section" data-number="3">
<span class="cd-dot"></span>
<span class="cd-label">Recordings</span>
</a>
</li>
<li id="vertical-nav4">
<a href="#gallery-section" data-number="4">
<span class="cd-dot"></span>
<span class="cd-label">Gallery</span>
</a>
</li>
<li id="vertical-nav5">
<a href="#contact-section" data-number="5">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<section id="landing-section" class="cd-section"></section>
<section id="biography-section" class="cd-section"></section>
<section id="recordings-section" class="cd-section"></section>
<section id="gallery-section" class="cd-section"></section>
<section id="contact-section" class="cd-section"></section>

To select multiple elements, you put them in a single selector string, separated by commas, not separate arguments to the jQuery() function.
var navigationItems = $('#cd-vertical-nav a, #main-nav a');
When you call jQuery with multiple arguments, the first argument is a selector, and the second argument is the context to search within, i.e.
$('#cd-vertical-nav a', '#main-nav a')
is equivalent to
$('#main-nav a').find('#cd-vertical-nav a')
Another way you can do this in a more general way is to use a class.
<nav class="menu clearfix fixed-nav" id="main-nav">
<nav class="fixed-nav" id="cd-vertical-nav">
Then you can use $('.fixed-nav a').

You need to use the mutliplse selector syntax
navigationItems = $('#cd-vertical-nav a, #main-nav a')
If you pass the second selector as a separate argument, then it will be considered as a context parameter
jQuery(document).ready(function($) {
var contentSections = $('.cd-section'),
navigationItems = $('#cd-vertical-nav a, #main-nav a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//smooth scroll to second section
$('.arrow-down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//open-close navigation on touch devices
$('.touch .cd-nav-trigger').on('click', function() {
$('.touch #cd-vertical-nav').toggleClass('open');
});
//close navigation on touch devices when selectin an elemnt from the list
$('.touch #cd-vertical-nav a').on('click', function() {
$('.touch #cd-vertical-nav').removeClass('open');
});
function updateNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('is-selected');
} else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
console.log('x', target.get())
$('body,html').animate({
'scrollTop': target.offset().top - 120
},
1500, 'easeOutExpo'
);
}
});
.main-header-container {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
header {
background: DarkGray;
}
a {
text-decoration: none;
color: white;
}
li {
list-style-type: none;
}
.menu {
line-height: 1.5;
margin: auto;
}
.menu,
.menu__list {
padding: 0;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
color: white;
text-transform: uppercase;
letter-spacing: 2.3px;
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
display: block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
margin: 0 1em;
padding: 0.75em 0;
text-align: center;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu__link:hover,
.menu__link:focus {
outline: none;
color: yellow;
}
.menu__item--current .menu__link {
color: yellow;
}
.menu__link::before {
content: '';
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
background: yellow;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
}
.menu__item--current .menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/****Vertical Nav Styles****/
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
z-index: 9999;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
#cd-vertical-nav li {
text-align: right;
}
#cd-vertical-nav a {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: white;
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.3s;
transition: transform 0.5s, background-color 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 1.3px;
font-weight: 400;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.cd-section {
height: 400px;
}
#landing-section {
background: DarkCyan;
}
#biography-section {
background: CornflowerBlue;
}
#recordings-section {
background: OrangeRed;
}
#gallery-section {
background: Coral;
}
#contact-section {
background: MediumPurple;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="main-header-container">
<header>
<nav class="menu clearfix" id="main-nav">
<ul class="menu__list">
<li class="menu__item menu__item--current" id="news">
<a class="menu__link" href="#landing-section" data-number="1">News</a>
</li>
<li class="menu__item" id="biography">
<a class="menu__link" href="#biography-section" data-number="2">Biography</a>
</li>
<li class="menu__item" id="recordings">
<a class="menu__link" href="#recordings-section" data-number="3">Recordings</a>
</li>
<li class="menu__item" id="gallery">
<a class="menu__link" href="#gallery-section" data-number="4">Gallery</a>
</li>
<li class="menu__item" id="contact">
<a class="menu__link" href="#contact-section" data-number="5">Contact</a>
</li>
</ul>
</nav>
</header>
</div>
<nav id="cd-vertical-nav">
<ul>
<li id="vertical-nav1">
<a href="#landing-section" data-number="1">
<span class="cd-dot"></span>
<span class="cd-label">News</span>
</a>
</li>
<li id="vertical-nav2">
<a href="#biography-section" data-number="2">
<span class="cd-dot"></span>
<span class="cd-label">Biography</span>
</a>
</li>
<li id="vertical-nav3">
<a href="#recordings-section" data-number="3">
<span class="cd-dot"></span>
<span class="cd-label">Recordings</span>
</a>
</li>
<li id="vertical-nav4">
<a href="#gallery-section" data-number="4">
<span class="cd-dot"></span>
<span class="cd-label">Gallery</span>
</a>
</li>
<li id="vertical-nav5">
<a href="#contact-section" data-number="5">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<section id="landing-section" class="cd-section"></section>
<section id="biography-section" class="cd-section"></section>
<section id="recordings-section" class="cd-section"></section>
<section id="gallery-section" class="cd-section"></section>
<section id="contact-section" class="cd-section"></section>

Try this one
var navigationItems = $('#cd-vertical-nav>a', '#main-nav>a');

I tried to change the jQuery (see the updated snippet) in order to add a class to the active link of each nav, based on scroll position.
There must be a problem here (also somewhere else?):
updateMainNavigation()
updateVerticalNavigation()
Here they are comma separated but I also tried to write two complete different functions, even if the behaviour is the same. I can't figure out what I should do to make it work.
I am the same noob as yesterday and any help ist most welcome!
jQuery(document).ready(function($) {
var contentSections = $('.cd-section'),
navigationItems = $('.fixed-nav a');
updateMainNavigation(), updateVerticalNavigation();
$(window).on('scroll', function() {
updateMainNavigation(), updateVerticalNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
//smooth scroll to second section
$('.arrow-down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateMainNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('#main-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('menu__item--current');
} else {
navigationItems.eq(activeSection).removeClass('menu__item--current');
}
});
}
function updateVerticalNavigation() {
contentSections.each(function() {
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
navigationItems.eq(activeSection).addClass('is-selected');
} else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate({
'scrollTop': target.offset().top - 120
},
1500, 'easeOutExpo'
);
}
});
.main-header-container {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
header {
background: DarkGray;
}
a {
text-decoration: none;
color: white;
}
li {
list-style-type: none;
}
.menu {
line-height: 1.5;
margin: auto;
}
.menu,
.menu__list {
padding: 0;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
color: white;
text-transform: uppercase;
letter-spacing: 2.3px;
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
display: block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
margin: 0 1em;
padding: 0.75em 0;
text-align: center;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu__link:hover,
.menu__link:focus {
outline: none;
color: yellow;
}
.menu__item--current .menu__link {
color: yellow;
}
.menu__link::before {
content: '';
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 2px;
background: yellow;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
}
.menu__item--current .menu__link::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/****Vertical Nav Styles****/
#cd-vertical-nav {
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
z-index: 9999;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
#cd-vertical-nav li {
text-align: right;
}
#cd-vertical-nav a {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav .cd-dot {
position: relative;
top: 8px;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: white;
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.5s;
transition: background-color 0.5s, transform 0.5s, -webkit-transform 0.3s;
transition: transform 0.5s, background-color 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.3s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 1.3px;
font-weight: 400;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.cd-section {
height: 400px;
}
#landing-section {
background: DarkCyan;
}
#biography-section {
background: CornflowerBlue;
}
#recordings-section {
background: OrangeRed;
}
#gallery-section {
background: Coral;
}
#contact-section {
background: MediumPurple;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="main-header-container">
<header>
<nav class="menu clearfix" id="main-nav">
<ul class="menu__list">
<li class="menu__item menu__item--current" id="news">
<a class="menu__link" href="#landing-section" data-number="1">News</a>
</li>
<li class="menu__item" id="biography">
<a class="menu__link" href="#biography-section" data-number="2">Biography</a>
</li>
<li class="menu__item" id="recordings">
<a class="menu__link" href="#recordings-section" data-number="3">Recordings</a>
</li>
<li class="menu__item" id="gallery">
<a class="menu__link" href="#gallery-section" data-number="4">Gallery</a>
</li>
<li class="menu__item" id="contact">
<a class="menu__link" href="#contact-section" data-number="5">Contact</a>
</li>
</ul>
</nav>
</header>
</div>
<nav id="cd-vertical-nav">
<ul>
<li id="vertical-nav1">
<a href="#landing-section" data-number="1">
<span class="cd-dot"></span>
<span class="cd-label">News</span>
</a>
</li>
<li id="vertical-nav2">
<a href="#biography-section" data-number="2">
<span class="cd-dot"></span>
<span class="cd-label">Biography</span>
</a>
</li>
<li id="vertical-nav3">
<a href="#recordings-section" data-number="3">
<span class="cd-dot"></span>
<span class="cd-label">Recordings</span>
</a>
</li>
<li id="vertical-nav4">
<a href="#gallery-section" data-number="4">
<span class="cd-dot"></span>
<span class="cd-label">Gallery</span>
</a>
</li>
<li id="vertical-nav5">
<a href="#contact-section" data-number="5">
<span class="cd-dot"></span>
<span class="cd-label">Contact</span>
</a>
</li>
</ul>
</nav>
<section id="landing-section" class="cd-section"></section>
<section id="biography-section" class="cd-section"></section>
<section id="recordings-section" class="cd-section"></section>
<section id="gallery-section" class="cd-section"></section>
<section id="contact-section" class="cd-section"></section>

CSS3 (or jQuery) Background Color Animation Vertically from Center of div

I'm trying to create an effect like the right nav on this site:
http://dianabobar.com/
With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of studying how it's done. I'm not really sure what to search for. I was thinking something like 'background radial animation jquery' or 'background color animation from center jquery.'
I also considered a CSS3 ease-in like they've detailed here (Expand background from center (CSS / Javascript)). The problem is that the answer on this question is only showing the CSS3 transition working horizontal when I'll need it to work vertically. I've worked with the JSFiddle that they were using on the answer (http://jsfiddle.net/SNzgs/) but I can only seem to get the transition to animate going down from the top and not out from the center. The code they have is:
.redline {background:red;height:10px;width:0;margin:auto;}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
The code I tried was:
.redline {background:red;height:0px;width:10px;margin:auto;}
.container:hover .redline {
height:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Thanks for your help!

My solution is similar to that of by matewka, but uses both :before and :after pseudo-elements. The example markup is as follow:
<nav>
<ul>
<li>Link</li>
</ul>
</nav>
For the CSS:
nav ul {
list-style: none;
width: 6em;
}
nav ul li {
background-color: #eee;
position: relative;
}
nav ul li:before,
nav ul li:after {
background-color: #333;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%; /* Vertically positions pseudo elements in the center */
bottom: 50%; /* Vertically positions pseudo elements in the center */
transition: all .125s ease-in-out;
z-index: 50;
}
nav ul li a {
color: #333;
display: block;
padding: .5em 1em;
position: relative;
z-index: 100;
transition: all .125s ease-in-out;
}
nav ul li a:hover {
color: #eee;
}
nav ul li:hover:before {
top: 0; /* Forces :before to stretch to fill top half */
}
nav ul li:hover:after {
bottom: 0; /* Forces :after to stretch to fill bottom half */
}
http://jsfiddle.net/teddyrised/rRtmB/

You can easily do it with :after pseudo element and absolute positioning. Then you can combine height and top properties of that shading box.
I made a completely new fiddle: http://jsfiddle.net/SNzgs/5/ since yours was built to do the job horizontaly.
.container:after {
content: "";
display: block;
background: #ccc;
width: 100%;
height: 0;
top: 0.5em;
position: absolute;
left: 0;
transition: all 1s ease-out;
}
.container:hover:after {
top: 0;
height: 100%;
}

You can use the :after pseudo element to create the animating background:
CSS
ul {
margin: 0;
padding: 0;
}
ul > li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul > li > a {
display: block;
padding: 10px;
color: #000000;
text-decoration: none;
position: relative;
z-index: 10;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover > a {
color: #ffffff;
}
ul > li:after {
content: " ";
position: absolute;
top: 50%;
bottom: 50%;
left: 0;
right: 0;
background: #353535;
z-index: 0;
-webkit-transition: all 400ms;
transition: all 400ms;
}
ul > li:hover:after {
top: 0;
bottom: 0;
}
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Demo

This works (though I'm not sure this is exactly what you want):
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:0;width:200px;margin:auto; top:5px;position:relative;}
.container:hover .redline {
height:10px;
top: 0px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}

You can recreate a similar effect with few modifications at your fiddle:
<div class="container">
<span class="vertgrey">
<span class="vertredline"></span>
</span>
<span class="greyline">
<span class="redline"></span>
</span>
</div>
and the css:
.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
background: #CCC;
height: 100%;
position: absolute;
width: 10px;
left: 90px;
}
.container:hover .redline {
width:200px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.container:hover .vertredline {
height:100%;
width: 10px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
This is the link to the updated fiddle: http://jsfiddle.net/SNzgs/4/

Here's my shot at a solution for you:
fiddle: http://jsfiddle.net/itsmikem/gF28Y/
css:
.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
margin-top:0px;
height:100px;
-webkit-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}
html:
<div class="container">
<div class="greyline">
<div class="redline"></div>
</div>
</div>

Accordion/Drawer menu with Javascript? please advise

Sorry to bother, I want to create a menu like this one: sample menu could you please guide me? point me in the right direction? what would be the correct name of this kind of menu? what kind of language could I use? any similar examples out there? thanks a lot for your time.
Biz

Check this out,
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Cherry pick the one which suits your need.

try this menu(basic)
markup:
<div class="mainMenu" >
<div class="main-meu-nav" >
<ul>
<li data-id="cat1" >menu 1</li>
<li data-id="cat2">menu 2</li>
<li data-id="cat3">menu 3</li>
<li data-id="cat4">menu 4</li>
</ul>
</div>
<div class="mainmenu-category" >
<div class="category-row" id="cat1" >menu 1 list item</div>
<div class="category-row" id="cat2" >menu 2 list item</div>
<div class="category-row" id="cat3" >menu 3 list item</div>
<div class="category-row" id="cat4" >menu 4 list item</div>
</div>
</div>
Style:
.mainMenu
{
width:1024px;
height:auto;
margin:auto;
}
.main-meu-nav
{
width:100%;
height:auto;
float:left;
}
.main-meu-nav ul
{
width:100%;
height:auto;
float:left;
list-style:none;
}
.main-meu-nav ul li
{
width:auto;
display:block;
height:auto;
float:left;
list-style:none;
margin:0px 10px;
padding:10px ;
border:1px solid red
}
.mainmenu-category
{
width:100%;
height:auto;
float:left;
display:none
}
.category-row
{
width:90%;
height:auto;
float:left;
padding:5%;
background:#cccccc;
}
Script:
$(document).ready(function() {
$(".main-meu-nav > ul >li").on("click" , function() {
$(".mainmenu-category").fadeIn();
var catId = $(this).attr("data-id");
$(".mainmenu-category").find(".category-row").slideUp(100);
$(".mainmenu-category").find("#"+catId).slideDown(1000)
});
});

Try
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>

<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
nav {
background-color:#414956;
height: 100%;
position: fixed;
right: -220px;
top: 0;
-moz-transition: right 0.2s linear;
-o-transition: right 0.2s linear;
-webkit-transition: right 0.2s linear;
transition: right 0.2s linear;
width: 220px;
z-index: 9001;/* IT'S OVER 9000! */
padding-top: 4em;
}
#menuToggle {
background: #e3117c;
display: block;
position: fixed;
height: 40px;
right: 15%;
top: 33px;
width: 46px;
z-index:9999;
border-radius: 5px;
}
#menuToggle span {
background: white;
display: block;
height:6%;
left: 20%;
position: absolute;
top: 45%;
width: 60%;
}
#menuToggle span:before,
#menuToggle span:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
top: -250%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
#menuToggle span:after { top: 250%; }
nav a {
color: #fff;
display: block;
font-size: 20px;
margin: 0 0 0 30px;
font-weight: 300;
letter-spacing: 1px;
}
nav a:after {
background: #e3117c;
content: '';
display: block;
height: 2px;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
color: #e3117c;
}
.open nav {
right: 0;
}
.open #menuToggle span {
background: transparent;
left: 20%;
top: 45%;
}
.open #menuToggle span:before,
.open #menuToggle span:after {
background: white;
top: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #menuToggle span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menuToggle .navClosed {
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transition-delay: 0.1s, 0.1s;
transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}
#menuToggle .navOpen {
-moz-transition: background 0.1s linear 0.2s;
-o-transition: background 0.1s linear 0.2s;
-webkit-transition: background 0.1s linear;
-webkit-transition-delay: 0.2s;
transition: background 0.1s linear 0.2s;
}
#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
-o-transition: top 0.2s linear, -o-transform 0.2s linear;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
</script>
</head>
<body>
</head>
<body>
<div class="menu">
<span class="navClosed"></span>
<nav>
Home
About
Services
Gallery
News
price
Contact
</nav>
</div>
<script>
(function($){
// Menu Functions
$(document).ready(function(){
$('#menuToggle').click(function(e){
var $parent = $(this).parent('.menu');
$parent.toggleClass("open");
var navState = $parent.hasClass('open') ? "hide" : "show";
$(this).attr("title", navState + " navigation");
// Set the timeout to the animation length in the CSS.
setTimeout(function(){
console.log("timeout set");
$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
}, 200);
e.preventDefault();
});
});
})(jQuery);
</script>
<!--// navbar-->
</body>
</html>
</body>
</html>

**<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{padding:0; margin:0; font-family: 'Roboto', sans-serif;}
h1{margin:0; color:#ddd; padding:10px; border-bottom:1px solid #666;}
button:focus{outline:none}
aside{background:#1a1d23; width:250px;height:100vh; position:fixed; transition:.3s;left:-250px;top:0;transition-timing-function: cubic-bezier(0.9,0,1,1);}
aside.close{left:0;transition:.3s;transition-timing-function: cubic-bezier(0.9,0,1,1);}
nav a{display: block; color:#ddd; text-decoration:none;padding:10px;}
nav a:hover{background:#313640;}
aside button{border:none; background:none; position: absolute;right:-40px; top:7px; font-size:30px; transform:rotate(90deg); display:inline-block; cursor:pointer}/style>
<body>
<header></header>
<div class="container">
<aside>
<button class="toggle">|||</button>
<h1>Menu</h1>
<nav>
<ul>
<li>
Home
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
</li>
</li>
About Us
Services
Portfolio
<a `href`="#">Contact Us</a>
</nav>
</aside>
</div>
</ul>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$("aside").toggleClass("close")
});
});
// click outside
$(document).mouseup(function(e){
var container = $("aside");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("aside").remove Class("close")
}
});
</script>**

Categories