I have an animate sidebar which appears when user clicks on a hamburger button.
Here is the structure :
$('#nav-toggle').click(function() {
if($('#nav-toggle').hasClass('active')){
$('.menu').animate({
right: "0px"
}, 200);
}else{
$('.menu').animate({
right: "-285px"
}, 200);
}
});
.menu{
right:-285px;
height:100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a{
color:white;
}
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
Actually we can open menu by clicking on #nav-toggle element and close it by clicking on this element too. I'd like to allow user to close this menu by clicking anywhere in the page.
How can I do do that? I tried with e.preventDefault(); in my if statement but it doesn't work.
Thanks!
I suggest to use toggleClass method and animate it by adding transition: .2s to your .menu,
working example:
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar')
});
$('body').click(function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
})
.menu {
right: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
transition: .2s
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a {
color: white;
}
.bar {
right: 0px;
}
body,
html {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
Try this, it will always hide of user clicks on body
$(document).on('click',function(){
if($("#nav-toggle").hasClass("active")){
$('.menu').animate({ right: "-100%" }, 200);
}
});
You can add a parent section to your page and attach a click event same as you have done with #nav-toggle, something like this
$('.parent-section').click(function() {
if($('#nav-toggle').hasClass('active')){
$('.menu').animate({
right: "0px"
}, 200);
} else {
$('.menu').animate({
right: "-285px"
}, 200);
}
});
Or you can add this to body tag directly, If you are going to use this i suggest go with section not body, hope this will help you :)
i've slightly edited your code :
here it is :
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);});
$(document).click(function(e){$('.menu').animate({right: "-285px"}, 200);});
https://jsfiddle.net/ndxqdqwc/
Complementing the Gintoki's answer
$('#nav-toggle').on('click', function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar');
$('body').one('click', function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
});
});
This will just remove the listener from body, so well, it's not executing every time.
I'm actually not sure what is better for performance, but I don't like the fact that every click on the website is going through that "if(hasClass)"
$('#nav-toggle').click(function(e) {
e.stopPropagation();
$(".menu").toggleClass('bar')
});
$('body').click(function(e) {
if ($('.menu').hasClass('bar')) {
$(".menu").toggleClass('bar')
}
})
.menu {
right: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 1;
background-color: #111111;
transition: .2s
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li a {
color: white;
}
.bar {
right: 0px;
}
body,
html {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
Related
I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.
In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.
Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.
I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>
I have a one page website. Sample fiddle is here.
I want to add effect like on www.fueled.com. There phone is not shown in the first and section and starts showing from the third section and again hides after 3-4 sections. A kind of Parallax effect. Can I please get help with this? My sample fiddle is given above.
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
#first {
height: 100vh;
background: #F06A59;
}
#second {
height: 100vh;
background: #FB3E47;
}
#third {
height: 100vh;
background: #FFA306;
}
#fourth {
height: 100vh;
background: #528AFC;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#fifth {
height: 100vh;
background: #52FC6C;
}
#sixth {
height: 100vh;
background: #CFDA25;
}
.header {
width: 100%;
position: absolute;
padding: 20px
}
.nav {
position: fixed;
width: 100%;
}
.nav ul {
list-style: none;
}
.nav ul li {
display: inline;
font-size: 18px;
margin-bottom: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.nav ul li a {
text-decoration: none;
color: #000;
padding: 10px 5px 10px 70px;
font-family: agency fb;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 2px 4px #000000;
}
.nav ul li a:hover {
color: #fff;
text-shadow: 1px 6px 4px #000000;
transition: all 0.4s ease-in-out;
}
.nav-active {
color: red !important;
}
.phone {
left: 43%;
top: 28%;
position: fixed;
background: url(https://fueled.com/assets/images/home/project-phone--iphone.png) no-repeat;
background-size: 250px 500px;
padding: 70px 25px 75px 25px;
display: block;
}
.phone-inner {
width: 200px;
height: 355px;
border: 1px solid #000;
}
<div class="header">
<div class="nav">
<ul id="navlist">
<li>Home
</li>
<li>Features
</li>
<li>About Us
</li>
</ul>
</div>
<div class="phone" align="center">
<div class="phone-inner"></div>
</div>
</div>
<section>
<div class="main" id="first">
<video width="100%" autoplay="" loop="" muted>
<source src="vid/vids.mp4" type="video/mp4">
</video>
</div>
</section>
<section>
<div class="main" id="second"></div>
</section>
<section>
<div class="main" id="third"></div>
</section>
I think ScrollMagic is the perfect tool for what you want to do.
http://scrollmagic.io/
Some good examples
http://scrollmagic.io/examples/advanced/parallax_sections.html
http://scrollmagic.io/examples/advanced/section_slides_manual.html
Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?
Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}
I have a menu designed to hold some links for a forum. I would like it to open on click and close on click. Here is my code.
/*Custom BBPress admin links menu*/
function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
if ( is_user_logged_in() ) {
$menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
$menulinks .= '<li class="parent">Options';
$menulinks .= '<ul class="bbp_custom_links_submenu">';
foreach($r['links'] as $key => $val) {
$menulinks .= "<li>{$val}</li>";
}
$menulinks .= '</ul></li></ul>';
echo $r['before'] . $menulinks . $r['after'];
}
}
add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_action( 'wp_footer', 'overflow_overriding' );
function overflow_overriding() {
if ( !is_user_logged_in() ) {
}else{
?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
jQuery('.bbp-admin-links:even').click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
</script>
<?php
}
}
I have tried using this link as a guide.
https://stackoverflow.com/a/2937603/6147300
I have got all the Jquery correct, but I do not know how to use the CSS to target what I need to target. Also I am unclear on where to put the CSS, does it need to be in the Jquery code or in my CSS editor.
Any suggestions?
this is what you want:
Copy, and save in HTML file to start test it.
<style>
#lang-selector {
font-size: 12px;
height: 21px;
margin: 7px auto 17px auto;
width: 250px;
font-family: Verdana;
}
#lang-selector span {
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a {
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a {
width: 186px;
}
#lang-selector ul ul {
display: none;
position: absolute;
}
#lang-selector ul ul li{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a {
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 12px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a {
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover{
background: #c4262c;
color: #fff;
}
</style>
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
A good method is to add a class with jQuery and then target the styles of that class with CSS. See the example below.
HTML
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<button id="toggle">Toggle Menu</button>
CSS
#menu {
display: block;
list-style-type: none;
position: absolute;
top: 0;
right: -120px;
width: 100px;
background: #000;
color: #fff;
padding: 10px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.active {
right: 0px !important;
}
JS
$("#toggle").on('click', function() {
$('#menu').toggleClass("active");
});
https://jsfiddle.net/7f1kxo9f/
I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>
My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}