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;
}
Related
I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.
also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
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>
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/
Newbie in JS / jQuery here.
First problem: When page is loading or it is refreshing whole sub-sub menus are blinked for like 0.5sec so they can "hide". I have put the script firstly on the end of "body" tag, but after this blink I've put it in "head" so is there any way to make it actually hide, like really hide, to not be shown when page is on load?
Second problem is when I'm clicking on either blue or green square menu is not sliding smoothly. It's like a bounce effect. Is it because of "hide"? And last problem is with slideDown function. Where shall I use slideUp to make it go back to the position where it hides?
jQuery(document).ready(function($)
{
$(".raid ul").hide();
$(".raid").hide();
$(".wod").one("click", function()
{
$(".wod ul li").slideDown(200);
});
$(".mop").one("click", function()
{
$(".mop ul li").slideDown(200);
});
$(".hfc").click(function()
{
$(".hfc").addClass('x');
$(".hfc ul").slideToggle(200);
});
$(".soo").click(function()
{
$(".soo ul").slideToggle(200);
});
});
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#progress
{
padding: 0;
float: left;
width: 200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
box-shadow: 2px 2px 2px 0px black;
background-repeat: no-repeat;
}
h1
{
margin-top: 8px;
border-bottom: 4px solid #00c99a;
padding-bottom: 4px;
}
.expansion
{
text-align-last: center;
width: inherit;
height: 108px;
}
.expansion:first-child
{
margin-top: -20px;
}
.mop, .wod
{
width: inherit;
height: inherit;
}
.wod > ul
{
margin-top: 90px;
}
.mop > ul
{
margin-top: 90px;
}
.wod
{
border-bottom: 5px solid black;
background-color: blue;
}
.mop
{
border-bottom: 5px solid black;
background-color: green;
}
.raid > ul
{
padding-bottom: 10px;
}
h3
{
font-size: 20px;
padding: 10px 0 10px 0;
}
.nhm
{
display: inline-block;
text-align: center;
padding: 4px 20px 1px 20px;
border: 2px solid white;
border-radius: 50px;
cursor: default;
color: white;
font-weight: 300;
}
.hfc-progress, .soo-progress,
{
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
color: white;
}
.hfc, .soo
{
color: limegreen;
background-color: rgba(37, 65, 23, 0.5);
}
.hfc:hover, .soo:hover
{
cursor: pointer;
color: greenyellow;
}
.x
{
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
<div id="expansion">
<ul>
<li class="expansion wod"><br />
<ul>
<li class="raid hfc"><h3>Hellfire Citadel ↓</h3>
<ul>
<li class="hfc-progress">Hellfire Assault
<ul>
<li class="nhm hfcn">N</li>
<li class="nhm hfch">H</li>
<li class="nhm hfcm">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expansion mop"><br />
<ul>
<li class="raid soo"><h3>Siege of Orgrimmar↓</h3>
<ul>
<li class="soo-progress">Immerseus
<ul>
<li class="nhm soon">N</li>
<li class="nhm sooh">H</li>
<li class="nhm soom">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
If you really want the elements hidden, use CSS. The CSS can have properties like
.raid ul {
display: none;
}
.raid {
display: none;
}
instead of calling the hide() function in jQuery. This way, if you include the CSS in the head section and keep your JS in the bottom, the blink would not happen (because the browser would keep them hidden by default)
I tried everything but with no luck. I dont know what i did wrong. Please help me!
All I wanted to do is to create a button that can scroll right and left of the schedule-background-container.
Thank you in advance for any help
html
<div id="schedule-background">
<div id="schedule-heading-container">
<div id="schedule-button-right"></div>
<div id="schedule-button-left"></div>
<div id="schedule-background-overall">
<div class="schedule-background-container">
<h2 class="schedule-date">July 23</h2>
<ul class="schedule-ul">
<li class="schedule-title">Homework
</li>
<li class="schedule-other">10:00AM</li>
<li class="schedule-title">Firework
</li>
<li class="schedule-other">11:00AM</li>
<li class="schedule-title">Dexter
</li>
<li class="schedule-other">12:00PM</li>
</ul>
</div>
<div class="schedule-background-container">
<h2 class="schedule-date">July 24</h2>
<ul class="schedule-ul">
<li class="schedule-title"> hello
</li>
<li class="schedule-other">9:30am</li>
</ul>
</div>
</div>
</div>
CSS
#schedule-button-right {
background-color: grey;
position: absolute;
width: 9px;
height: 8px;
margin-top: 10px;
margin-left: 145px;
cursor: pointer;
z-index: 2;
}
#schedule-button-left {
background-color: grey;
position: absolute;
width: 9px;
height: 8px;
margin-top: 10px;
margin-left: 5px;
cursor: pointer;
z-index: 2;
}
#schedule-background {
background-color: white;
position: absolute;
margin-top: 120px;
margin-left: 10px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
width:160px;
height: 600px;
float: left;
overflow: hidden;
}
#schedule-heading-container {
background: #088a26;
width: 160px;
height: 25px;
}
#schedule-background-overall {
min-width: 320px;
float: left;
position:relative;
}
.schedule-background-container {
width:160px;
height:600px;
float: left;
position:relative;
}
.schedule-date {
color: #ffffff;
text-align: center;
margin-top: 0;
padding-top: 3px;
font: Calibri;
font-size: 18px;
}
.schedule-title {
font-size: 14px;
font-weight: bold;
text-align: left;
}
.schedule-other {
font-size: 12px;
padding-bottom: 3px;
}
.schedule-ul {
position:relative;
margin-top:10px;
height:550px;
list-style:none;
padding-left: 10px;
}
.schedule-ul li a {
text-decoration: none;
color:#0d5887;
}
.schedule-ul li a:hover {
text-decoration:underline;
}
Javascript
$(document).ready(function () {
var $item = $('div#schedule-background-overall');
$('div#schedule-button-right').click(function () {
$item.animate({
'left': '-=160px'
}, 'slow');
});
$('div#schedule-button-left').click(function () {
$item.animate({
'left': '+=160px'
}, 'slow');
});
});
To make it easier here is the code in jsfiddle.net
Again, Thank you!!!
--------------------------Solved---------------------
Didnt load library! Thanks for your help everyone!
I think there are two errors from what I can see. One is the $ symbol missing in the below line:
var $item = ('div#schedule-background-overall');
Change it to: var $item = $('div#schedule-background-overall');
Other is the capital "L" in the below:
$('div#schedule-button-right').click(function () {
$item.animate({
'Left': '-=160px' // Change it to left in all lower-case
}, 'slow');
});
Try by adding $ as
var $item = $('div#schedule-background-overall');
Try assiging margins
$item.animate({'margin-Left': '160px'},slow);
and it should be
var $item = $('div#schedule-background-overall');