I'm building a website using Wordpress. Most of the nav menu links, link to an id on the homepage. So when I load my site all the links that link to a place on the homepage are currently active. I removed the script in Wordpress that checks to see if its active. I figured I could use bootstrap scrollspy to get this done or even this JSFiddle https://jsfiddle.net/cse_tushar/Dxtyu/141/
The problem I'm having is since the navigation is being spit out by Wordpress I don't have the ability to go in and actually hard code "active" to the first li element and then do a add class and remove class. How would I alter the above JSFiddle so it does a hash target. So whenever I scroll and hit a div with the same ID as a nav item it triggers the active class and stays active until I hit another one or change pages. Here is what my nav looks like on wordpress.
<nav class="collapse navbar-collapse" role="navigation">
<ul id="menu-primary-navigation" class="nav navbar-nav">
<li class="current-menu-item current_page_item menu-about">About</li>
<li class="current-menu-item current_page_item menu-team">Team</li>
<li class="current-menu-item current_page_item menu-services">Services</li>
<li class="menu-services">Blog</li>
<li class="current-menu-item current_page_item menu-contact-us">Contact Us</li>
</ul>
</nav>
<div id="about">
Something Here
</div>
<div id="team">
Something Here
</div>
You can accomplish that by adding the following line at the beginning of page load:
$("ul li a:first").addClass('active');
$(document).ready(function () {
$(document).on("scroll", onScroll);
$("ul li a:first").addClass('active');
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
Related
I am displaying the menu on the left side. As of now, there is no issue with the menu.
Now I am working on the back button. Once the user clicks on the Demo1 -> Demo 1.1 then it will show the Demo 1.1.1, Demo 1.1.2 etc. So I am planning to show back button at the top like
//back
Demo1->Demo 1.1
//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4
Note: My menu is completely dynamic, I don't want to add the static value.
$('.menu-item-has-children .sub-menu').css({
'left': '-320px'
});
$('.menu-item-has-children > a').click(function() {
//alert('hello');
var positionMenu = $(this).parent().attr('id');
//console.log(positionMenu);
$('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css({
'left': '0px'
});
var pMenu1 = $(this).text();
console.log(pMenu1);
$('.secondary').prepend(pMenu1);
});
ul {
padding-left: 0;
}
.secondary {
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
}
.menu li {
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
}
.menu-item-has-children>a {
position: relative;
display: block;
}
.menu-item-has-children .sub-menu {
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
}
.menu-item-has-children>a::after {
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
}
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
<div class="secondary">
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children">Demo1
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children">Demo 1.1
<ul class="sub-menu">
<li>Demo 1.1.1</li>
<li>Demo 1.1.2</li>
<li>Demo 1.1.2</li>
</ul>
</li>
<li id="menu-item-305">Demo 1.2</li>
<li id="menu-item-306">Demo 1.3</li>
<li id="menu-item-307">Demo 1.4</li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children">Demo2
<ul class="sub-menu">
<li id="menu-item-315">Demo 2.1</li>
<li id="menu-item-316">Demo 2.2</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now I am getting the output in the console.
Also getting the in the HTML view source
Now, How to make the clickable?
Your HTML.
<div class="secondary">
<div id="menu-breadcrumb"></div>
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children">Demo1
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children">Demo 1.1
<ul class="sub-menu">
<li>Demo 1.1.1</li>
<li>Demo 1.1.2</li>
<li>Demo 1.1.2</li>
</ul>
</li>
<li id="menu-item-305">Demo 1.2</li>
<li id="menu-item-306">Demo 1.3</li>
<li id="menu-item-307">Demo 1.4</li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children">Demo2
<ul class="sub-menu">
<li id="menu-item-315">Demo 2.1</li>
<li id="menu-item-316">Demo 2.2</li>
</ul>
</li>
</ul>
</div>
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
CSS
ul {
padding-left: 0;
}
.secondary {
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
}
.menu li {
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
}
.menu-item-has-children>a {
position: relative;
display: block;
}
.menu-item-has-children .sub-menu {
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
}
/* select only first child li that has sub menu to top 40 */
.menu > li.menu-item-has-children > .sub-menu {
top: 40px;
}
.menu-item-has-children>a::after {
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
}
/* below is style for menu breadcrumb */
.mbc-link-back {
color: #0066cc;
text-decoration: none;
}
#menu-breadcrumb a + a::before {
color: #222;
content: '>';
cursor: default;
padding: 0 3px;
}
JavaScript (jQuery)
$('.menu-item-has-children .sub-menu').css({
'left': '-320px'
});
var menuBreadcrumb = document.getElementById('menu-breadcrumb');
$('.menu-item-has-children > a').click(function() {
//alert('hello');
var thismenuLi = $(this).parent().attr('id');
let thismenuText = $(this).text();
let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + thismenuText + '</a>'
menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);
//console.log(thismenuLi);
$('.menu-item-has-children[id=' + thismenuLi + '] > .sub-menu').css({
'left': '0px'
});
});
// use event delegation to listen click on menu breadcrumb and go back.
$('body').on('click', '.mbc-link-back', function(e) {
e.preventDefault();
// in case user click on the item before last, go back all until the end.
$(this).nextAll().each(function(index) {
mbcGoBack($(this));
});
mbcGoBack($(this));
});
function mbcGoBack(jQThis) {
let menuLiId = jQThis.data('menuItemId');
$('.menu-item-has-children[id=' + menuLiId + '] > .sub-menu').css({
'left': '-320px'// must match from the beginning.
});
jQThis.remove();
}
I was renamed one of your JS variable to make it more understandable, add JS functional, modify CSS a little for top value for only first sub item, add CSS for menu breadcrumb.
See it in action
I have already asked this question but didn't get any answers so I'll try once again.
I have built a navigation menu on WordPress using jQuery to have a slide down/up animation on the submenus. I am using flexbox on the submenus which is what seems to cause the problems. When I change it to block it works fine but the design is not what I am looking for.
The problem and how to recreate it: The first time you refresh the page (or run the code on jsfiddle) and hover over the menu, the submenu will slide down over the height it should stop at and snap back after that. After that all the other submenus work fine. It's just I would like to fix that snap back since it does not look that good.
Does anyone have an idea why this is happening and/or how to fix it?
Link for the jsfiddle where you can test the problem yourself: https://jsfiddle.net/u2zs38oL/
And the code for the jsfiddle below:
HTML:
<header>
<nav class="main-navigation" id="desktop-navigation">
<div class="container-fluid">
<div class="menu-menu-1-container">
<ul id="menu-menu-2" class="d-flex justify-content-center">
<li
class="has-mega-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-92">
Test
<ul class="sub-menu">
<li
class="mega-menu-column menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93">
Test
<ul class="sub-menu">
<li
class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94">
Test</li>
</ul>
</li>
<li
class="mega-menu-column menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
Test
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
header .main-navigation {
display: block;
margin-left: 1rem!important;
margin-right: 1rem!important;
text-transform: uppercase;
}
header .main-navigation > div {
background: #000;
position: relative;
}
header .menu-menu-1-container {
height: 50px;
white-space: initial;
}
header #menu-menu-2 {
list-style: none;
margin: 0;
flex-direction: row;
}
header #menu-menu-2 > .menu-item {
padding: 0 20px;
height: 50px;
border-bottom: 3px solid;
border-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
header #menu-menu-2 .menu-item:hover {
border-color: red;
transition: 0.1s ease-in-out;
}
header #menu-menu-2 > li:hover > a {
color: red;
}
header .has-mega-menu > .sub-menu {
position: absolute;
background: #fff;
top: 50px;
left: 0;
width: 100%;
display: none;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
header #menu-menu-2 li, header #menu-menu-2 ul {
list-style: none;
padding: 0;
}
header #menu-menu-2 li a {
text-decoration: none;
}
header #menu-menu-2 > li > a {
color: #fff;
}
header .has-mega-menu a {
color: #000;
}
header .mega-menu-column {
margin-left: 10px;
margin-top: 25px;
margin-bottom: 25px;
padding: 0 15px!important;
}
header .mega-menu-column > a {
position: relative;
font-weight: 600;
letter-spacing: 1px;
padding-bottom: 10px;
pointer-events: none;
}
header .mega-menu-column > a::before {
content: "";
position: absolute;
height: 1px;
width: 14px;
bottom: 0;
background-color: #000;
opacity: 0.2;
}
header .mega-menu-column ul {
margin-top: 20px;
}
header .mega-menu-column ul li {
padding: 5px 0!important;
}
header .mega-menu-column ul a {
color: grey;
font-weight: 400;
line-height: 25px;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
display: block;
}
header .mega-menu-column ul li a:hover {
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-ms-transform: translateX(5px);
-o-transform: translateX(5px);
transform: translateX(5px);
color: #000;
border-bottom: 1px solid red;
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
jQuery:
jQuery(document).ready(function() {
jQuery('.main-navigation .has-mega-menu').hover(function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown({start: function() {
jQuery(this).css('display', 'flex');
}, duration: 250
});
jQuery(this).children('.sub-menu').css('z-index', '3')
}, function() {
jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
jQuery(this).children('.sub-menu').css('z-index', '2')
});
});
I found a way around this problem (at least for my case). So I found if on page reload, the submenu that is hidden and shown, has display flex instead of none then there seems to be no problems with the snapping. But obviously I do not want to start with the menu opened.
So what I did was set the submenu to flex and hid the menu with z-index until the jQuery has loaded and then hid (set display none) the submenu with jQuery. Then when hovering over the menu item toggled the slideDown and added higher z-index to that object.
Fiddle can be found here: https://jsfiddle.net/e319ydkm/
Changes I made to the original code:
header .has-mega-menu > .sub-menu {
display: none -> flex;
z-index: -1;
}
.hide-under {
background: #fff;
z-index: 1;
height: 1000px;
}
jQuery('.main-navigation .has-mega-menu > .sub-menu').hide();
This of course is not a perfect solution and I couldn't really figure out what is causing it other than that it is caused by flexbox (probably). I will not mark this reply as an answer since this isn't really the solution.
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
I have a drop down menu that I want to slide down when the Menu button is clicked and slide up when it's clicked again. Also slide up when clicking anywhere else in the document.
This is what I got so far: jsfiddle
HTML:
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Jquery:
$(function() {
// Dropdown toggle
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '100%'
}, 'slow');
});
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '-100px'
}, 'slow');
});
}
});
});
The problem with what I did is the animation happens only once and only when clicking to open the drop down menu.
I am not sure if you are aware but there are .slideUp(), .slideDown() and .slideToggle() methods available in jQuery to do this sliding animation up and down business.
Below is the snippet for your reference:
var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
dropdown.slideUp(0);
$(document).on('click', function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
if (dropdown.is(':visible')) {
dropdown.stop(true).slideUp();
}
}
});
dropdownToggle.on('click', function() {
dropdown.stop(true).slideToggle();
});
});
body { padding: 2em; }
a {
text-decoration: none;
color: #000;
}
nav { position: relative; }
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown {
position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Notes:
You had CSS transition applied on the same element and you were also trying to apply animation via the use of .animate() method of jQuery on the same element. Both were conflicting each other. I have removed the CSS transition parts.
I also have removed the height: 0 part and you will notice that there is a dropdown.slideUp(0) line up there which basically applies a .slideUp() animation of 0 duration to immediately set height: 0 on the element.
Hope this helps.
Answering my own question for anyone who's interested, this is the code:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
body {
padding: 2em;
}
a {
text-decoration: none;
color: #000;
}
nav {
position: relative;
}
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
ul.dropdown li {
list-style-type: none;
}
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item
</li>
<li>Menu
</li>
<li>Settings
</li>
<li>Search
</li>
</ul>
</nav>
I used toggleClass and removeClass to add the animation I wanted and that's translate (the idea originally from Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
Been researching some way to make my side navigation bar fadein on a specific area of my website. Just not sure how to go about it. I found some jquery that is around the problem. But being new to the stuff im not sure how to implement it into my specific code.
The example given is
if ($(window).scrollTop() >= "number of pixels") {
if ($('"button plus number"').css('display') === 'none') {
$('"button plus number"').fadeIn('slow');
$('"button plus number"').prev().fadeOut();
$('"button plus number"').next().fadeOut();
}
}
So basically with my code I am wanting is to get .cbp-fbscroller to fade in or at least appear at about 900px. Also once i get an understanding of how it works I could then use the code to make other things fade in on scroll points as well.
Here is a basic fiddle so you guys can get the idea http://jsfiddle.net/vLf18Lbk/
HTML area for fadein:
<div class="main">
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
Section 1
Section 2
Section 3
Section 4
Section 5
</nav>
<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
</div>
</div>
CSS needing to fade in:
/* The nav is fixed on the right side and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 100px;
top: 50%;
width: 26px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
your jQuery code is correct.
when you scroll to bottom more than 250px fade in "go to top", in other wise fade out "go to top"
you can check line 41 of javascript
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
///// edit go to top
$(window).scroll(function() {
if ($(this).scrollTop() > (250)) {
$("#top").fadeIn('fast');
} else{
$("#top").fadeOut('fast');
};
});
$("a[href='gototop']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
#top{
position: fixed;
bottom: 5px;
right: 5px;
background-color: #ffff00;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
go to top
In the same way you can select each tag fade or appearance.