显示/隐藏jQuery菜单

Question

I want a show/hide menu for my website.

I want it to function like the one on www.nicolaspopupshop.com when you click on "Partners" at the bottom of the site.

I've tried to do this all day, I'm just so confused at how it works.

I'm pretty good with HTML but once javascript comes into play I'm clueless. I guess this is an annoying question for experts but it would mean the world to me if someone could help me out.

Thanks!

Here is what I have in the style tag:

#footer .bottom #partners_trigger {
      cursor: pointer;
      margin-left: 170px; }
    #footer .bottom #partner_list {
      width: 320px;}
    #footer .bottom #partner_list ul {
      position: fixed;
      text-align:center;
      font-size:11px;
      text-transform: uppercase;
      bottom: 40px;
      left: 50%;
      width: 320px;
      margin: 0 0 0 -160px;
      background: #FA9313;
      background: rgba(250, 147, 19, 0.85);
      padding: 10px 0;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      z-index: 300;
      line-height: 18px;
      display: none; }
      #footer .bottom #partner_list ul a {
        color: white; 
        font-family: Arial, Helvetica;}
      #footer .bottom #partner_list ul a:hover {
        color: #e9118c; }
      #footer .bottom #partner_list ul.active {
        display: block; }

I tried to put what I have in the body tag but I can't get it to display properly.

Answer 1

$(document).ready(function() {
    var $list = $("#your-ul");
    $("#your-toggle-link").bind('click', function() {
       $list.slideToggle();
    })
});

Answer 2

First create a div and set its style as display:none. I assume that your Partners link has an id Partners Then write the code below

$(document).ready(function() {
    $("#Partners").bind('click', function() {
      $("#your_div").slideToggle(); //your_div is the id of the div with display none
    })
});