somewebmedia / hc-offcanvas-nav Goto Github PK

please add rtl

just change text nav and icon

Hi,
I would prefer, which is more or less common for all kind of navigations today to place the Close button on the upper left or upper right corner of the menu, and also switch it to a Cross (X), and have "Close" as a label.

What do you think ?

regards

It would be awesome if multiple menus/navs could be created. Can this be done?

<a href="#" class="nav-next" aria-label=" Submenu"
After click on a submenu, a symbol # is added to the URL. How to remove it?

First of all, thank you for this awesome menu!!!

I am having trouble getting it to work with a fixed header. When opening the menu, I have it set to push the content to the right. It works fine on first page load but if I scroll down and then open the menu, the fixed header disappears. I can't figure out what is causing this to happen. Hope you have a solution, thank you.

I suppose the level title should be clickable and contain arrow back instedad of having another item in the navbar called All categories or Back (in default state).

document.addEventListener('DOMContentLoaded', function() {

  var Nav = new hcOffcanvasNav('#main-nav', {
    disableAt: 3000,
    customToggle: '.toggle',
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true
  });

});

I made a Codepen

There is any way in which the menu can remember the selected menu within a nested menu? this is to avoid clicking multiple times when a menu within a menu has been selected.

Any plans to implement that?

Regards,

Jose.

I am a theme developer. Can I bundle this off-canvas menu with my theme for my user?

From a UX perspective, if there is no levelSpacing, the menu should slide in from the right as indicated by the right angle caret icon -- and click back does the opposite -- slide from right to left.

Right now, it slides from the left although the caret is pointing right..

just an observation

If maxWidth property was set to 980 (as you provided in your github doc) toggle button hides. Also adding display: block for this toggle is not working because navigation menu is blank after toggle click.

How can I add custom content?
For example use the slide out for any other content without the menu?

I've just replaced the old mobile menu with hc-offcanvas. However on the other page side we have a content sidebar which until now simply used the old off-canvas menu - but instead of the menu items, we simply displayed other contents.

When I set disableBody: false, the body is still disabled; after the first level.

I mean, when I open some menu, clicked, page is refreshed, then go back to menu. It opens from scratch, from root.
Exactly I would like to have opened root, opened some level, where the link was clicked, whenever page is refreshed or not.
How ?

How to add brand logo on header. Icon in the right is enough to closing. How to add brand logo in left side.

Hello i have a issue after update to 5.0.3 from webpack. (...).hcOffcanvasNav is not a function but it was working without problems before. There is something wrong in my app.js file? or did the alias change after update? I had to rollback to 4.2.6 meanwhile, i'll appreciate your help.

import $ from 'jquery';
import 'bootstrap';
import 'hc-offcanvas-nav';

$(function () {
        $('#main-nav').hcOffcanvasNav({
                disableAt: false,
                customToggle: $('.toggle'),
                levelSpacing: 40,
                navTitle: 'MENÚ PRINCIPAL',
                labelClose: 'Cerrar',
                labelBack: 'Atrás',
                levelTitles: true,
                levelTitleAsBack: true,
                pushContent: '#container',
                insertClose: 2
        });
});

The SCSS theme has hardcoded #fff for the subnav arrows so they do not show if the nav background is overriden to white:
https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/src/scss/_theme.scss#L163-L164

Same for prev/next:
https://github.com/somewebmedia/hc-offcanvas-nav/blob/master/src/scss/_theme.scss#L195-L196

Suggest they are set as $hc-offcanvas-nav-text-color

I am trying to add a search box to the menu, however it does not show on the menu.

The code is completely removed by the plugin, how do i go about adding this?

This is the code i'm trying to add within the nav tag:

    <ul class="search">
        <li>
            <div class="input-group input-group-sm pt-1 w-75">
                <input type="text" class="form-control search-form-control" aria-label="Amount (to the nearest dollar)">
                <div class="input-group-append">
                    <span class="input-group-text search-icon">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </span>
                </div>
            </div>
        </li>
    </ul>

Hello everyone! Hope you are doing ok!

I have a doubt. Can you edit the text from "close" and "back" default options in the nav? I'm asking this because I want to change them to another language.

Thanks for reading.

Hello

Somehow the plugin is not returning the correct/complete object. See screenshots.
On first screen the object does not contain the close,isOpen,open, etc function .
So, I made a jsfiddle and on that does show the functions..(third screenshot).
If you look at the watch section on 1st and 2nd screen you will see that the return is a regular jQuery object, not the expected plugin object, why?

