JQuery UI Tabs - Custom animation - javascript

I need to create animation like this - CODEPEN
Using JQuery UI Tabs - jQuery UI Tabs
Problem occur when I need to create animation for container. There is only show/hide option and don't support fx option in newest version. How I can accomplish it?
Main question: can somebody provide codepen/fiddle with custom function animation (so everybody will benefit) like function inside show/hide method? It is possible?.
$(document).ready(function() {
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();
// Show tab on page load
activeTab.show();
// Set height of wrapper on page load
tabWrapper.height(activeTabHeight);
$(".tabs > li").on("click", function() {
// Remove class from active tab
$(".tabs > li").removeClass("active");
// Add class active to clicked tab
$(this).addClass("active");
// Update clickedTab variable
clickedTab = $(".tabs .active");
// fade out active tab
activeTab.fadeOut(250, function() {
// Remove active class all tabs
$(".tab__content > li").removeClass("active");
// Get index of clicked tab
var clickedTabIndex = clickedTab.index();
// Add class active to corresponding tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active");
// update new active tab
activeTab = $(".tab__content > .active");
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});
});
// Variables
var colorButton = $(".colors li");
colorButton.on("click", function() {
// Remove class from currently active button
$(".colors > li").removeClass("active-color");
// Add class active to clicked button
$(this).addClass("active-color");
// Get background color of clicked
var newColor = $(this).attr("data-color");
// Change background of everything with class .bg-color
$(".bg-color").css("background-color", newColor);
// Change color of everything with class .text-color
$(".text-color").css("color", newColor);
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
color: #50555a;
}
.main{
padding: 100px 20px;
}
nav {
z-index: 9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
text-align: center;
}
.bg-color {
background-color: #46a1de;
transition-duration: .5s;
}
.text-color {
color: #46a1de;
transition-duration: .5s;
}
footer {
padding: 40px 0;
text-align: center;
opacity: .33;
color: white;
}
.wrapper {
min-width: 600px;
max-width: 900px;
margin: 0 auto;
}
.tabs {
display: table;
table-layout: fixed;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.tabs > li {
transition-duration: .25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 20px 20px 25px 20px;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: .25s;
border-radius: 5px 5px 0 0;
}
.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #50555a;
}
.tabs > li.active:before {
transition-duration: .5s;
background-color: white;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tab__content {
background-color: white;
position: relative;
width: 100%;
border-radius: 5px;
}
.tab__content > li {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
border-radius: 5px;
width: 100%;
padding: 45px 40px 40px 40px;
background-color: white;
}
.content__wrapper h2 {
width: 100%;
text-align: center;
padding-bottom: 20px;
font-weight: 300;
}
.content__wrapper img {
width: 100%;
height: auto;
border-radius: 5px;
}
.colors {
text-align: center;
padding-top: 20px;
}
.colors > li {
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
border-bottom: 5px solid rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
transition-duration: .2s;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
border-bottom: 10px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}
.colors > li:nth-child(1) {
background-color: #2ecc71;
}
.colors > li:nth-child(2) {
background-color: #D64A4B;
}
.colors > li:nth-child(3) {
background-color: #8e44ad;
}
.colors > li:nth-child(4) {
background-color: #46a1de;
}
.colors > li:nth-child(5) {
background-color: #bdc3c7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="bg-color main">
<nav class="bg-color">Adaptive tabs</nav>
<section class="wrapper">
<ul class="tabs">
<li class="active">Colors</li>
<li>Favorite movies</li>
<li>About</li>
</ul>
<ul class="tab__content">
<li class="active">
<div class="content__wrapper">
<h2 class="text-color">Pick a color</h2>
<ul class="colors">
<li data-color="#2ecc71"></li>
<li data-color="#D64A4B"></li>
<li data-color="#8e44ad"></li>
<li class="active-color" data-color="#46a1de"></li>
<li data-color="#bdc3c7"></li>
</ul>
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">Her</h2>
<img src="http://lewihussey.com/codepen-img/her.jpg">
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">About</h2>
<p>Created by <a class="text-color" href="http://lewihussey.com" target="_blank">Lewi Hussey</a>
</p>
</div>
</li>
</ul>
</section>
<footer>By Lewi Hussey</footer>
</div>

Related

Re-Write jQuery Function To Handle Two Multi-Level Drop-Down Menus On The Same Page

I'm writing a settings page with two multi-level drop-down menus. The first menu is the site main, which sits at the top of the page, and the second menu is lower down the page and used for navigating settings features such as change avatar, timezone, email address, etc.
If there were only one menu on the page there would be no problem. I wish to use the same menu for settings to keep the page appearance uniform. The problem I'm running into is having them behave separately. Opening one, opens the other and there's a duplication of the mobile menu for both.
At first, I thought I could simply switch the .find() command in the jQuery function to .closest(), then I tried .next(), neither of them worked. I duplicated the function and changed all variables to make it a separate function, but that caused the lower menu to stop working entirely.
I tried given each menu separate IDs and within the jQuery(document).ready(function($) tried to initialize them separately, but that hasn't worked either.
An online search discovered all kinds of examples of other menu types, but nowhere could I find anything to help me resolve this issue. It's simply beyond my level of experience.
The code below runs both menus as one. It has been my starting point for the past two days.
https://jsfiddle.net/Assorro/vwrzhxsa/
HTML
<div class="stellarnav" id="stellar1">
<ul>
<li>Link 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
</div>
<div class="stellarnav" id="stellar2">
<ul>
<li>Link 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.stellarnav').stellarNav({
theme: 'dark',
breakpoint: 960
});
});
</script>
CSS
.stellarnav {
position: relative;
width: 100%;
z-index: 9900;
line-height: normal;
display: none;
margin-bottom: 20px;
}
.stellarnav a {
color: #777;
}
.stellarnav ul {
margin: 0;
padding: 0;
text-align: center;
}
.stellarnav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
vertical-align: middle;
}
.stellarnav li a {
padding: 15px;
display: block;
text-decoration: none;
color: #777;
font-size: inherit;
font-family: inherit;
box-sizing: border-box;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* main level */
.stellarnav>ul>li {
display: inline-block;
}
.stellarnav>ul>li>a {
padding: 20px 40px;
}
/* first level dd */
.stellarnav ul ul {
top: auto;
width: 220px;
position: absolute;
z-index: 9900;
text-align: left;
display: none;
background: #ddd;
}
.stellarnav li li {
display: block;
}
/* second level dd */
.stellarnav ul ul ul {
top: 0;
/* dd animtion - change to auto to remove */
left: 220px;
}
.stellarnav>ul>li:hover>ul>li:hover>ul {
opacity: 1;
visibility: visible;
top: 0;
}
/* .drop-left */
.stellarnav>ul>li.drop-left>ul {
right: 0;
}
.stellarnav li.drop-left ul ul {
left: auto;
right: 220px;
}
/* light theme */
.stellarnav.light {
background: rgba(255, 255, 255, 1);
}
.stellarnav.light a {
color: #000;
}
.stellarnav.light ul ul {
background: rgba(255, 255, 255, 1);
}
.stellarnav.light li a {
color: #000;
}
/* dark theme */
.stellarnav.dark {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0px 15px rgba(128, 128, 128, 0.35);
}
.stellarnav.dark a {
color: #538fbe;
}
.stellarnav.dark ul ul {
background: #f9f9f9;
border: 1px solid #f1f1f1;
}
.stellarnav.dark li a {
color: #5b8daf;
}
.stellarnav.dark li a:hover {
color: #5b8daf;
background: rgba(16, 16, 16, 0.1);
}
/* sticky nav */
.stellarnav.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
/* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/
body.stellarnav-noscroll-x {
overflow-x: hidden;
}
/* general styling */
.stellarnav li.has-sub>a:after {
content: '';
margin-left: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #5b8daf;
display: inline-block;
}
.stellarnav li li.has-sub>a:after {
margin-left: 10px;
float: right;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #5b8daf;
position: relative;
top: 4px;
}
.stellarnav li.drop-left li.has-sub>a:after {
float: left;
margin-right: 10px;
border-left: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #5b8daf;
}
.stellarnav.hide-arrows li.has-sub>a:after,
.stellarnav.hide-arrows li li.has-sub>a:after,
.stellarnav.hide-arrows li.drop-left li.has-sub>a:after {
display: none;
}
.stellarnav .menu-toggle,
.stellarnav .close-menu,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
display: none;
text-transform: uppercase;
text-decoration: none;
}
.stellarnav .dd-toggle {
display: none;
position: absolute;
top: 0;
right: 0;
padding: 0;
width: 48px;
height: 48px;
text-align: center;
z-index: 9999;
border: 0;
}
.stellarnav.desktop li.has-sub a {
padding-right: 5px;
}
.stellarnav.desktop.hide-arrows li.has-sub a {
padding-right: 15px;
}
.stellarnav.mobile>ul>li>a.dd-toggle {
padding: 0;
}
.stellarnav li.call-btn-mobile,
.stellarnav li.location-btn-mobile {
display: none;
}
/* svg icons */
.stellarnav svg {
fill: currentColor;
width: 1em;
height: 1em;
position: relative;
top: 2px;
}
/* svg icons */
.stellarnav a.dd-toggle .icon-plus {
box-sizing: border-box;
transition: transform 0.3s;
width: 12px;
height: 100%;
position: relative;
vertical-align: middle;
display: inline-block;
}
.stellarnav a.dd-toggle .icon-plus:before {
content: '';
display: block;
width: 12px;
height: 0px;
border-bottom: solid 3px #777;
position: absolute;
top: 50%;
transform: rotate(90deg);
transition: width 0.3s;
}
.stellarnav a.dd-toggle .icon-plus:after {
content: '';
display: block;
width: 12px;
height: 0px;
top: 50%;
border-bottom: solid 3px #777;
position: absolute;
}
.stellarnav li.open>a.dd-toggle .icon-plus {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.stellarnav.light a.dd-toggle .icon-plus:before {
border-color: #000;
}
.stellarnav.light a.dd-toggle .icon-plus:after {
border-color: #000;
}
.stellarnav.dark a.dd-toggle .icon-plus:before {
border-color: #FFF;
}
.stellarnav.dark a.dd-toggle .icon-plus:after {
border-color: #FFF;
}
.stellarnav .icon-close {
box-sizing: border-box;
width: 12px;
height: 12px;
position: relative;
display: inline-block;
}
.stellarnav .icon-close:before {
content: '';
display: block;
width: 12px;
height: 0px;
border-bottom: solid 3px #777;
position: absolute;
top: 50%;
transform: rotate(45deg);
}
.stellarnav .icon-close:after {
content: '';
display: block;
width: 12px;
height: 0px;
top: 50%;
border-bottom: solid 3px #777;
position: absolute;
transform: rotate(-45deg);
}
.stellarnav.light .icon-close:before {
border-color: #000;
}
.stellarnav.light .icon-close:after {
border-color: #000;
}
.stellarnav.dark .icon-close:before {
border-color: #FFF;
}
.stellarnav.dark .icon-close:after {
border-color: #FFF;
}
/* mobile nav */
.stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile,
.stellarnav .close-menu {
padding: 15px;
box-sizing: border-box;
}
.stellarnav .menu-toggle span.bars {
display: inline-block;
margin-right: 7px;
position: relative;
top: 3px;
}
.stellarnav .menu-toggle span.bars span {
display: block;
width: 15px;
height: 2px;
border-radius: 6px;
background: #777;
margin: 0 0 3px;
}
.stellarnav .full {
width: 100%;
}
.stellarnav .half {
width: 50%;
}
.stellarnav .third {
width: 33%;
text-align: center;
}
.stellarnav .location-btn-mobile.third {
text-align: center;
}
.stellarnav .location-btn-mobile.half {
text-align: right;
}
.stellarnav.light .third,
.stellarnav.light .half {
border-left: 1px solid rgba(0, 0, 0, .15);
}
.stellarnav.light.left .third,
.stellarnav.light.left .half {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.stellarnav.light.right .third,
.stellarnav.light.right .half {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.stellarnav.light .third:first-child,
.stellarnav.light .half:first-child {
border-left: 0;
}
.stellarnav.dark .third,
.stellarnav.dark .half {
border-left: 1px solid rgba(255, 255, 255, .15);
}
.stellarnav.dark.left .third,
.stellarnav.dark.left .half {
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.stellarnav.dark.right .third,
.stellarnav.dark.right .half {
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.stellarnav.light.left .menu-toggle,
.stellarnav.light.right .menu-toggle {
border-bottom: 0;
}
.stellarnav.dark.left .menu-toggle,
.stellarnav.dark.right .menu-toggle {
border-bottom: 0;
}
.stellarnav.dark .third:first-child,
.stellarnav.dark .half:first-child {
border-left: 0;
}
.stellarnav.light .menu-toggle span.bars span {
background: #000;
}
.stellarnav.dark .menu-toggle span.bars span {
background: #538fbe;
}
.stellarnav.mobile {
position: static;
}
.stellarnav.mobile.fixed {
position: static;
}
.stellarnav.mobile ul {
position: relative;
display: none;
}
.stellarnav.mobile.active {
padding-bottom: 0;
}
.stellarnav.mobile.active>ul {
display: block;
}
.stellarnav.mobile ul {
text-align: left;
}
.stellarnav.mobile>ul>li {
display: block;
}
.stellarnav.mobile>ul>li>a {
padding: 15px;
}
.stellarnav.mobile ul {
background: rgba(221, 221, 221, 1);
}
.stellarnav.mobile ul ul {
position: relative;
opacity: 1;
visibility: visible;
width: auto;
display: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
.stellarnav.mobile ul ul ul {
left: auto;
top: auto;
}
.stellarnav.mobile li.drop-left ul ul {
right: auto;
}
.stellarnav.mobile li a {
border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.stellarnav.mobile>ul {
border-top: 1px solid rgba(255, 255, 255, .15);
}
.stellarnav.mobile.light li a {
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.stellarnav.mobile.light>ul {
border-top: 1px solid rgba(0, 0, 0, .15);
}
.stellarnav.mobile li a.dd-toggle {
border: 0;
}
.stellarnav.mobile.light li a.dd-toggle {
border: 0;
}
.stellarnav.mobile .menu-toggle,
.stellarnav.mobile .dd-toggle,
.stellarnav.mobile .close-menu,
.stellarnav.mobile .call-btn-mobile,
.stellarnav.mobile .location-btn-mobile {
display: inline-block;
}
.stellarnav.mobile li.call-btn-mobile {
border-right: 1px solid rgba(255, 255, 255, .1);
box-sizing: border-box;
}
.stellarnav.mobile li.call-btn-mobile,
.stellarnav.mobile li.location-btn-mobile {
display: inline-block;
width: 50%;
text-transform: uppercase;
text-align: center;
}
.stellarnav.mobile li.call-btn-mobile.full,
.stellarnav.mobile li.location-btn-mobile.full {
display: block;
width: 100%;
text-transform: uppercase;
border-right: 0;
text-align: left;
}
.stellarnav.mobile.light ul {
background: rgba(255, 255, 255, 1);
}
.stellarnav.mobile.dark ul {
background: rgba(0, 0, 0, 1);
}
.stellarnav.mobile.dark ul ul {
background: rgba(255, 255, 255, .08);
}
.stellarnav.mobile.light li.call-btn-mobile {
border-right: 1px solid rgba(0, 0, 0, .1);
}
.stellarnav.mobile.top {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.stellarnav.mobile li.has-sub>a:after,
.stellarnav.mobile li li.has-sub>a:after,
.stellarnav.mobile li.drop-left li.has-sub>a:after {
display: none;
}
/* left and right positions */
.stellarnav.mobile.right>ul,
.stellarnav.mobile.left>ul {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
max-width: 280px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.stellarnav.mobile.right>ul {
right: 0;
}
.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu {
display: inline-block;
text-align: right;
}
.stellarnav.mobile.left>ul {
left: 0;
}
.stellarnav.mobile.right .location-btn-mobile.half,
.stellarnav.mobile.right .call-btn-mobile.half,
.stellarnav.mobile.right .close-menu.half {
text-align: center;
}
.stellarnav.mobile.right .location-btn-mobile.third,
.stellarnav.mobile.right .call-btn-mobile.third,
.stellarnav.mobile.right .close-menu.third {
text-align: center;
}
.stellarnav.mobile.left .location-btn-mobile.half,
.stellarnav.mobile.left .call-btn-mobile.half,
.stellarnav.mobile.left .close-menu.half {
text-align: center;
}
.stellarnav.mobile.left .location-btn-mobile.third,
.stellarnav.mobile.left .call-btn-mobile.third,
.stellarnav.mobile.left .close-menu.third {
text-align: center;
}
.stellarnav.mobile.left .menu-toggle.half,
.stellarnav.mobile.left .menu-toggle.third,
.stellarnav.mobile.right .menu-toggle.half,
.stellarnav.mobile.right .menu-toggle.third {
text-align: left;
}
.stellarnav.mobile.left .close-menu.third span,
.stellarnav.mobile.right .close-menu.third span {
display: none;
}
/* left and right positions */
/* mega dd */
.stellarnav.desktop li.mega ul ul {
background: none;
}
.stellarnav.desktop li.mega li {
display: inline-block;
vertical-align: top;
margin-left: -4px;
}
.stellarnav.desktop li.mega li li {
display: block;
position: relative;
left: 4px;
}
.stellarnav.desktop li.mega ul ul {
width: auto;
}
.stellarnav.desktop>ul>li.mega {
position: inherit;
}
.stellarnav.desktop>ul>li.mega>ul {
width: 100%;
}
.stellarnav.desktop>ul>li.mega>ul li.has-sub ul {
display: block;
position: relative;
left: auto;
}
.stellarnav.desktop>ul>li.mega>ul>li {
padding-bottom: 15px;
box-sizing: border-box;
}
.stellarnav.desktop li.mega li li a {
padding: 5px 15px;
}
.stellarnav.desktop li.mega li.has-sub a:after {
display: none;
}
.stellarnav.desktop>ul>li.mega>ul>li>a {
color: yellow;
}
/* mega dd */
/* Fallback for slow javascript load */
#media only screen and (max-width: 768px) {
.stellarnav {
overflow: hidden;
display: block;
}
.stellarnav ul {
position: relative;
display: none;
}
.patrons {
position: relative;
top: 60px;
}
#separate_topic_container {
position: relative;
top: 60px;
}
}
/* mobile nav */
#media only screen and (max-width: 420px) {
.stellarnav.mobile .call-btn-mobile.third span,
.stellarnav.mobile .location-btn-mobile.third span {
display: none;
}
}
jQuery
! function(u) {
u.fn.stellarNav = function(n, r, h) {
nav = u(this), r = u(window).width();
var f = u.extend({
theme: "plain",
breakpoint: 768,
menuLabel: "Menu",
sticky: !1,
position: "static",
openingSpeed: 250,
closingDelay: 250,
showArrows: !0,
phoneBtn: "",
phoneLabel: "Call Us",
locationBtn: "",
locationLabel: "Location",
closeBtn: !1,
closeLabel: "Close",
mobileMode: !1,
scrollbarFix: !1
}, n);
return this.each(function() {
if ("light" != f.theme && "dark" != f.theme || nav.addClass(f.theme), f.breakpoint && (h = f.breakpoint), f.menuLabel ? menuLabel = f.menuLabel : menuLabel = "", f.phoneLabel ? phoneLabel = f.phoneLabel : phoneLabel = "", f.locationLabel ? locationLabel = f.locationLabel : locationLabel = "", f.closeLabel ? closeLabel = f.closeLabel : closeLabel = "", f.phoneBtn && f.locationBtn) var n = "third";
else if (f.phoneBtn || f.locationBtn) n = "half";
else n = "full";
if ("right" == f.position || "left" == f.position ? nav.prepend() : nav.prepend('<span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + "")) {}
u(".menu-toggle, .stellarnav-open").on("click", function(n) {
n.preventDefault(), "left" == f.position || "right" == f.position ? (nav.find("ul:first").stop(!0, !0).fadeToggle(f.openingSpeed), nav.toggleClass("active"), nav.hasClass("active") && nav.hasClass("mobile") && u(document).on("click", function(n) {
nav.hasClass("mobile") && (u(n.target).closest(nav).length || (nav.find("ul:first").stop(!0, !0).fadeOut(f.openingSpeed), nav.removeClass("active")))
})) : (nav.find("ul:first").stop(!0, !0).slideToggle(f.openingSpeed), nav.toggleClass("active"))
}), u(".close-menu, .stellarnav-close").on("click", function() {
nav.removeClass("active"), "left" == f.position || "right" == f.position ? nav.find("ul:first").stop(!0, !0).fadeToggle(f.openingSpeed) : nav.find("ul:first").stop(!0, !0).slideUp(f.openingSpeed).toggleClass("active")
}), nav.find("li a").each(function() {
0 < u(this).next().length && u(this).parent("li").addClass("has-sub").append('<a class="dd-toggle" href="#"><span class="icon-plus"></span></a>')
}), nav.find("li .dd-toggle").on("click", function(n) {
n.preventDefault(), u(this).parent("li").children("ul").stop(!0, !0).slideToggle(f.openingSpeed), u(this).parent("li").toggleClass("open")
});
var c = function() {
nav.find("li").off("mouseenter"), nav.find("li").off("mouseleave")
};
parentItems = nav.find("> ul > li");
function p() {
window.innerWidth <= h || f.mobileMode ? (c(), nav.addClass("mobile"), nav.removeClass("desktop"), !nav.hasClass("active") && nav.find("ul:first").is(":visible") && nav.find("ul:first").hide(), nav.find("li.mega").each(function() {
u(this).find("ul").first().removeAttr("style"), u(this).find("ul").first().children().removeAttr("style")
})) : (nav.addClass("desktop"), nav.removeClass("mobile"), nav.hasClass("active") && nav.removeClass("active"), !nav.hasClass("active") && nav.find("ul:first").is(":hidden") && nav.find("ul:first").show(), u("li.open").removeClass("open").find("ul:visible").hide(), c(), u(parentItems).each(function() {
u(this).hasClass("mega") ? (u(this).on("mouseenter", function() {
u(this).find("ul").first().stop(!0, !0).slideDown(f.openingSpeed)
}), u(this).on("mouseleave", function() {
u(this).find("ul").first().stop(!0, !0).slideUp(f.openingSpeed)
})) : (u(this).on("mouseenter", function() {
u(this).children("ul").stop(!0, !0).slideDown(f.openingSpeed)
}), u(this).on("mouseleave", function() {
u(this).children("ul").stop(!0, !0).delay(f.closingDelay).slideUp(f.openingSpeed)
}), u(this).find("li.has-sub").on("mouseenter", function() {
u(this).children("ul").stop(!0, !0).slideDown(f.openingSpeed)
}), u(this).find("li.has-sub").on("mouseleave", function() {
u(this).children("ul").stop(!0, !0).delay(f.closingDelay).slideUp(f.openingSpeed)
}))
}), navWidth = 0, u(parentItems).each(function() {
navWidth += u(this)[0].getBoundingClientRect().width, navWidth = Math.round(navWidth), u(this).hasClass("mega") && (u(this).find("ul").first().css({
left: 0,
right: 0,
margin: "0px auto"
}), numCols = u(this).attr("data-columns"), 2 == numCols ? u(this).find("li.has-sub").width("50%") : 3 == numCols ? u(this).find("ul").first().children().width("33.33%") : 4 == numCols ? u(this).find("ul").first().children().width("25%") : 5 == numCols ? u(this).find("ul").first().children().width("20%") : 6 == numCols ? u(this).find("ul").first().children().width("16.66%") : 7 == numCols ? u(this).find("ul").first().children().width("14.28%") : 8 == numCols ? u(this).find("ul").first().children().width("12.5%") : u(this).find("ul").first().children().width("25%"))
}), parentItems.hasClass("mega") && nav.find("li.mega > ul").css({
"max-width": navWidth
}))
}
p(), u(window).on("resize", function() {
p()
})
})
}
}(jQuery);
I expect the function to treat each menu separately so that each reacts independently of the other.

Uglified code seems to reference both nav elements under single variable var nav = u(this);
Can you perhaps try invoking stellarNav per element? Like so:
function initializeStellarNav(index, element) {
$(element).stellarNav({
theme: 'dark',
breakpoint: 960
});
}
jQuery(document).ready(function($) {
var $navs = jQuery('.stellarnav');
$navs.each(initializeStellarNav);
});

To resolve the issue of having the two separate menus behave separately on the same page, I was unable to accomplish this by using the one function alone. I needed to duplicate the function and change all the variable names by simply adding a "2" to each variable within the second function. Initializing them separately using the same function caused the top menu to stop working as the function was then assigning itself to the lower menu only.
It's a responsive menu, and while in mobile mode each mobile menu button would operate the second menu only. The button within the second menu function needed its ID changed. So class=".menu-toggle" became class=".menu-toggle2". The CSS also needed to be modified to include .menu-toggle2.
The initializing needed to be separate but it now works. It's a rare instance to need two identical responsive menus on the same page, but when you do, this solution will do the trick.
Final Markup
<div class="stellarnav" id="stellar1" style="z-index:10000;">
<ul>
<li>Link 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
</div>
<br /><br />
<div class="stellarnav" id="stellar2">
<ul>
<li>Link 1
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
function initializeStellarNav(index, element) {
$(element).stellarNav({
theme: 'dark',
breakpoint: 960
});
}
function initializeStellarNav2(index, element) {
$(element).stellarNav2({
theme2: 'dark',
breakpoint2: 960
});
}
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
initializeStellarNav(1, '#stellar1');
initializeStellarNav2(2, '#stellar2');
});
</script>
Working Fiddle
https://jsfiddle.net/Assorro/oeLwvf4m/
GitHub Issue
https://github.com/vinnymoreira/stellarnav/issues/20
Original Source
https://github.com/vinnymoreira/stellarnav

Why are the button elements not changing the pictures?

So I am in the middle of working on creating my own website. I just started working on the about me section of the website and I wanted to add a slideshow to showcase pictures of my life and interests. I used the code in the book "Jquery & Javascript by Jon Duckett" but for some reason when I click on the buttons to change to the next slide nothing happens.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$('.slider').each(function () {
'use strict';
var $this = $(this), //For every slider
$group = $this.find('.slides'), //Gets the current slider
$slides = $this.find('.slide'), //Gets the slide-group(container)
buttonArray = [], //jQuery object to hold all slides
currentIndex = 0, //Create array to hold nav buttons
timeout; //Used to store the timer
function move(newIndex) {
var animateLeft, slideLeft; //Declare variables
//advance();
//if current slide is showing or a slide is animating, then do nothing
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
buttonArray[currentIndex].removeClass('active'); //Remove class from item
buttonArray[newIndex].addClass('active'); //Add class to new item
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%'; //Animate the current group to the left
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
//Position new slide to left (if less) or right (if more) of current
$slides.eq(newIndex).css({left: slideLeft, display: 'block'});
$group.animate({left: animateLeft}, function () {
$slides.eq(currentIndex).css({display: 'none'});
$slides.eq(newIndex).css({left: 0});
$group.css({left: 0});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout); //Clear timer stored in timeout
//Start timer to run an anonymous function every 4 seconds
timeout = setTimeout(function () {
if (currentIndex < ($slides.length - 1)) { //If not the last slide
move(currentIndex + 1); //Move to next slide
} else { //Otherwise
move(0); //Move to the first slide
}
}, 4000); //Milliseconds timer will wait
}
$.each($slides, function (index) {
//Create a button element for the button
var $button = $('<button type="button" class="slide-btn">•</button>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function () {
move(index);
}).appendTo($this.find('.slide-buttons'));
buttonArray.push($button);
});
advance();
});
html {
height: 100%;
}
h1 {
color: white;
text-align: center;
}
h2{
color: white;
}
h3 {
color: white;
}
body{ min-height:100%;
padding:0;
margin:0;
position: relative;
overflow-x:hidden;
}
#IDE{
background-color: white;
width: 60%;
}
#banner {
position: absolute;
top: -20px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
z-index: -1;
}
#picture {
/* border: 50px solid black;*/
border-radius: 10px;
display:block;
margin: 0px auto;
}
#Paragraph{
color:white;
font-size:130%;
}
#Navbar
{
/*list-style-type: none;*/
margin: 100px;
margin-right: -10px;
margin-left: 0px;
padding: 0;
overflow: hidden;
/*background-color: orange;*/
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#Navbar a {
display: block;
padding: 14px;
/* background: #e2e2e2;*/
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
/* background-color: dodgerblue;
background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
table {
margin-top: 260px;
color: white;
background-color: black;
}
#Navbar li {
display:inline-block;
margin-right:0px;
font-weight: bold;
color: white;
float: left;
border-right: 0px solid #bbb;
}
#Skillset{
list-style-type: disc;
color: white;
}
li a, .dropbtn{
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
/* background-color:#111;*/
background-color: black;
color: red;
text-shadow: 0 0 20px blue, 0 0 10px lime;
font-style: oblique;
text-decoration:underline;
background-color: green;
}
#Skillset ul li{
list-style-type: disc;
}
li.dropdown{
display:inline-block;
}
.active {
background-color: #4CAF50;
}
/* THe container <div> - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.dropdown-content {
display: none;
position: absolute;
background-color:#f9f9f9;
min-width;160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
#sidebar_container
{ float: right;
width: 300px;}
.sidebar_base
{ width: 200px;
height: 14px;
background-color: black;}
.sidebar
{ float: right;
width: 290px;
padding: 0;
margin: 100px 0 16px 0;
}
.sidebar_item
{ background-color: black;
padding: 0 15px;
width: 250px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
height: 1000px;
}
.sidebar li a.selected
{ color: #444;}
.sidebar ul
{ margin: 0;}
.footer {
position: absolute;
bottom: -1100px;
padding: 1rem;
background-color: black;
text-align: center;
width: 100%;
}
.footer p
{ line-height: 1.7em;
padding: 0 0 10px 0;
color: white;
}
.footer a
{ color: #A8AA94;
text-decoration: none;
}
.footer a:hover
{ color: blue;
text-decoration:underline;
}
.slider {
max-height: 430px;
max-width: 940px;
margin: 0px auto 30px auto;}
slide-viewer {
position:relative;
overflow: hidden;
height: 300%;
}
.slide-group{
width:100%;
height:100%;
position:relative;
}
.slide{
width: 100%;
height: 100%;
display: none;
position: absolute;
}
.slide:first-child{
display: block;
}
.slide-buttons {
text-align: right;
}
.slide-btn {
border:none;
background: none;
color: red;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<!DOCTYPE HTML>
<html id="About Me">
<style>
body {
background-image: url("http://wallpaperrs.com/uploads/3d-abstract/blue-square-pattern-wide-wallpaper-13878.jpg");
background-size: auto;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, intial-scale-1">
<title>Bart Allen</title>
<h1>Bartholomew Allen</h1>
<ul id="Navbar">
<!-- Each of the linked list are referenced as links that lead to alterantive pages-->
<li>HOME</li>
<li>Purpose</li>
<li class="dropdown" >
My Projects
<div class="dropdown-content">
C++
Java
</div>
</li>
<li>LinkedIn Profile link</li>
<li style="float:right"><a class="active" href="About me.html">About me</a></li>
</ul>
<!--The '#' are used as text links, once the other pages are created then they will use urls-->
</head>
<body>
<link rel="stylesheet" href="main.css">
<img id="banner" src="https://math.columbusstate.edu/images/math_banner.jpg" alt="Banner Image"/>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\CCBC Essex Logo.jpg" height="350px" width="860px">
</div>
<div class="slide slide-2">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Cross Country.jpg" height="350px" width="860px">
</div>
<div class="slide slide-3">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\TU Logo.jpg">
</div>
<div class="slide slide-4">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Jessica And I.jpg">
</div>
</div>
</div>
<div class="slide-buttons">
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
</div>
</div>
</section>
<div id="sidebar_container">
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h2>Skillset Currently</h2>
<h3>Programming languages known:</h3>
<div id="Skillset">
<ul>
<li>Java</li>
<li>C++</li>
<li>Javascript</li>
<li>JQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<br>
<h3>Mathematics taken</h3>
<ul>
<li>Linear Algebra</li>
<li>Calculus I</li>
<li>Calculus II</li>
<li>Discrete Mathematics</li>
</ul>
<br>
</div>
</div>
</div >
</div>
<footer>
<div id="content_footer"></div>
<div class="footer">
<p>HOME | Purpose | My Project
</p>
<p>Copyright© Bartholomew Allen</p>
</div>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
<!--<script type="text/jquery.cycle2.min.js" src="js/jquery.cycle2.min.js"> </script>
</body>
</html>
I'm trying to create exactly this Content Panels- Responsive Slider

Unless you want to re-invent the wheel itself, [see example implementations below] you can use jquery ui carousel
http://code.runnable.com/WY_gouUfKGNOY4ET/output
or bootstrap to create carousel.
https://getbootstrap.com/docs/3.3/examples/carousel/

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.

when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page

This menus, when you clicked they drop down and displayed the specific menu block and click the menu again i displayed it none and click white space on the page or other menu the specific menu that you open will closed.
But...
The Problem is when the specific menu is 'onclick' and displayed block, height = 390px and when i click again the it display none and height back to 0px but the element inside shows and does not display none or leave the page... why??
Code:
*<!--html markup-->
<header class="top">
<nav class="nav">
<ul class="nav-menus">
<li id="menu_1">
a
<section id="a" class="dropMenus"><h1>A</h1></section>
</li>
<li id="menu_2">
b
<section id="b" class="dropMenus">B</section>
</li>
<li id="menu_3">
c
<section id="c" class="dropMenus">C</section>
</li>
<li id="menu_4">
d
<section id="d" class="dropMenus">D</section>
</li>
</ul>
</nav>
.nav-menus .dropMenus{
position: absolute;
display: none;
top: 90px;
left: 0;
width: 100%;
background: rgba(255, 170, 0, 0.1);
z-index: 1;
box-shadow: 2px 2px 2px #888;
}
//javascript
var boxArray = ['a', 'b', 'c', 'd'];
window.addEventListener('mouseup', function drop(event){
for(var i=0; i < boxArray.length; i++){
var box = document.getElementById(boxArray[i]);
var maxH = '390px';
if(event.target != box && event.target.parentNode != box){
if(box.style.height == maxH && box.style.display === 'block'){
box.style.display = 'none';
box.style.height = '0px';
} else {
box.style.height = maxH;
}
}
}
});
Heres the output
![PAGE LOADED][1]
[1]: http://i.stack.imgur.com/5oEef.png
![MENU CLICKED AND DROP DOWN][2]
[2]: http://i.stack.imgur.com/eWsGH.png
![MENU CLICKED BACK UP BUT PROBLEM OCCURRED][3]
[3]: http://i.stack.imgur.com/qVwjQ.png

I have taken liberty of updating your code.
JSFiddle
function updateUI(element) {
var dropMenus = document.getElementsByClassName('dropMenus');
var el = document.getElementById(element);
var show = el.style.display == 'none' ? true : false;
for (var i in dropMenus) {
if (!isNaN(i)) {
dropMenus[i].style.height = '0px';
dropMenus[i].style.display = 'none';
}
}
if (show) {
el.style.height = '390px';
el.style.display = 'block';
}
}
body {
margin: 0;
border: none;
padding: 0;
}
.top {
margin: 0 auto;
overflow: hidden;
}
.nav {
margin: 0 auto;
border: none;
padding: none;
width: 100%;
height: 90px;
float: left;
background: #e69900 url(http://dot.spindev.ph/wp-content/themes/fun/images/planner/imgright.png) no-repeat;
background-size: 1366px 90px;
font: 18px sans-serif, 'arial';
}
.nav li {
display: inline;
}
.nav li a {
text-decoration: none;
}
.nav > .logo a {
text-decoration: none;
float: left;
font-size: 30px;
margin: 30px 50px 20px 50px;
color: #fff;
}
.nav > .nav-menus a {
margin-top: -15px;
padding: 30px 24px 25px 24px;
float: left;
color: #fff;
transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-o-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-webkit-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
-moz-transition: background 0.9s, linear 0s, color 0.9s, linear 0s;
}
.nav > .nav-menus a:hover {
background: rgba(179, 119, 0, 0.4);
border-bottom: 10px solid #ffbb33;
color: #fff;
}
.nav-menus .search {
float: right;
margin-right: 20px;
}
.nav-menus > .nav-icon {
padding: 2px 5px;
border: 1px solid #000;
float: left;
display: none;
}
.nav-menus > .nav-icon > div {
width: 20px;
height: 4px;
background: #333;
margin: 3px 0px;
border-radius: 4px;
}
.nav-menus .dropMenus {
position: absolute;
display: none;
top: 90px;
left: 0;
width: 100%;
background: rgba(255, 170, 0, 0.1);
z-index: 1;
box-shadow: 2px 2px 2px #888;
}
<header class="top">
<nav class="nav">
<header class="logo">
it's more fun
</header>
<ul class="nav-menus">
<div class="nav-icon">
<div></div>
<div></div>
<div></div>
</div>
<li id="menu_1">
philippines
<section id="philippines" class="dropMenus">
<h1>A</h1></section>
</li>
<li id="menu_2">
things to do
<section id="thingsToDo" class="dropMenus">B</section>
</li>
<li id="menu_3">
top destinations
<section id="topDestinations" class="dropMenus">C</section>
</li>
<li id="menu_4">
planning your trip
<section id="planningYourTrip" class="dropMenus">D</section>
</li>
<li class="search">search</li>
</ul>
</nav>
</header>

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help

You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/

Categories

Resources