How To Fix a div height reset error - javascript

After About a minute, the height will be set to only the top bar showing in the below snippet, can someone help me fix this? Just try to run the script and see that it'll eventually show only the top bar. Any and all help is appreciated! This error happened after the implementation of a custom scroll bar, if that helps anyone solve my problum!
I have also created this JS Fiddle
<link rel="stylesheet" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<style>
html, body{ height: 100%; }
</style>
</head>
<body class="full-page">
<header>
<hr />
</header>
<div id="demo">
<section id="examples">
<div class="content mCustomScrollbar" data-mcs-theme="minimal">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
.wrap {
position: relative;
}
.wrap .nav-bar .navbar-brand {
margin-top: 15px;
}
.wrap .nav-bar .navbar-form {
margin-top: 25px;
}
.wrap .nav-bar .nav {
float: right !important;
}
.wrap .nav-bar .nav .dropdown span.fa,
.wrap .nav-bar .nav .dropdown span.caret {
margin-right: 10px;
}
.wrap .nav-bar .nav .dropdown-menu {
background: #222;
left: auto;
width: 200px;
right: 0;
}
.wrap .nav-bar .nav .dropdown-menu > li > a {
color: #ddd;
padding: 8px;
}
.wrap .nav-bar .nav .dropdown-menu > li > a:hover {
background: #3355ff;
}
.wrap .side-menu-link {
left: 21em;
}
.wrap .burger {
position: relative;
width: 35px;
height: 30px;
left: 10px;
top: 5px;
z-index: 500000;
}
.wrap .burger .burger_inside {
position: absolute;
background-color: #222;
width: 30px;
height: 5px;
left: 2.5px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap .burger #bgrOne {
top: 0;
}
.wrap .burger #bgrTwo {
top: 10px;
}
.wrap .burger #bgrThree {
top: 20px;
}
.wrap #side-menu {
position: absolute;
z-index: -1;
background: #404040;
width: 22em;
padding-top: 40px;
padding-right: 20px;
padding-left: 10px;
float: left;
display: block;
left: 0;
height: 900px;
}
.wrap .content {
position: absolute;
right: 0;
min-width: 400px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrap .content .top-bar {
height: 40px;
background: #ddd;
}
.wrap .content .content-inner {
padding: 0;
margin: 0;
background: #fff;
padding-left: 20px;
display: block;
position: absolute;
height: 900px;
width: 100%;
}
.wrap ul.accordion {
width: 100%;
background: transparent;
}
.wrap ul.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #9D9D9D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #303030;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrap ul.accordion li:not(open) last-child .link {
border-bottom: 0;
}
.wrap ul.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #999;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrap ul.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.wrap ul.accordion li.open .link {
color: #FFB266;
}
.wrap ul.accordion li.open i {
color: #FFB266;
}
.wrap ul.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.wrap ul.accordion ul.submenu {
display: none;
background: transparent;
font-size: 14px;
padding: 0;
}
.wrap ul.accordion ul.submenu li {
border-bottom: 1px solid #4b4a5e;
list-style: none;
}
.wrap ul.accordion ul.submenu li a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.wrap ul.accordion ul.submenu li a:hover {
background: rgba(240, 128, 128, 0.8);
color: #ffb266;
}
#media screen and (max-width: 768px) {
.wrap .nav-bar .navbar-brand {
margin-top: 0;
padding-left: 0;
}
.wrap .side-menu-link {
display: inline-block;
}
.wrap #side-menu #qform {
position: absolute;
top: 10px;
}
.wrap .content {
left: 0;
}
.wrap.active .content {
left: 21em;
}
.wrap.active .content #bgrOne {
top: 10px;
transform: rotate(225deg);
}
.wrap.active .content #bgrTwo {
opacity: 0;
}
.wrap.active .content #bgrThree {
top: 10px;
transform: rotate(315deg);
}
}
#media screen and (min-width: 769px) {
.side-menu-link {
display: none;
}
.wrap {
position: relative;
}
.wrap .content {
left: 21em;
right: 0;
}
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
});
</script>
</head>
<body>
<!-- <body style="visibility: hidden !important;">
<div id="babasbmsgx" style="visibility: visible !important;">Please disable your adblock and script blockers to view this page</div>-->
<div class="wrap">
<nav class="nav-bar navbar-inverse" role="navigation">
<div id ="top-menu" class="container-fluid active">
<a class="navbar-brand" href="#">AntiMalwareProgram</a>
<ul class="nav navbar-nav">
<form id="qform" class="navbar-form pull-left" method="get" action="https://www.google.com/search" role="search">
<input type="text" class="form-control" name="q"
type="submit" placeholder="Search all of Google!" />
</form>
<li class="dropdown movable">
<img id="fa fa-4x fa-child" src="" >
<span class="caret"></span><span class="fa fa-4x fa-child"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="fa fa-user"></span>Edit Profile</li>
<li><span class="fa fa-gear"></span>Cancel Account</li>
<li class="divider"></li>
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=logout
"><span class="fa fa-power-off"></span>Log Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<aside id="side-menu" class="aside" role="navigation">
<ul class="nav nav-list accordion">
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-globe"></i>Current pages<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li>About Current Pages(You Are Here)</li>
<li>Joomla Pages</li>
<li>Blogs</li>
<li>Community Editable Wiki</li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-users"></i>Users<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li>Edit Profile</li>
<li>Cancel Account</li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-cloud"></i>Forms<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li>Submit a support ticket</li>
<li>Feedback Survey</li>
<li>Vote For Content</li>
<li>Contact Us</li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-map-marker"></i>Go Back/Forward Buttons<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a onclick="goBack()">Go Back</a></li>
<li><a onclick="goForward()">Go Forward</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-file-image-o"></i>Other<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li>What's New?</li>
<li>© 2016-<?php echo date("Y");?></li>
<li>Our Mailing List</li>
<li>Comming Soon</li>
<li>Comming Soon</li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-file-image-o"></i>AntiMalwareProgram!<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li>Results</li>
<li>Dashboard</li>
<li>Malware Test</li>
</ul>
</li>
<img id="myImg" src="https://antimalwareprogram.co/RapidSSL_SEAL-90x50.gif" alt="Rapid SSL Image" width="100%" height="100">
</ul>
</aside>
<!--Body content-->
<div class="content">
<div class="top-bar">
<a href="#menu" class="side-menu-link burger">
<span class='burger_inside' id='bgrOne'></span>
<span class='burger_inside' id='bgrTwo'></span>
<span class='burger_inside' id='bgrThree'></span>
</a>
</div>
<section class="content-inner">
<script>
function goBack() {
window.history.back();
}
</script>
<script>
function goForward() {
window.history.forward();
}
</script>
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-7824087727433149",
enable_page_level_ads: true
});
</script>
<!-- Google Code for antimalwareprogram.co Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 934367017;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "PWD9CPGJ13MQqZ7FvQM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/934367017/?label=PWD9CPGJ13MQqZ7FvQM&guid=ON&script=0"/>
</div>
</noscript>
<ul class='custom-menu'>
<li data-action = "first">First thing</li>
<li data-action = "second">Second thing</li>
<li data-action = "third">Third thing</li>
</ul>
<style>
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
<script>
<!--
This code is developed by Anand Roshan for www.voidtricks.com tutorial
Tutorial URI : http://www.voidtricks.com/custom-right-click-context-menu/
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.menu{
width: 100px;
background: #000;
color: #fff;
position:absolute;
z-index: 999999;
display: none;
box-shadow: 0 0 10px #713C3C;
}
.menu ul{
list-style: none;
padding: 0;
margin:0;
}
.menu ul a{
text-decoration: none;
}
.menu ul li{
width: 100%%;
padding: 6%;
background-color: #F04D44;
color: #fff;
}
.menu ul li:hover{
background-color: grey;
color: red;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
});
$("html").on("click", function(){
$(".menu").hide();
});
});
</script>
</head>
<body>
<!-- Menu div initially hidden -->
<div class="menu">
<ul>
<li>Home</li>
<li>Main Dashboard</li>
<li>Newsletter</li>
<li>Feedback</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
<!--
This code is developed by Anand Roshan for www.voidtricks.com tutorial
Tutorial URI : http://www.voidtricks.com/custom-right-click-context-menu/
-->
<!DOCTYPE html>
<script>
;
</script>
<html>
<head>
<title>Custom Right Click Menu</title>
<style type="text/css">
.menu{
width: 300px;
background: #000;
color: #fff;
position:absolute;
z-index: 999999;
display: none;
box-shadow: 0 0 10px #713C3C;
}
.menu ul{
list-style: none;
padding: 0;
margin:0;
}
.menu ul a{
text-decoration: none;
}
.menu ul li{
width: 88%;
padding: 6%;
background-color: transparent;
color: #fff;
}
.menu ul li:hover{
background-color: grey;
color: white;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
$("html").on("click", function(){
$(".menu").hide();
});
});
</script>
</head>
<body>
<!-- Menu div initially hidden -->
<div class="menu">
<ul>
</ul>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(function() {
var accordionActive = false;
$(window).on('resize', function() {
var windowWidth = $(window).width();
var $topMenu = $('#top-menu');
var $sideMenu = $('#side-menu');
if (windowWidth < 768) {
if ($topMenu.hasClass("active")) {
$topMenu.removeClass("active");
$sideMenu.addClass("active");
var $ddl = $('#top-menu .movable.dropdown');
$ddl.detach();
$ddl.removeClass('dropdown');
$ddl.addClass('nav-header');
$ddl.find('.dropdown-toggle').removeClass('dropdown-toggle').addClass('link');
$ddl.find('.dropdown-menu').removeClass('dropdown-menu').addClass('submenu');
$ddl.prependTo($sideMenu.find('.accordion'));
$('#top-menu #qform').detach().removeClass('navbar-form').prependTo($sideMenu);
if (!accordionActive) {
var Accordion2 = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.movable .link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
Accordion2.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.movable .submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion2($('ul.accordion'), false);
accordionActive = true;
}
}
}
else {
if ($sideMenu.hasClass("active")) {
$sideMenu.removeClass('active');
$topMenu.addClass('active');
var $ddl = $('#side-menu .movable.nav-header');
$ddl.detach();
$ddl.removeClass('nav-header');
$ddl.addClass('dropdown');
$ddl.find('.link').removeClass('link').addClass('dropdown-toggle');
$ddl.find('.submenu').removeClass('submenu').addClass('dropdown-menu');
$('#side-menu #qform').detach().addClass('navbar-form').appendTo($topMenu.find('.nav'));
$ddl.appendTo($topMenu.find('.nav'));
}
}
});
/**/
var $menulink = $('.side-menu-link'),
$wrap = $('.wrap');
$menulink.click(function() {
$menulink.toggleClass('active');
$wrap.toggleClass('active');
return false;
});
/*Accordion*/
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('ul.accordion'), false);
});
</script>
</body>
</html>
</section>
</div>
<footer>
<hr />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://manos.malihu.gr/repository/js/minified/jquery-1.11.0.min.js"><\/script>')</script>
<!-- custom scrollbar plugin -->
<script src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).on("load",function(){
$("body").mCustomScrollbar({
theme:"minimal"
});
});
})(jQuery);
</script>
</body>
</html>