• Version: 3.1.2 - Chrome

How to make a menu in a column?
I have it in a line and a scroll bar below.

I set css in the settings
display: flex;
flex-direction: column;
That helped. But I would like to know if there is a more normal way to do this.

<div id="main-nav">
    <ul class="header__main_wrap">
       <li><a href="#" class="header__main--page">products</a></li>
       <li><a href="#" class="header__main--page">rooms</a></li>
       <li><a href="#" class="header__main--page">services</a></li>
       <li><a href="#" class="header__main--page">contacts</a></li>
     </ul>
 </div>

$(function() {
    jQuery(document).ready(function($) {
        $('#main-nav').hcOffcanvasNav({
            disableAt: 530,
            expanded: false,
            swipeGestures: true,
        });
    });
});

Look here

1. https://photos.app.goo.gl/eukJGRNqdgY12y2x5
2. https://photos.app.goo.gl/Hp8SBuTj8Q3bXMeF8

Hey, thanks for the great plugin, you have done great job!

I was wondering if the plugin could works with the following structure without trim the '.dont-trim' element:

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="special-item"><div class="dont-trim"><a href="#">SPECIAL</a></div></li>
  </ul>
</nav>

Now, after plugin initialization .dont-trim element disappears. Is it possible to add some special class like '.special-item' to the <li> element, for example, which tells the plugin to not trim the inner content and keep it in its original structure?

Here is why I need this option. Lets consider that you want to include an entire widget as a menu item. The widget could contains a lot of <div> elements with some CSS classes for styling and <a> tag in the deep. For example:

<div class="special-offer-wrapper">
  <div class="btn-container">
    <a href="some-url">SPECIAL OFFER</a>
  </div>
</div>

This widget could be dynamically loaded, so could be everything, and will be great if is possible to keep its entire original code, as a different special menu item.

Hope this feature could makes the plugin more flexible.

Thanks in advance!
Cheers!

Adding -webkit-overflow-scrolling: touch to .nav-container will result in a wrong clipping and z-index of the overlap menus.

.hc-offcanvas-nav .nav-container {
    position: fixed;
    z-index: 9998;
    top: 0;
    width: 280px;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    transition: transform .4s ease;
    -webkit-overflow-scrolling: touch;
}

See http://jsfiddle.net/e7p5t0xy/

On original nav element, there is a li with class "divider". This li contains a div with class "addremove-multi" and some elements inside.

After plugin initialization, the content of the li.divider changes to an empty a tag.

Version 3.3.1 - Chrome 70

How can we change the arrow up/down as well as the close icons?

I wanna ask if its possible keep the menu open when the page refresh or if you select an item.
Maybe there is a way that i can retrieve the selected item and stored on a localstorage variable. there is a way to do that ?
Besides, it is a way that you can disable the offcanvas an used has a side bar ?

Is there an option to not show a glimpse of the previous menu behind the active menu group? I want to just have the selected menu cover all the rest - the more deeper you go into the menu - it just gets more crowded. I just want to show one group of menu.

Thanks

Instead of always the default BACK regardless of the level depth, I was trying to setup where the BACK button label should pull the previous levelTitle - this make it easier to see how far in and where you are at. Im using the overlap method with no levelSpacing.

Example:

< Training

• Online
• Campus

In the above - clicking Training will take you back to the main level/sub level of TRAINING.

Thanks in advance!

is it possible to open the directly second or third stack of the menu on a click of a button or link

as in the the below screenshot, is it possible to open Mobile Phones menu directly on a click of a link or button??

Is there anyway to show the active nav so if you are in a sub menu page it highlights the page you are on?

