title: Add class based on menu item click
body: <p>If i click left of active menu item eg:1,2 menu item i want to add "uk-animation-slide-left-small" class else add "uk-animation-slide-right-small" class if i click right of active menu item eg:4,5 menu item. Without jquery.</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-html lang-html prettyprint-override"><code>&lt;script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"&gt;&lt;/script&gt;
  &lt;link href="https://getuikit.com/assets/uikit/dist/css/uikit.css" rel="stylesheet"/&gt;
  
  &lt;ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-right-small"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item2&lt;/a&gt;&lt;/li&gt;
      &lt;li class="uk-active"&gt;&lt;a href="#"&gt;Main&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Item4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="uk-switcher uk-margin"&gt;
      &lt;li&gt;Content1&lt;/li&gt;
      &lt;li&gt;Content2&lt;/li&gt;
      &lt;li&gt;Content3&lt;/li&gt;
      &lt;li&gt;Content4&lt;/li&gt;
      &lt;li&gt;Content5&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>I want to recreate <a href="https://getuikit.com/v2/docs/switcher.html#switcher-animations" rel="nofollow noreferrer">https://getuikit.com/v2/docs/switcher.html#switcher-animations</a> -> Slide Horizontal effect</p>
  </blockquote>