i fixed the issue, the issue was a error position absolute in the css

Related

How to animate menu background changing image?

i am trying to animate when i hover a li.. background image will be the zoom out
$(function () {
var image = $('.menu').find('img').attr('src');
$('.menu ul li').mouseover(function () {
var currentImage = $(this).attr('data-img');
$(this).parent().parent().parent().parent().find('img').attr('src', currentImage); })});
::-webkit-scrollbar{display: none; visibility: hidden;}
body{margin: 0; background: burlywood; }
.menu { position: relative; text-align: center; margin: auto; height: 100%; padding-top: 2%; padding-bottom: 10%; z-index: 99;}
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px;}
.menu li+li{margin-top: 30px;}
.menu a{ font-size: 3.5rem;}
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; animation: menuBG 0.7s ease-in;}
.homeGif{ position: fixed;}
.menu img{ width: 100%; }
#keyframes menuBG { from{ opacity: 0; transform: scale(1.05); }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif">
<div class=""> <img src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="src"> </div> </div>
<div class="menu"> <div class="data"><ul>
<li>Navigation</li>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active"><span>H</span><span>o</span><span>m</span><span>e</span></li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works">Works</li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about">About</li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80" class="navLink contact">Contact</li></ul> </div></div></div>
Try to reset the animation, also avoid too many parent() call as possible by select closest element or create better class names.
So here I make a small modification to get what you need, by add a class name to the background img that trigger animation, every time you change the hover to other menu item (LI element) it will toggle the class name so the animation will restart each time.
$(function () {
var image = $('.menu').find('img').attr('src');
var lastImage
$('.menu ul li.navLink').mouseover(function () {
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if(lastImage !== currentImage) {
$('.navigationGif').removeClass('animation')
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
}
})
});
::-webkit-scrollbar {
display: none;
visibility: hidden;
}
body {
margin: 0;
background: burlywood;
}
.menu {
position: relative;
text-align: center;
margin: auto;
height: 100%;
padding-top: 2%;
padding-bottom: 10%;
z-index: 99;
}
.menu li {
display: block;
font-size: 1.5rem;
font-family: "Raleway SemiBold", Serif, sans-serif;
padding-bottom: 20px;
}
.menu li+li {
margin-top: 30px;
}
.menu a {
font-size: 3.5rem;
}
.navigationGif {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.navigationGif.animation {
animation: menuBG 0.7s ease-in;
}
.homeGif {
position: fixed;
}
.menu img {
width: 100%;
}
#keyframes menuBG {
from {
opacity: 0;
transform: scale(1.05);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif animation">
<div class=""> <img
src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
alt="" class="src"> </div>
</div>
<div class="menu">
<div class="data">
<ul>
<li>Navigation</li>
<li
data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink home active"><a href=""
class="navItem"><span>H</span><span>o</span><span>m</span><span>e</span></a></li>
<li
data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink works">Works</li>
<li
data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80"
class="navLink about">About</li>
<li
data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"
class="navLink contact">Contact</li>
</ul>
</div>
</div>
</div>

How do I fix a menu from disappearing when I toggle it?

It used to work and now I have no idea what I did wrong. When I toggle the mobile menu, the navigation items don't show up but when I inspect it the browser shows they're there but aren't visible.
Can someone help me figure out this menu problem? This has stumped me
I tried making the menu links appear at the top with a high z index, different combinations of selecting the a tags in the list items, still nothing.
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
// Do something else, like open/close menu
});
/* Code for the toggling of the navbar */
let toggleNavStatus = false;
let toggleNav = function () {
let getMenu = document.getElementById("main-navigation");
let getSidebar = document.getElementById("bottom-nav-bar");
let getSidebarUL = document.querySelector(".side-nav ul");
let getSidebarLinks = document.querySelectorAll(".side-nav a");
if (toggleNavStatus === false) {
getSidebar.style.visibility = "visible";
getSidebar.style.opacity = "1";
getMenu.style.top = "20px";
getMenu.style.visibility = "visible";
getSidebarLinks.forEach((item, index)=>{
console.log(item);
item.style.display = "block";
item.style.opacity = "1";
})
getSidebar.style.height = "290px";
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.visibility = "hidden";
getSidebar.style.opacity = "1";
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
item.style.visibility = "hidden";
item.style.display = "none";
})
getSidebar.style.height = "0";
toggleNavStatus = false;
}
}
/*
Core Styles
*/
body, html {
margin: 0;
padding: 0;
}
.container {
padding: 0 5%;
}
a, p, h1, h2, h3, h4, h5, h6, li {
font-family: 'Roboto', sans-serif;
}
p {
font-size: 1.125em;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 2.5em;
}
h1+h2 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
font-size: 1em;
}
/* Buttons */
.solid {
background: #000;
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
margin-bottom: 15px;
}
.primary {
background: var(--primary);
color: #fff;
font-size: var(--button-reg);
border: none;
width: 150px;
height: auto;
padding: 10px 25px;
}
:root {
--primary: #fdd008;
--button-reg: 1em;
--button-sm: .75em;
--heading: #1a1a1a;
--p: #4c4c4c;
}
/*
Navigation
*/
#top-navbar {
display: none;
}
.sub-nav {
visibility: hidden;
height: 0;
position: relative;
z-index: 2000;
background: #fff;
display: none;
}
.quote {
display: none;
}
/* Side Nav */
#main-navigation {
margin: 0;
padding-right: 20px;
position: relative;
top: -2020px;
z-index: 2;
visibility: hidden;
}
#bottom-nav-bar {
height: 0;
width: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 200;
background: #232b2b;
transition: .3s ease-in-out;
visibility: hidden;
opacity: 0;
}
nav ul li {
position: relative;
list-style: none;
text-align: right;
padding: 0px;
top: 50px;
z-index: 1200;
margin: 15px 0;
width: auto;
font-weight: bold;
font-size: 10px;
}
.side-nav a {
text-decoration: none;
padding: 0;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
opacity: 0;
visibility: hidden;
display: none;
position: relative;
z-index: 200;
}
nav img {
position: absolute;
top: 15px;
left: 0;
z-index: 10;
}
/* Hamburger Menu */
#menu-button {
position: absolute;
right: 10px;
display: flex;
align-items: center;
top: 7px;
width: 60px;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
position: relative;
z-index: 2000;
}
.hamburger:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active:hover {
opacity: 0.7;
cursor: pointer;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
z-index: 2000;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* * Spring */
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.13s linear;
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition-delay: .22s;
}
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.22s;
background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins|Roboto&display=swap" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valley Construction Supply | Marysville, WA</title>
</head>
<header>
<button id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<!-- Top Navigation Bar -->
<div id="top-navbar">
<div class="container">
<img src="" alt="valley_construction_supply_logo">
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Marysville, WA</p>
<p>(800) 559-8566</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Tacoma, WA</p>
<p>(800) 922-2082</p>
</div>
</div>
<div class="location">
<div class="icon">
<!-- icon -->
</div>
<div class="location-info">
<p>Hours</p>
<p>Mon-Fri: 9am - 5pm</p>
</div>
</div>
</div>
</div>
<nav>
<!-- Desktop Navigation -->
<img src="images/vcs.png" alt="" height="60px">
<div id="bottom-nav-bar" class="side-nav" class="container">
<ul id="main-navigation" class="side-nav">
<li>HOME</li>
<li>ABOUT</li>
<ul class="sub-nav">
<li>JOBS</li>
<li>ABOUT VCS</li>
</ul>
<li>SERVICES</li>
<ul class="sub-nav">
<li>REBAR FABRICATION</li>
<li>HOMECONCRETE</li>
<li>BUILDING MATERIALS</li>
<li>EQUIPMENT AND TOOLS</li>
</ul>
<li>PRODUCTS</li>
<li>PROMOTIONS</li>
<li>CONTACT</li>
<ul class="sub-nav">
<li>APPLY FOR CREDIT</li>
</ul>
</ul>
<button class="quote" type="button">
REQUEST A QUOTE
</button>
</div>
</nav>
</header>
<body>
</body>
</html>
when you click the hamburger menu the navigation list is supposed to appear from the top with the slide down menu. But no links show up.
The problem is in your toggleNav() function. If you look at this part of the code:
if (toggleNavStatus === false) {
getSidebarLinks.forEach((item, index)=>{
console.log(item);
// here, you are setting display back to block, BUT visibility stays hidden!
item.style.display = "block";
item.style.opacity = "1";
})
}
else if (toggleNavStatus === true) {
getSidebarLinks.forEach((item, index)=>{
item.style.opacity = "0";
// here, you are setting display to none AND visibility to hidden
item.style.visibility = "hidden";
item.style.display = "none";
})
}
Side note for you: In order to hide an element from the page, you don't need to set both visibility:hidden and display:none. Either one will do the job, although they differ in details. If you are interested, you can learn more about these differences in the following question: What is the difference between visibility:hidden and display:none?

JQuery category filter breaks when a category is more than 2 words

I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!
Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');

Click back arrow not working properly in JavaScript

This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.

How can I get the navigation bar to appear and lock on after scrolling 50px down?

I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>

Categories