Tested on your demo with FF and Chrome - after opening the navbar, items were not trapped.
I remember trap focus was working in the past (I don't remember the version). With the latest 6.0.2 I'm free to jump between elements through the whole page. That should be limited only for the active level.
For now I am using open and open.level events for custom tab-trap.

And also closing the navbar with Esc key causes error in the console
Uncaught TypeError: Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 1 present.

I use the nav with Bootstrap, but when i size down the window the menu icon goes to the top of the page.
Can I place it in the same position where the nav tag is? (in my example, in the red border div).
Thank you.

Code:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB+Garamond|Roboto">
<!-- HC Off-canvas CSS -->
<link rel="stylesheet" href="hc-offcanvas-nav.css">

<title>Page Title</title>
</head>
<body>
<div class="container">

<h1>Hello world!</h1>
<h2>Hello world!</h2>
<p>This is a paragraph.</p>

<table border="1" width="100%">
<tr>
<td>
Table Title
</td>
</tr>
<tr>
<td>
<div style="border:thin solid #88090B;">
<nav id="main-nav">

  <ul class="first-nav">
    <li class="cryptocurrency">
      <a href="#">Cryptocurrency</a>
      <ul>
        <li><a href="#">Bitcoin</a></li>
        <li><a href="#">Ethereum</a></li>
        <li><a href="#">NEO</a></li>
        <li><a href="#">ZCash</a></li>
        <li><a href="#">Dogecoin</a></li>
      </ul>
    </li>
  </ul>
 
  <ul class="second-nav">
    <li class="devices">
      <a>Devices</a>
      <ul>
        <li class="mobile">
          <a href="#">Mobile Phones</a>
          <ul>
            <li><a href="#">Super Smart Phone</a></li>
            <li><a href="#">Thin Magic Mobile</a></li>
            <li><a href="#">Performance Crusher</a></li>
            <li><a href="#">Futuristic Experience</a></li>
          </ul>
        </li>
        <li class="television">
          <a href="#">Televisions</a>
          <ul>
            <li><a href="#">Flat Superscreen</a></li>
            <li><a href="#">Gigantic LED</a></li>
            <li><a href="#">Power Eater</a></li>
            <li><a href="#">3D Experience</a></li>
            <li><a href="#">Classic Comfort</a></li>
          </ul>
        </li>
        <li class="camera">
          <a href="#">Cameras</a>
          <ul>
            <li><a href="#">Smart Shot</a></li>
            <li><a href="#">Power Shooter</a></li>
            <li><a href="#">Easy Photo Maker</a></li>
            <li><a href="#">Super Pixel</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="magazines">
      <a href="#">Magazines</a>
      <ul>
        <li><a href="#">National Geographic</a></li>
        <li><a href="#">Scientific American</a></li>
        <li><a href="#">The Spectator</a></li>
        <li><a href="#">The Rambler</a></li>
        <li><a href="#">Physics World</a></li>
        <li><a href="#">The New Scientist</a></li>
      </ul>
    </li>
    <li class="store">
      <a href="#">Store</a>
      <ul>
        <li>
          <a href="#">Clothes</a>
          <ul>
            <li>
              <a href="#">Women's Clothing</a>
              <ul>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Men's Clothing</a>
              <ul>
                <li><a href="#">Shirts</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Sale</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Jewelry</a>
        </li>
        <li>
          <a href="#">Music</a>
        </li>
        <li>
          <a href="#">Grocery</a>
        </li>
      </ul>
    </li>
    <li class="collections"><a href="#">Collections</a></li>
    <li class="credits"><a href="#">Credits</a></li>
  </ul>
 
</nav>
</div>
</td>
</tr>
<tr>
<td>
Table Line
</td>
</tr>
</table>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="hc-offcanvas-nav.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcOffcanvasNav({
      maxWidth: 980,
	  navTitle: 'All pages'
    });
  });
</script>

</body>
</html>

add selected menu by default in url #

When closing nav menu with a custom toggle placed in a top bar with position fixed cause the top bar to lose the fixed position when scrolling (so it is scrolled too when scrolling and doesn't remain visible to user on top).

This is caused from the translate3D property added to the toggle when opening/closing the nav (or a level). To fix this just remove the 3d property on nav close, with this edits the code works:

const setTransform = (() => {
        const transform = browserPrefix('transform');

        return ($el, val) => {
          if (transform) {
            const x = SETTINGS.side === 'left' ? val : -val;
            //if x is 0 remove the translate3d property
            if(x > 0)
              $el.css(transform, `translate3d(${x}px,0,0)`);
            else
              $el.css(transform, '');
          }
          else {
            $el.css(SETTINGS.side, val);
          }
        };
      })();

Expected behavior, one alert. Actual behavior: Two alerts.

On same example, click inside span inside .123 span does not trigger click.

http://jsfiddle.net/m08kfwvr/1/

using IE 11.0.210 on Windows 10, browse to https://somewebmedia.github.io/hc-offcanvas-nav/

IE console shows

SCRIPT5009: 'EventTarget' is undefined hc-offcanvas-nav.js (11,24689)

SCRIPT438: Object doesn't support property or method 'assign' hc-offcanvas-nav.js (11,651)

and the toggle navigation won't work

Hello,
I love your menu and I'm using it for awhile, but I only need it for mobilmenu (below 1024px). I have a different menu for bigger resolutions (PC).
Your menu has the regular version and the mobile version (created from the html template by Javascript).
Could somehow the regular version be erased? It's just hidden (display: none;) for me (that's a lot of html code without use on my website).

