vpenkov / okaynav Goto Github PK

I noticed that the plugin is dependant on the flexbox properties you have for the

Is it possible to remove the flexbox dependencies?

Example: http://codepen.io/anon/pen/obrKEE

I've run into an issue where the menu icon gets pushed down onto a new line on Safari on iOS (tested on an iPhone 5S running iOS 10.2). The issue popped up during bugtesting on a project but can be seen on the Codepen found in the readme.

Here's a screenshot

Adjusting any of the CSS in the developer tools instantly fixes this, so appears to occur on the initial render.

Cheers,
Matthew Simpson

Not really an issue, but more of a request/challenge. I recently found this amazing example of a priority navigation and was wondering how it might be recreated in "basic" HTML/CSS/JS instead of Angular:

https://www.regionalaustraliabank.com.au/

Any thoughts?

This is fixed in the source but not the most recent dist (2.0.4)
So we could do with a new dist.

By pushing the git tags you allow bower-Users to not run into major release updates without noticing. Currently you can bower install okaynav but you can not specify which version you want, that's bad.

https://help.github.com/articles/creating-releases/

Hey guys,

For a while now okayNav's development has been next to none.

I'd like to let you know that I'm working on a fully rewritten version that eliminates the jQuery dependency (but will support jQuery, and will be backwards-compatible).

The most important planned stuff going on is:

