0

I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.

I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.

Here is the code for my menu.

<div id="my-id" class="uk-offcanvas custom_canvas">
   <div class="uk-offcanvas-bar">
      <div class="uk-panel">
         <a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);"> 
            <img src="img/remove_icon.png" class="remove_image" alt="remove">
         </a>
         <ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
            <li class="offcanvas_li">
               <a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
            </li>
            <li class="offcanvas_li">
               <a href="index.html#package-section" title="Packages" class="offcanvas_open">Packages</a>
            </li>
            <li class="offcanvas_li">
               <a href="#about-section" title="About" class="offcanvas_open">About</a>
            </li>
            <li class="offcanvas_li">
               <a href="contact.html" title="Contact" class="offcanvas_open">Contact</a>
            </li>
            <li class="offcanvas_li">
               <a href="blog.html" title="Blog" class="offcanvas_open">Blog</a>
            </li>
            <li class="offcanvas_li">
               <a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
           </li> 
        </ul>
     </div>
  </div>
</div>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
zarate32
  • 29
  • 2
  • 7

2 Answers2

3

I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"

A better (generic) solution is to "listen" to their click event, then, run offcanvas command.

Something like:

$('.offcanvas_li a').click(function() {
   UIkit.offcanvas.hide([force = false]);
});
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • Hi, thanks for this reply. I just tried this and it doesnt seem to work. I tried something similar earlier but couldn't get it to work. – zarate32 Feb 14 '16 at 16:35
  • Any errors in the `console`? Can you create a [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) ot [bin](http://jsbin.com/?html,js,output)? Or even better, do you have a public URL so I could try to debug it? – Mosh Feu Feb 14 '16 at 16:39
  • Hi Mosh. I found a JS file that was using an id to trigger the effect. I duplicated this code and added your suggestion in the head and it seems to have worked. Thanks a lot! – zarate32 Feb 14 '16 at 16:52
  • Thanks! Some adjustments from my context: `$('.uk-offcanvas a').click(() => { window.UIkit.offcanvas.hide() })` – Paulo Cheque Jun 24 '16 at 06:47
0

This works

    <script>
  function myFunction() {
  UIkit.offcanvas.hide([force = false])
  }</script>
<button onclick="myFunction()">Close Panel</button>
OnTarget
  • 61
  • 8