Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Jake Henshall
    @JakeHenshall
    @VPenkov Hey really like the menu, is there an easy way to have it expand from the top aswell as have a push menu (if that makes sense) :)
    Jonathan Neal
    @jonathantneal
    @JakeHenshall, like collapse based on available vertical space?
    Jake Henshall
    @JakeHenshall
    @jonathantneal Yeah
    Jonathan Neal
    @jonathantneal
    @JakeHenshall, I think this could be done, but it would be helpful to see this visually. Could you create a codepen of the situation before OpenNav would be applied?
    Jake Henshall
    @JakeHenshall
    @jonathantneal This is using Slicknav but pretty much the tablet view effect is what im looking to achieve.
    Jonathan Neal
    @jonathantneal
    @JakeHenshall, those are horizontally aligned, until I hit < 768px. Are you saying you want OpenNav to consume the whole menu at some breakpoint?
    VPenkov
    @VPenkov
    I didn't exactly understand your question
    Jonathan Neal
    @jonathantneal
    Which question is that, @VPenkov?
    VPenkov
    @VPenkov
    Jake's one
    Maybe he wants to create an okayNav from a sidebar menu
    but that doesn't make any sense to me
    Jake Henshall
    @JakeHenshall
    @jonathantneal yeah exactly like it is nowjust when the kebab icon is shown instead of coming out from the right it drops down like my example (Does that make sense :worried: )
    Jonathan Neal
    @jonathantneal
    @JakeHenshall, the good news is, you can totally control that from your CSS. Perhaps it would be nice if some developers would share the CSS to achieve different effects.
    Jake Henshall
    @JakeHenshall
    @jonathantneal Wow nice, that would be crazy to have like 5 different menu effects just changing some css, do you have the css to achieve this?
    Jonathan Neal
    @jonathantneal
    I don’t have the css, myself. I think it would be useful to either try to make myself, or request others make.
    Gijs Rogé
    @gijsroge
    Nice jQuery version of the priority+ pattern :)!
    I haven't had time yet to check it out but what is the main logic to check whether an item has to be moved offscreen or not?
    This is my take on it, thats why i'm curious :D https://github.com/gijsroge/priority-navigation
    Jonathan Neal
    @jonathantneal
    @gijsroge, if you have a moment, I’d be interested to see your take on the method being used @ https://github.com/VPenkov/okayNav-vanillaJS/blob/master/lib/okay-nav.js
    It uses data attributes and aria roles to reduce filesize and avoid being intrusive, and requestAnimationFrame to reduce over-calculations by the resize event.
    Gijs Rogé
    @gijsroge
    Yeah someone suggested I should you requestAnimationFrame. The way I prevent over-calculations right now is by throttling the resize event.
    VPenkov
    @VPenkov
    @gijsroge, it takes the visible part plus the expand icon, adds their widths together with some offset and hides an item. The last collapsed item's width is stored in a variable so expanding would work.
    This will be moved to a data attribute because right now I'm looking for a way to add priority to nav items - some have to collapse before others, no matter their DOM order
    Gijs Rogé
    @gijsroge
    Yeah thats a nice feature.
    VPenkov
    @VPenkov
    How do you throttle the resize event?
    I used to do this but it caused more problems than it solved
    VPenkov
    @VPenkov
    like the underscore.js debounce?
    Jonathan Neal
    @jonathantneal
    @VPenkov, I would consider using requestAnimationFrame as seen @ https://github.com/VPenkov/okayNav-vanillaJS/blob/master/lib/okay-nav.js#L88-L91
    Gijs Rogé
    @gijsroge
    yeah definitely look into requestAnimationFrame
    VPenkov
    @VPenkov
    Hm, I've never used that, probably should give it a shot
    Gijs Rogé
    @gijsroge
    much cleaner solution
    Does okayNav take siblings into account?
    VPenkov
    @VPenkov
    Yep
    Jonathan Neal
    @jonathantneal
    I’m going to move that requestAnimationFrame piece into the actual resize event so the recalc function isn’t necessarily limited by it. I’m almost done with the vanilla version, but I’ve had real work really swell up on me, so the next free evening I hope to finish it up. (add lint tests, umd wrapper)
    VPenkov
    @VPenkov
    Jon, that's great news
    Did you manage to get the swipe working?
    Jonathan Neal
    @jonathantneal

    Ah, and swipe. I need to make a checklist.

    • [ ] requestAnimationFrame in resize
    • [ ] swipe functionality
    • [ ] lint configs
    • [ ] umd wrapper
    • [ ] compiled vanilla js in root

    (bummer, in real github that would have given me a list of checkboxes)

    VPenkov
    @VPenkov
    It's mostly math stuff there so it doesn't behave freaky like sidr.js does
    so getting it to vanilla js should be the most straightforward part
    Jonathan Neal
    @jonathantneal
    It seemed isolated enough that it shouldn’t be a problem.
    Patrick Rogers
    @pixelchef
    Thoughts on dropdown support? I see the js is inline-block on all dropdown.
    I can override this was just wondering if there is a more future proof way to do it as okayNav develops
    Jonathan Neal
    @jonathantneal
    I think you can totally restyle the overflow navigation. I think more style samples would be helpful.
    Karl Chvojka
    @karlchvojka
    Hey all
    Jonathan Neal
    @jonathantneal
    Hi
    Alex
    @amamel
    Hi, how would I create a second level dropdown nav with this navigation? I can not find any examples online. Cheers
    Jonathan Neal
    @jonathantneal
    @mamela, would it work the same. Could you invoke okayNav on both?