0

I am learning CSS and by now I have this :

https://jsfiddle.net/marquesm91/ahwxwyca/

Basically, I want to highlight the element I clicked on and stay highlighted when I click outside of the element. When I am switching between elements it only highlights the actual element.

$(function() {
  $('#menu').metisMenu({
    toggle: false // disable the auto collapse. Default: true.
  });
});
#menu a:hover,
#menu a:focus {
  color: #fff;
  background-color: #2a6496;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <ul class="metismenu" id="menu">
            <li>
              <a href="#" aria-expanded="false">Menu<span class="glyphicon arrow"></span></a>
              <ul aria-expanded="false">
                <li><a href="#">item 2.1</a>
                </li>
                <li><a href="#">item 2.2</a>
                </li>
                <li><a href="#">item 2.3</a>
                </li>
                <li><a href="#">item 2.4</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </aside>
    </div>
  </div>
</div>

By now, my CSS don't help me. Any suggestions?

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
marquesm91
  • 535
  • 6
  • 23

2 Answers2

0

CSS can interact with hover, but does not have the capability to interact with clicks in the way you describe. You will need Javascript.

$('#menu').find("a").click(function(){
    $(this).css("background-color","#2a6496");
    $(this).css("color","#fff");
});

Here's a fiddle.

PS, When making fiddles with jQuery, be sure to select jQuery from the JS menu.

Maybe this is closer to what you want:

$('#menu').find("a").focus(function() {
    $('#menu').find("a").each(function() {
        $(this).css("background-color", "initial");
        $(this).css("color", "initial");
    });
    $(this).css("background-color", "#2a6496");
    $(this).css("color", "#fff");
});

https://jsfiddle.net/zq0cpohb/

This only highlights the last element clicked on..

I wrestled a bear once.
  • 22,983
  • 19
  • 69
  • 116
  • Now I understanding. So what I want to do only can be done with JS. I forgot to mentioned that only the actual element have to be highlighted and with your javascript code all the elements I clicked were affected. Can you help me complementing your answer? – marquesm91 Nov 03 '16 at 14:01
  • @marquesm91 - I edited the answer. If this did it for you please remember to hit the checkmark. Good luck. – I wrestled a bear once. Nov 03 '16 at 14:13
  • Exatcly what I am looking for! Thanks! Just for future resources, is this the best way to do it or if I go deeper in Javascript I can have a better solution? – marquesm91 Nov 03 '16 at 14:14
  • yeah, for this exact behavior this is probably the easiest solution. – I wrestled a bear once. Nov 03 '16 at 14:17
0

This isn't really possible without some CSS hack.

The best way to do this would be through JavaScript.

Try something like this:

$("#menu a").click(function() {
    $(this).addClass("focused");
});

And the CSS:

.focused {
    color: #fff;
    background-color: #2a6496;
}
Community
  • 1
  • 1
georges8899
  • 70
  • 5