How to change menu color using javascript

Question

I'm trying to make a static side menu a little more dynamic by adding some effects to it.

From the code below I want "First Heading" and "Second Heading" to be distinct from their nested li's. I'm looking to have a background colour and a particular text (say red) and for these styles to be permanent. On the other hand, the nested li's (A1-B3) should have no background and the text should change from something like grey if not active to green if the link is selected.

<ul class="sideNav">
<li class="first active"><a>First Heading</a>
<ul>
<li class="first"><a>A1</a></li>
<li><a>A2</a></li>
<li class="last"><a>A3</a></li>
</ul>
</li>   
<li class="last active"><a>Second Heading</a>
<ul>
<li class="first"><a>B1</a></li>
<li><a>B2</a></li>
<li class="last"><a>B3</a></li>
</ul> 
</li>
</ul>

I've had a look on the forums and while this () seems to be similar to my requirements, my total lack of js/jquery knowledge is really hampering me.

Any guidance would be appreciated

::Edit::

This () might close to what I'm looking for (it's less complicated than the example in the previous link) but it doesn't quite cove what I need. So any help would still be welcomed.

You have already summed up your problem "my total lack of js/jquery knowledge is really hampering me.", so don't run before you can walk learn some Javascript then move onto jQuery, then put what you have learnt into context by follow tutorials such as on nettuts — T I
– T I, Commented Feb 9, 2012 at 13:59

Lennart · Accepted Answer · 2012-02-09 14:04:01Z

3

You can just use CSS:

ul.sideNav li a {
  color: red;
}

ul.sideNav li ul li a {
  color: grey;
}

answered Feb 9, 2012 at 14:04

Lennart

1,0482 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bry6n · Accepted Answer · 2012-02-09 14:19:27Z

0

If you want to change the colors of certain things, you should use CSS conditionals really. For example, if I want my list items to be x color when moused over, y color default, and z color when clicked... my CSS would look like this:

ul.sideNav:link,li.sideNav:link
{
color:y;
}
ul.sideNav:active,ul.sideNav:visited,li.sideNav:visited,li.sideNav:active
{
color:z;
}
ul.sideNav:hover,li.sideNave:hover
{
color:x;
}

You can apply these to any tag, such as the anchor (), and there are a variety of different condtionals to use. I'd highly suggest reading up on HTML, DOM, CSS, and JavaScript at W3Schools, they have a lot of good guides to get you going.

edited Feb 9, 2012 at 14:19

answered Feb 9, 2012 at 14:06

Bry6n

2,0391 gold badge13 silver badges20 bronze badges

2 Comments

Lennart Over a year ago

There's a lot of outdated or wrong information, but presented as correct/ the way to go. Lots of better resources available. w3fools.com/#what-should-be-done

Bry6n Over a year ago

@Lennart, I learned from them almost half a year ago, and went to some of the sites listed there afterwords. Thanks for that site, by the way. I'll make sure to starting suggesting those more.

T I · Accepted Answer · 2012-02-09 16:27:27Z

Please note this is not a direct answer to the question but I feel it would be useful for the OP and hopefully others

Whilst I most definitely aggree that in your case you can most simply use css to style your elements (please see @lennart's answer for example of child selection) there may be occassions when you need to be more dynamic when applying style, you can of course use jquery's .css() and similar functions, perhaps indeed use plain old javascript however this usually leads to dom traversal which can be fiddly even with jquery, the second option would be to dynamically add stylesheets which can also be quite effective, a third option would be to change/manipulate the <style> tag, for example you may have style defined in some json data where we can be a bit creative and build a string of css and add this to the <style>

// turn #accordion into a simple accordion menu
// adds style to the head from json data
$(document).ready(function() {

  // hide <ul> nested in accordion
  $('#accordion').find('ul').hide();

  // add click event to accordion .heading
  $('#accordion').find('.heading').click(function(e) {
    // do not follow anchor    
    e.preventDefault();      
    // slide up any open sections
    if(!($(this).hasClass('open'))) {
      $('.open').removeClass('open').next().slideUp();
    }
    $(this).addClass('open').next().slideToggle();
  });

  // a function that parses json and
  // appends it to <style>
  function addStyleFromJson(json) {
    // turn json into normal string
    var style = JSON.stringify(json);
    // remove apostrophes, colons before {, opening and closing {}
    style = style.replace(/(")|(:(?=\{))|(^\{)|(\}$)/g, '');
    // remove commas after }
    style = style.replace(/(\}|\;),/g, function($0, $1){
    return $1 ? $1 + '' : $0;
    });
    // prepend this style with any style declared in <head>
    style = $('style').text() + style;
    // append style element to head
    $('style').text(style);  
  }

  // load some style
  $.ajax({
    url: 'http://dl.dropbox.com/u/47426368/somejson.js',
    dataType: 'jsonp',
    jsonp: false,
    jsonpCallback: 'myCallback',
    cache: true,
    success: addStyleFromJson
  });
});

in this demonstration we turn html into an accordion style menu then load some json from a remote location and parse this into the <style> tag (presuming it is already there). As I have previously stated this may not be the best option and there are many options so as I said in my comment you must really learn this stuff in order to use it, it is no different from riding a bike or doing maths there is no magic just (hard)work and dedication :-), i hope that this demonstrates how you can use several technologies relatively simply to create something a bit more dynamically which I think was one of the reasons javascript came about

here is a demo

Collectives™ on Stack Overflow

How to change menu color using javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related