1

I have a menu which slide toggles in and out on click, but at the same time i'd like to have a grey background around the menu to fade toggle in and out. I don't want to do it with fadeToggle but with toggleClass, in order to be able to add more styles if necessary.

The toggleClass doesn't work at all, I can't figure out why. Thanks a lot for your help!!

$(document).ready(function(e) { $('#button').click(function() {	$('#menu').slideToggle();	$('#bgr').toggleClass('display');	}); });
#menu { display:none; position: absolute; top:40px; right: 10%; z-index:10; width: 30%; height:400px; background: lightblue;} #bgr { display:none; opacity:0; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:opacity 1s; transition:opacity 1s; } #button {cursor: pointer;} #button p { position: absolute; top:0; right:10%; z-index:100; margin:0; color:lightblue; font-size:2em; } .display { display:block; opacity:1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr"></div>

Improve this question
4
  • css3 allowed to use? Commented Aug 21, 2015 at 12:55
  • sure, as long is it's more or less supported by most browsers... Commented Aug 21, 2015 at 12:56
  • The accepted answer fails miserably. I assume you are trying to cover over the rest of the page while showing the menu. If so, you will never be able to click anything on the page with his answer, since simply setting the opacity to 0 will not allow anything to be clicked below it. jsfiddle.net/cceg9Ldp/3 Commented Aug 21, 2015 at 13:32
  • This is proper jsfiddle.net/cceg9Ldp/4 Commented Aug 21, 2015 at 13:38

6 Answers 6

Reset to default
2

The key is using visibility and opacity in tandem for a smooth animation and also being more specific in the display declaration using #bgr.display{} instead

http://jsfiddle.net/cceg9Ldp/4/

CSS

button { position:relative; z-index:2; } #bgr { opacity:0; visibility:hidden; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:all 1s; transition:all 1s; } #bgr.display { opacity:1; visibility:visible; }

HTML

<button>Click Me</button> <div id="bgr"></div>

jQuery

$('button').click(function(){ $('#bgr').toggleClass('display'); });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

i'm sorry i don't quite get it, where do i put this in?
My bad, where you declared .display, use #bgr.display...updated my answer
thanks for insisting, i wasn't thinking things through properly when i thought i had my solution. this works 100% and it's very straight-forward as well! genius, thanks 1000!
Glad I could Help @Ollie :)
1

Try adding !important to your css

.display { display:block !important; opacity:1 !important; } 

$(document).ready(function(e) { $('#button').click(function() { $('#menu').slideToggle(); $('#bgr').toggleClass('display'); }); });
 .display { display: block; opacity: 1; } #menu { display: none; position: absolute; top: 40px; right: 10%; z-index: 10; width: 30%; height: 400px; background: lightblue; } #bgr { display: none; opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; background: grey; -webkit-transition: opacity 1s; transition: opacity 1s; } #button { cursor: pointer; } #button p { position: absolute; top: 0; right: 10%; z-index: 100; margin: 0; color: lightblue; font-size: 2em; } .display { display: block !important; opacity: 1 !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr"></div>

Improve this answer

Comments

1

The problem is that the id selector #bgr is more specific than the class selector .display, so its styles "win" when the two conflict. toggleClass() is adding/removing the class, but it doesn't matter since the display: none from #bgr overrides display: block from .display.

Although !important is rarely a great idea, it does solve the problem here, allowing the class styles to override the id styles:

.display { display:block !important; opacity:1 !important; } 

$(document).ready(function(e) { $('#button').click(function() {	$('#menu').slideToggle();	$('#bgr').toggleClass('display');	}); });
#menu { display:none; position: absolute; top:40px; right: 10%; z-index:10; width: 30%; height:400px; background: lightblue;} #bgr { display:none; opacity:0; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:opacity 1s; transition:opacity 1s; } #button {cursor: pointer;} #button p { position: absolute; top:0; right:10%; z-index:100; margin:0; color:lightblue; font-size:2em; } .display { display:block !important; opacity:1 !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr"></div>

Improve this answer

4 Comments

You easily just do #bgr.display{}
is this a fade in animation? It will just hide and show the div right?
thanks a lot Paul, this makes sense and it does work in terms of toggling the background, but the transition doesn't work. Do you know how I can get that to work? Plus you wrote that !important is rarely a great idea... why is that - and would it be better then to change to #bgr to .bgr?
@Raj: basically yes, but i would prefer to solve it with toggleClass instead of fadeToggle, because i might have to apply further styles to the div - not only fading.
0 
HTML: <div class="#bgr"></div> css: #bgr{ opacity:0; background-color: grey; transition: all 0.2s linear; } .fadein{ opacity: 1; } JS: $('#bgr').toggleClass('fadein');

Try this. it will work!

Improve this answer

1 Comment

please add browser prefix, it will work from IE9+ and all browsers
0

If you are using the "absolute" property then you can omit the "display:none" to achieve smooth transition effect. I have edited #bgr and .display for you. The toggle class works along with you get a smooth transition for your Dark BG.

The JS you have written will work with this example.

#bgr { opacity:0; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:opacity 1s; transition:opacity 1s; } .display { opacity:1!important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr"></div>

Improve this answer

4 Comments

beautiful, thanks a lot K.Shrestha, this works perfectly, finally!!
I'm pretty sure this is going to fail, you can't click through an element that has opacity:0;
Hi @VIDesignz you are correct, this code won't work. But applying this code with his previous codes will work. Thanks for your correction though.
I agree, not your fault man, the op did not exactly describe his intentions. It just made sense to me how it was going to be used so I tried to help him avoid future issues by raising the point I did.
0

I think you should just define a new style no-display

$(document).ready(function(e) { $('#button').click(function() {	$('#menu').slideToggle();	$('#bgr').toggleClass('display');	}); });
#menu { display:none; position: absolute; top:40px; right: 10%; z-index:10; width: 30%; height:400px; background: lightblue;} .no-display { display:none; opacity:0; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:opacity 1s; transition:opacity 1s; } #button {cursor: pointer;} #button p { position: absolute; top:0; right:10%; z-index:100; margin:0; color:lightblue; font-size:2em; } .display { display:block; opacity:1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr" class="no-display"></div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.