CODEWITHSUNDEEP
javascripthtmlmenu
Billy Squibs
Billy Squibs

Reputation: 1

How to change menu color using javascript

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.

Upvotes: 0

Views: 1722

Answers (3)

T I
T I

Reputation: 9943

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

Upvotes: 0

Bry6n
Bry6n

Reputation: 1989

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.

Upvotes: 0

Lennart
Lennart

Reputation: 1028

You can just use CSS:

ul.sideNav li a {
  color: red;
}

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

Upvotes: 3

Related Questions