Grow your CSS skills. Land your dream job.

jQuery Dropdown question…

  • # June 23, 2009 at 11:48 am

    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.

# June 23, 2009 at 1:43 pm

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 :)

# June 29, 2009 at 11:17 am

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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".