Only the back and close is accessible via keyboard - the menu items are not.

Awesome plugin, it works great.

Currently the menu is always opening and closing when you swipe gesture from the edge of your mobile.
We have a slider element on our page which is full width and whenever we swipe this slider from left to right it causes the menu to open.
How do we prevent the menu from opening when we slide the slider?

Hi, I'm not able to handle clicks on items in menu that have a submenu. Is there a way to fix this?

I try to explain better: I have a structure with multiple levels:

zone 1
--->kitchen
------>fridge
--------->food
------>toaster
------>table
--->bath
------>shower
--->bedroom
------>bed
zone2
...
zone 3
.....

I have set a click listener on the <a> tag of the <li> item but everytime I click it opens the sublevel or it closes the menu without trigger the click. How can I fix this? I'm using overlapping levels style for the nav

Hello.

Have WordPress appeared new rules, need to mobile menu supported governance with have but your script menu inserts in late markup this not allows use menu with have with the help TAB. How do I change the code so that the markup is inserted after the main menu?

Add a non-minified CSS file to the source.

Can you fix the script to support keyboard controls?

Hi,
I've just updated from 4.2.5 to 5.0.10, and I found a new issue.
If I open the webpage in a full screen window (above 1024px), then I change its size (below 1024px, so the PC menu is replaced with the mobile menu), and I click to open the mobile menu, there is no effect, and there's no effect when closing either.
If the page was opened below 1024px, then the menu opening/closing working fine.

I hope you understood me, it's quite hard to explain this.
I attached an image (that appears for a second, when I close the menu if the website was first loaded with above 1024px width).

Yesterday swiping from the side on the screen on mobile worked perfectly on the demo website. Today it seems to no longer be working. Tested multiple devices.

I have bind the offcanvas to the the bootstrap hamburger menu. The toggler hamburger menu only shows up when the viewport is below 576px.

Everything works great here when i click the toggler and the menu slides in.

The issue now is that when i resize the browser to greater than 576px - which will hide the hamburger - the offcanvas menu is still visible.

Is there a way to toggle it base on viewport?

I tried using the :

// update the nav DOM - greater than 576px
Nav.close(true);

Hello somewebmedia , I hope you are doing fine. The navbar would be more robust if we could add a feature to open it on mobile devices through swipe of screen as is available in native apps. I would like to contribute if you wish.

Thank you.

Ajax does not proceed?
When I click first menu item in a menu created with hcOffcanvasNav, the Ajax result does not show.

I want to display it like this: when I click on the first li, the childs appears. And when those childs are clicked, the sub-childs appears.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="hc-offcanvas-nav.js?ver=3.2.0"></script>

<div id="container">
  <div id="nav">
    <div id='state-list'>
      <div id='city-list'>
      </div>
    </div>
  </div>
</div>

<script>
var Nav;
Nav = $('#nav').hcOffcanvasNav({
  maxWidth: false,
  levelTitles: true,
  closeOnClick: false
});
</script>

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
  $('.state').click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "index.php",
      data: {
        activeMenu: this.id
      },
      success: function(data) {
        $("#state-list").html(data);
      }
    });
  });

  $('.city').click(function(e) {
    var teks = $(".linka").closest('li').attr('value');
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "index.php",
      data: {
        activeMenu: teks,
        activeSubMenu: this.id
      },
      success: function(data) {
        $("#city-list").html(data);
      }
    });
  });
});
</script>

Not Show

I need
show

@somewebmedia

Close menu at swipe gesture direction (left/right)

Can that implemented?

Wondering if it would be possible to add ::hover or ::focus classes to the buttons?

Hi,
I have Android 10, with latest FF and Chrome today, the menu looks and feels amazing but I am unable to swipe and open the menu. I an only swipe and close the menu.
I would love to see the swipe open menu feature implemented in this repo.

Regards