title: How Do I Insert This Menu Into My Blogger Blog
body: <p>I was searching for menus that could suit my blogger blog and luckily i came across one. But the problem is i don't know how to add the codes to the html. I no noting about codes, although i added the html as a gadget under HTML/JAVASCRIPT and the CSS above the        ]]> the the plugin code before  tag. The Codes are as follows..
  The website i sawit from is <a href="http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/" rel="nofollow">http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dl-menu" class="dl-menuwrapper"&gt;
      &lt;button class="dl-trigger"&gt;Open Menu&lt;/button&gt;
      &lt;ul class="dl-menu"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Item 1&lt;/a&gt;
              &lt;ul class="dl-submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub-Item 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Sub-Item 4&lt;/a&gt;
                      &lt;ul class="dl-submenu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sub-Sub-Item 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sub-Sub-Item 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sub-Sub-Item 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;!-- ... --&gt;&lt;/li&gt;
                  &lt;!-- ... --&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;!-- ... --&gt;&lt;/li&gt;
          &lt;li&gt;&lt;!-- ... --&gt;&lt;/li&gt;
          &lt;!-- ... --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /dl-menuwrapper --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.dl-menu.dl-animate-out-1 {
  animation: MenuAnimOut1 0.4s linear forwards;
  }
  
  @keyframes MenuAnimOut1 {
  50% {
      transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
      transform: translateZ(-372.5px) rotateY(15deg);
      opacity: .5;
  }
  100% {
      transform: translateZ(-500px) rotateY(0deg);
      opacity: 0;
  }
  }
  
  .dl-menu.dl-animate-in-1 {
  animation: MenuAnimIn1 0.3s linear forwards;
  }
  
  @keyframes MenuAnimIn1 {
  0% {
      transform: translateZ(-500px) rotateY(0deg);
      opacity: 0;
  }
  20% {
      transform: translateZ(-250px) rotateY(30deg);
      opacity: 0.5;
  }
  100% {
      transform: translateZ(0px) rotateY(0deg);
      opacity: 1;
  }
  }
  </code></pre>
  
  <p>A PLUGIN</p>
  
  <pre><code>$( '#dl-menu' ).dlmenu({
      animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
  });
  </code></pre>