title: Hamburger-menu in jQuery
body: <p>I just started using jQuery, and tried to make a hamburger menu. Is it possible to only have the menu as a little square in the top right corner, and a logo in the top left?</p>
  
  <p>Right now the black bar from the menu is filled out like a nav bar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".cross").hide();
  $(".menu").hide();
  $(".hamburger").click(function() {
    $(".menu").slideToggle("slow", function() {
      $(".hamburger").hide();
      $(".cross").show();
    });
  });
  
  $(".cross").click(function() {
    $(".menu").slideToggle("slow", function() {
      $(".cross").hide();
      $(".hamburger").show();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    width: 100%;
    height: 100vh;
  }
  header {
    width: 100%;
    background: #1d1f20;
    height: 60px;
    line-height: 60px;
  }
  .hamburger {
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 45px;
    padding: 5px 15px 0px 15px;
    color: #fff;
    border: 0;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
  }
  .cross {
    background: none;
    position: absolute;
    top: 0px;
    right: 0;
    padding: 13px 15px 0px 15px;
    color: #fff;
    border: 0;
    font-size: 3em;
    line-height: 65px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
  }
  .menu {
    z-index: 1000000;
    font-weight: bold;
    font-size: 0.8em;
    width: 100%;
    background: #131313;
    position: absolute;
    text-align: center;
  }
  .menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
  }
  .menu li {
    display: block;
    padding: 15px 0 15px 0;
    border-bottom: #1d1f20 1px solid;
  }
  .menu li:hover {
    display: block;
    background: #181818;
    padding: 15px 0 15px 0;
    border-bottom: #1d1f20 1px solid;
  }
  .menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: #fff;
  }
  .menu ul li a:hover {
    color: #fff;
    text-decoration: none;
  }
  .menu a {
    text-decoration: none;
    color: white;
  }
  .menu a:hover {
    text-decoration: none;
    color: white;
  }
  .glyphicon-home {
    color: white;
    font-size: 1.5em;
    margin-top: 5px;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
    &lt;button class="hamburger"&gt;&amp;#9776;&lt;/button&gt;
    &lt;button class="cross"&gt;&amp;#735;&lt;/button&gt;
  &lt;/header&gt;
  
  &lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;a href="#"&gt;
        &lt;li&gt;Forside&lt;/li&gt;
      &lt;/a&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropbtn"&gt;Møbler&lt;/a&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="http://facebook.com"&gt;Stole&lt;/a&gt;
          &lt;a href="#"&gt;Border&lt;/a&gt;
          &lt;a href="#"&gt;Sofaer&lt;/a&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;a href="#"&gt;
        &lt;li&gt;Blog&lt;/li&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
        &lt;li&gt;Leverandøre&lt;/li&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
        &lt;li&gt;Om Os&lt;/li&gt;
      &lt;/a&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>