index.html

<div id="menu-dropdown"> 
<ul>
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
</ul>
</div>
<div class="psuedo-menu"><a class="closed-box" id="menu-link" href="#">Menu</a></div>

script.js

$('#menu-link').bind('click', function(e) {

  // Prevent Default Link Behavior
  e.preventDefault();

  // Toggle the Login Box
  $('#menu-dropdown').slideToggle('slow', function() {});
    
  // Toggle the Login Text
  var text = $('#menu-link').text();
  $('#menu-link').text(text == "Menu" ? "Close" : "Menu");

  // Return False for Good Measure
  return false;
});

style.css

#menu-dropdown{
  display: none;
}

.psuedo-menu {
  position: relative;
  padding-left: 40px;
  font: bold 30px Sans-Serif;
}
.psuedo-menu:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 0px;
  width: 30px;
  height: 4px;
  border-top: 12px double #000;
  border-bottom: 4px solid #000;
}