Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

How to make left sidebar menu items a specific color when clicked

Hello,

Please take a look at the site I'm working on:

http://www.simplifymedical.com/physicians/

You will see there is a menu bar on the left hand side of the page. When you click a section I want that specific menu item to change to a light green color, otherwise I want them to be black as they are.

Can't seem to figure this out. Please help! Thanks!

Ashish Mehra
Ashish Mehra
Courses Plus Student 340 Points

You can use jquery for that 

$('li . menu-item').click(function(){
     $(this).addClass('active');
     $(this).siblings().removeClass('active');
})
Kevin Matsuo
Kevin Matsuo
36,064 Points
Kevin Matsuo
Kevin Matsuo
36,064 Points

using CSS only, you can add this line of code on line 298 of custom_css.css

.simplify-disc-left-nav ul li:hover a {
    color: #8DC63F !important;
}
Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Thank you Kevin - What about getting rid of the green coloring on the top menu item on left menu bar ?

1 Answer

Kevin Matsuo
Kevin Matsuo
36,064 Points
Kevin Matsuo
Kevin Matsuo
36,064 Points

on line 279 of index.html remove the classname 'active' from the class.

line 279: <li class="menu-item active">

this is a css answer to your question, which was posted in the css community. however Ashish is correct in that this site was built with the intention of using jQuery to add and remove the classname to the list items. the classname 'active' is dependent upon css and jQuery, in that once the classname 'active' is added, the color of the list item will remain a green color, which is preferred for UI purposes so that the user can see where on the page they are currently looking at.

best of luck. once you move on to jQuery and JavaScript you can make a more permanent fix for this by adding back in the classname 'active' to the first list item and implement the snippet of jQuery code that Ashish has provided in your site's .js file.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Ok thanks guys - So when clicked on want the color to be green so -

I added the javascript and made the CSS changes you suggested Kevin - what other steps should I take?

Thanks for your time guys

Kevin Matsuo
Kevin Matsuo
36,064 Points
Kevin Matsuo
Kevin Matsuo
36,064 Points

the code that you copied from Ashish had a small typo in it.

you define a class with a period and a word followed by it, with no space. so instead of 'li . menu-item', it should be 'li .menu-item'

and i see that your site has a bunch of jquery plugin scripts located below the footer, but no script src to a jquery cdn like so: <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> maybe include that near the footer and the jquery function will work.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Weird - I just tried all that but still not working - I need to get better with jQuery because this is beyond me