jQuery menu left sidebar

Question

jQuery

<html>
  <head>
    <link rel="stylesheet" href="sidr-package-1.2.1/stylesheets/jquery.sidr.dark.css" />
    <script src="jquery-1.11.1.js"></script>
    <script src="sidr-package-1.2.1/jquery.sidr.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#simple-menu').sidr();
      });
    </script>
  </head>

  <body>
    <a id="simple-menu" href="#sidr">Toggle menu</a>

    <div id="sidr">
      <ul>
        <li><a href="#">List 1</a></li>
        <li class="active"><a href="#">List 2</a></li>
        <li><a href="#">List 3</a></li>
      </ul>
    </div>
  </body>
</html>

Questions

My questions are following:

How to hide the slidebar when I click outside of the hyperlink (a tag)?
I want to style the list word into orange color. How to write in css?

Answer 1

(1) Target every element inside body except a with id="simple-menu"

$('body *').not('body a#simple-menu').click(function() {
    // hide sidebar
    $('#sidr').hide();
})

(2)

#sidr li > a {
    color: orange;
}

Answer 2

For the first question you can do the followin:

$(body).click(function(){
     $('#simple-menu').sidr();
     // if it has a toggle function the library itself it will work
     // if not you have to give us the js code so we can do the opposite function
})

For the second question:

#sidr li a{
     color:orange;
 }

Answer 3

(1) change in jquery.sidr.dark.css file .sidr ul li a, .sidr ul li span

(2) use $.sidr('close', 'sidr');

jQuery menu left sidebar

Question

jQuery

Questions

3 answers

solution1
0 2014-12-03 13:18:50

solution2
0 2014-12-03 13:21:55

solution3
0 2014-12-03 13:24:19

jQuery menu left sidebar

Question

jQuery

Questions

3 answers

solution1 0 2014-12-03 13:18:50

solution2 0 2014-12-03 13:21:55

solution3 0 2014-12-03 13:24:19

solution1
0 2014-12-03 13:18:50

solution2
0 2014-12-03 13:21:55

solution3
0 2014-12-03 13:24:19