Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Dropdown question…

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25017
    Eraser35
    Member

    So I have a basic dropdown (this <li> is within a larger <ul> that has other dropdown items, so I didn’t post the code for the <ul>):

    Code:
  • Profile

When user clicks on "Profile" the sub-navigation shows with jQuery, and when clicks the "Profile" button again, the sub-navigation fades away… In addition when "Profile" button is clicked, it receives a grey background color for its box-model as well as the text turns white from black.. Similar functionality to your title bar dropdowns in your Mac OS Leopard.

Code:
$(‘#profile a’).click(function(){
if ($(‘.sub-navigation’).is(“:hidden”)){
$(‘.sub-navigation’).show();
$(‘#profile’).css( {“background-color”: “#888888”});
$(‘#profile a:first’).css( {“color”: “#FFFFFF”});}
else {
$(‘.sub-navigation’).fadeOut();}
});

Issue: Right now, the only way to deactivate (fade away) the sub-navigation is for the user to click the profile button and the sub-nav fades away. However, the "Profile" button with its grey background and white text still remains. So, I would like for everything to go back to its normal unclicked state when the profile button is deactivated. Also, just like in an operating system, i.e. Mac/Windows, when you click anywhere else on the screen the dropdown list deactivates in the same way as if you were to click the button (in this case Profile) to deactivate it. I would like this to also trigger the same response.

Thanks for looking into my issues.

#59574
Eraser35
Member

a little bit better…
jQuery:
$(‘#profile a’).click(function(){
if ($(‘.sub-navigation’).is(":hidden")){
$(‘.sub-navigation’).show();
$(‘#profile’).addClass("selectedbgcolor");
$(‘#profile a:first’).addClass("selectedfontcolor");}
else {
$(‘.sub-navigation’).fadeOut();
$(‘#profile’).removeClass("selectedbgcolor");
$(‘#profile a:first’).removeClass("selectedfontcolor");}
});

CSS:
.selectedbgcolor {
background-color: #888888;
}

.selectedfontcolor {
color: #FFFFFF;
}

I can’t get .selectedfontcolor to work. Also, I would like for .selectedbgcolor to fadeOut just like the sub-nav does instead of just being removed.. I’m new to jQuery and JS so excuse me if I don’t know what I am doing :)

#59869
Mr KiTT3N
Member

You cannot fade out a selector
Instead of doing .removeClass(‘#id’)

you need to do .stop().animate({‘backgroundColor’ : ‘#888888’}, 2000)

hope that helps

Viewing 3 posts - 1 through 3 (of 3 total)