• Custom priorities (so it wouldn't hide the last item but the least important item instead);
• Support for multi-level (nested) menus;
• Extensive unit testing;
• Very well-commented source code;
• Eliminating the need for jQuery from the equation but still supporting jQuery;
• Support for vertical navigations
• Switching to SCSS from LESS
• Better theming
• Bootstrap theme
• Unstyled theme (barebones styling necessary for the plugin to work)

You can have a look here. Keep in mind that a small part of it is actually working as of yet but it felt like a good time to announce it and maybe gather early feedback.

Upon releasing it, all existing issues will be closed, hopefully because they will stop being relevant.

If anyone's interested in helping and/or porting existing functionality, do let me know!

http://bower.io/docs/creating-packages/

Otherwise: great work, love your navbar 👍

Plugin does not turn off the menu.

Iphone 6, ios 8.4. I don't know how to fix it... On ios > 9.0 work good.
Thx advance.

Having this as a jQuery plugin is extremely useful to those that use jQuery, but as I don't ever use jQuery, I would never use this plugin. Now, if you were to create it using native js you would be able to allow use for jQuery and non-jQuery users alike. @desandro does a great job of this in some of his modules, like Flickity for example: http://flickity.metafizzy.co/#initialize-with-jquery

Of course this might be opinionated, but can there be built in options for it if no? 😄

Cannot close menu by clicking on three dots (menu button) on mobile devices (tested in chrome mobile tool)

People want to play with it before using. GIF is fine, but please add a link to live demo, as you already have a demo folder, adding "gh-pages" won't be hard.

This looks awesome, but it's a bit more full featured than I'd like. What I'd really like is if it could just move elements in and out of the container, without any styles, click events, or animations built in. Any chance you'll put out okayNav Light any time soon?

There doesn't seem to be any dev tools, like gulp or grunt, in the repo, not any mention which tool to use to convert less to css and to minify js&css

Hello
How i can close menu on click on menu link on one page ?

How to add in this menu all items if window width < 576px ?

I'm using Browserify. I tried this:

let okayNav = require('../vendors/jquery.okayNav-min');
var navigation = $('#nav-main').okayNav();

but it's doesn't work.

jquery.okayNav-min.js:6 Uncaught ReferenceError: _options is not defined

$(window).on('load.okayNav resize.okayNav', function(event) {
_okayNav.recalcNav();
console.log('resized');
});
I logged this part here to see what was happening when the browser was resizing (and the nav was changing/ recalculating ) , it seems maybe little excessive and could be throttled or reduced a little?

I'm not 100% sure how badly this would affect real world performance (it seems pretty good at the moment) or if it would add unnecessary weight to the js.

Side note: I'm not a developer at all, more a curious designer..

Hi there!
This isn't a issue but I didn't know where to ask!
Are you accepting donations or supports? Because you can get some support to okayNav.
I don't trying to spam you, but I want to invite you to beerpay.io, a simple platform to monetize open source projects, like okayNav.
I know that the open source is free, but it's okay if someone want to contribute in other way.

Thanks for this work!

Hello,

Thanks for your great plugin which I like a lot.

There is just one issue: the toggle button is misaligned when all links are hidden. I can reproduce this issue with your codepen http://codepen.io/VPenkov/pen/wMZBOg

I tested with chrome and firefox and IE mobile.

Have a nice day

When loading okayNav, I get the following error in the DevTools:

GET https://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1457110443945-27 net::ERR_CONNECTION_CLOSED

Great plugin, we've been looking for something like this at work. Would it be possible to add an option where you could specify menu items that are excluded from being moved into the collapsed navigation e.g. I want to have the "Contacts" link in your demo to always remain visible.

Love the library! Would love to see it support a priority value on each nav item so that lower priority items are hidden/moved before higher ones. Many times the last item in a menu is the primary call-to-action or contact link and shouldn't be hidden until there's really no other option.

Thanks again for writing the library!

Because of it, npm-package is not working. It should contain path to jquery.okayNav.js script.

Hey the plugin looks great,
but there are some issues when maximizing the window and restore it back to original width and height.

http://screencast.com/t/WVg42FNO

How to use multiple menu? I get only the last menu (same class selector) working. Thanks

Hi,

Device: iPad
Model: Unsure
Browser: Safari

Issue: ".okayNav__nav--invisible .nav-open" does not collapse when touching elsewhere on the screen. You have to click on the menu-toggle.

Compliments: Great plugin and thanks for reshaping the way menu's break down :)

Styling stuff like colors, margins, paddings should not go into the same .css-file as postioning, dislay-properties, etc.

Currently you have to override a lot of stuff okaynav does. Not everyone has a white background header, this should go into somekind of theme.css-File.

Workflow could then be:
Demo it using

• dist/okaynav.css
• dist/okaynav-defaulttheme.css

Use it in production using only style/okaynav.css + myprojectsstyle.css.

I have put the okayNav() inside a function, so that I can call it on resize like this

function navigation(){
    $('#nav-main').okayNav({
        swipe_enabled : false,
    });
}

navigation();

$(window).on('resize', function(){
    navigation();
});

The problem is that the resizing seems to only work when you go from fullscreen navigation (desktop) towards the mobile (smaller resolutions), but not the other way around.

The only way I made it work if I made my browser full screen. On mobile devices this is not the case. And this is an issue when I'm in portrait mode and go to landscape mode.

So far I've tested this on Android Galaxy S6, and on a windows tablet, but I recon the same will happen on ipads and iphones.

Also is there any way, on mobile devices, to prevent the flash of unstyled content? Because I can see all of my menu which collapses once the page loads. Or do I need to manually implement something like setTimeout()?

Thanks

Thanks VPenkov for your amazing plugins. I added okayNav to my exists project that use bootstrap navigation bar. However, It's not working. How can I solve this problem. Code spinet is include bellow. Thanks.

<nav class="navbar navbar-inverse navbar-fixed-top okayNav" id="nav-main"  role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <div style="padding-top:3px;" class="pull-left">
        <a class="project-title" href="/"><img src="/assets/images/logo2.png" alt="" width="32" height="32" style="margin-left: 15px;"> Project </a>
      </div>
    </div>
    <ul class="nav navbar-nav navbar-right nav-right-icons nav-main-btns">
      <li>
        <a href="/register" class="btn btn-sm nav-reg-btn">Free Register</a>
      </li>
      <li>
        <a href="/login" class="btn btn-sm nav-signin-btn">Login</a>
      </li>
    </ul>
  </div>
</nav>

This is really a great plugin and I'll be using this in my next project 👍

I have one request though, that is, an option to always show the active/selected menu. So if I have:

<ul id="navigation">
    <li><a href="#">Menu A</a></li>
    <li class="selected"><a href="#">Menu B</a></li>
    <li><a href="#">Menu C</a></li>
    <li><a href="#">Menu D</a></li>
    <li><a href="#">Menu E</a></li>
</ul>

then Menu B will never disappear. A live example is at https://xenforo.com/community/

This might be related to #6 but this one is based on class or even ID.

Is there any way to set priority for items (Except item order)? Then we can hide unimportant items earlier than others.

As someone that does accessibility testing quite often, I found the module to have a few issues:

1. A user can tab to the hidden items with their keyboard, even if they're not visible. A user should not be able to tab to an item that is not visible.
2. Tabbing to the ellipsis should occur before the navigation items to expand collapse.
3. Missing keyboard functions (and ARIA attributes) for the Menubar role.

The first issue can be fixed by applying a tabindex="-1" to hidden links, and change them to tabindex="0" when they are exposed.

The second issue is simply an issue with reordering the item.

The third issue can be fixed by following the rules defined in this example: http://oaa-accessibility.org/example/25/

Hi, very nice plugin!

My problem :
_options variable is declared globally and can cause problems if I use several okayNav instances in one page. Do you think it could become a instance property?

Same problem for the $navigation,$nav_visible,$nav_invisible variables. Do you think they could also become instance properties?

If my window is sized so that the nav should appear collapsed, upon initial page load it does not collapse it. once I resize the browser it does though. any quick thoughts what could cause this issue?

Hi,

i'm trying to have a full width header and the h1 and nav to be 80% within side of it.

I'm using WordPress and Timber.

            <header id="header">
                <section>
                    <h1><a href="{{ site.url }}">Logo</a></h1>

                    <nav role="navigation" id="nav-main" class="okayNav">
                        <ul>
                            {% for item in menu.get_items %}
                                    <li class="nav__item {{item.classes | join(' ')}}"><a class="nav__link" href="{{item.get_link}}">{{item.title}}</a>
                                        <!-- {% if item.get_children %}
                                            <ul class="nav-drop">
                                              {% for child in item.get_children %}
                                                <li class="nav-drop-item"><a href="{{child.get_link}}">{{child.title}}</a></li>
                                              {% endfor %}
                                            </ul>
                                         {% endif %} -->
                                    </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </section>
            </header><!-- /header -->

i've tried adding in a section but the functionality seems to disappear, the kebab menu dosent show.

Thanks Jake.

Hi,

I download the zip from GitHub and open in a browser the file dist/index.html and it does not show the header menu correctly. Items are one above the other and thus I cannot even make the demo work.

Can you please fix it ?
Thank you

Hi,

Thanks for this awesome plugin. :)

