Open/close Jquery menu on click

Question

I have a menu designed to hold some links for a forum. I would like it to open on click and close on click. Here is my code.

/*Custom BBPress admin links menu*/
function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
   if ( is_user_logged_in() ) {
   $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
    $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
    $menulinks .= '<ul class="bbp_custom_links_submenu">';
    foreach($r['links'] as $key => $val) {
        $menulinks .= "<li>{$val}</li>";
    }
    $menulinks .= '</ul></li></ul>';

    echo $r['before'] . $menulinks . $r['after'];
    }
}
add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);

add_action( 'wp_footer', 'overflow_overriding' );
function overflow_overriding() {
    if ( !is_user_logged_in() ) {
    }else{
    ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
jQuery('.bbp-admin-links:even').click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
</script>

     <?php
    }
}

I have tried using this link as a guide.

https://stackoverflow.com/a/2937603/6147300

I have got all the Jquery correct, but I do not know how to use the CSS to target what I need to target. Also I am unclear on where to put the CSS, does it need to be in the Jquery code or in my CSS editor.

Any suggestions?

Answer 1

A good method is to add a class with jQuery and then target the styles of that class with CSS. See the example below.

HTML

<ul id="menu">
 <li>Home</li>
 <li>Portfolio</li>
 <li>About Us</li>
 <li>Contact Us</li>
</ul>

<button id="toggle">Toggle Menu</button>

CSS

#menu {
  display: block;
  list-style-type: none;
  position: absolute;
  top: 0;
  right: -120px;
  width: 100px;
  background: #000;
  color: #fff;
  padding: 10px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.active {
  right: 0px !important;
}

JS

$("#toggle").on('click', function() {
  $('#menu').toggleClass("active");
});

https://jsfiddle.net/7f1kxo9f/

Answer 2

this is what you want: Copy, and save in HTML file to start test it.

<style>
  #lang-selector {
    font-size: 12px;
    height: 21px;
    margin: 7px auto 17px auto;
    width: 250px;
    font-family: Verdana;
  }

  #lang-selector span {
    color: #999;
    float: left;
    margin: 4px 0 0 87px;
    padding-right: 4px;
    text-align: right;
  }

  #lang-selector ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #lang-selector ul li a {
    padding: 3px 10px 1px 10px;
  }

  #lang-selector ul, #lang-selector a {
    width: 186px;
  }

  #lang-selector ul ul {
    display: none;
    position: absolute;
  }

  #lang-selector ul ul li{
    border-top: 1px solid #666;
    float: left;
    position: relative;
  }

  #lang-selector a {
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
    color: #666;
    display: block;
    font-size: 12px; 
    height: 17px;
    padding: 4px 10px 0 10px;
    text-align: left;
    text-decoration: none;
    width: 166px;
  }

  #lang-selector ul ul li a {
    background: #333;
    color: #999;
  }

  #lang-selector ul ul li a:hover{
    background: #c4262c;
    color: #fff;
  }
</style>
<div id="lang-selector">
  <ul>
    <li>
      <a href="#">Choose a Language</a>
      <ul>
        <li><a href="#">English</a></li>
        <li><a href="#">Deutsch</a></li>
        <li><a href="#">Italiano</a></li>
      </ul>
    </li>
  </ul> 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">

 /* Language Selector */

 $(function() {
     $("#lang-selector li:first").click(function(){
         $('ul:first',this).toggle();
     })
 });

 $(document).ready(function(){ 

  /* Navigation */
  $('.subnav-game').hide();
  $('.subnav-game:eq(0)').show();
  $('.preorder-type').hide();


  $('.preorder-type:eq(3)').show();


 });
 </script>