There is an issue. When I try to scroll down on the mobile device. The menu expands automatically (Even when I'm on footer area of the page). I have checked the demo. It also has the same issue. Here is the GIF http://cl.ly/0V110r1X0e1N

Thanks,
Mizan

Is there a way to define items which should always be visible/not hidden?

If I have a login link which like so:

link1 link2 link3 link4 link5 login

I would like the other links to be hidden but the login link to be visible

I'm implementing this for client on his wordpress site, and he has revolution slider included in page, and when I enable okayNav, I get these errors:

Uncaught TypeError: Cannot read property 'href' of undefined        jquery.themepunch.revolution.min.js=ver=5.1.6:8
common.js:206 Uncaught TypeError: Cannot read property 'x' of undefined      common.js:206

Both revolution slider js file, and common are minified, so I'm not sure where this could clash with your script.

Any idea what could be the issue?

I, I try to set my navbar expandable and responsive with okaynav but i have a big problem.

I Have My List Like this :

+------------+----------------------------------+-------------------+
|            |                                  |                   |
|   Logo     |      OkayNav                     |     Other Button  |
|            |                                  |                   |
+------------+----------------------------------+-------------------+

But after try this, The result is :

+------------+------------------------------------------------------+
|            |                                                      |
|   Logo     |      OkayNav                         Other Button    |
|            |                                                      |
+------------+------------------------------------------------------+

The Okaynav part don't care about the other block in the right. How to fix this ?