alizahid / slinky Goto Github PK

View Code? Open in Web Editor NEW

671.0 19.0 109.0 2.83 MB

A light-weight, responsive, mobile-like navigation menu plugin

Home Page: https://slinky.js.org

License: MIT License

CSS 14.96% JavaScript 85.04%

jquery navigation mobile es6 javascript menu plugin yarn babel webpack

slinky's Introduction

Slinky

Rather sweet menus

A light-weight, responsive, mobile-like navigation menu plugin

Installation

Download the latest version. The files you need are

Bower

bower install jquery-slinky

Include these files

<link rel="stylesheet" src="bower_components/slinky/dist/slinky.min.css" />
<script src="bower_components/slinky/dist/slinky.min.js"></script>

NPM

npm install jquery-slinky

Include these files

<link rel="stylesheet" src="node_modules/slinky/dist/slinky.min.css" />
<script src="node_modules/slinky/dist/slinky.min.js"></script>

Usage

const slinky = $('.menu').slinky(options)

Options

Option	Default	Description
`resize`	`true`	Resize menu height to match content on navigation
`speed`	`300`	Animation speed in `milliseconds`
`theme`	`slinky-theme-default`	Slinky theme
`title`	`false`	Show title of sub menu

API

`.home(animate)`

Navigate back to the root menu

Option	Default value	Description
`animate`	`true`	Pass `false` to skip animation

`.jump(target, animate)`

Navigate to a sub menu

Option	Default value	Description
`to`		Selector for `ul` target to jump to
`animate`	`true`	Pass `false` to skip animation

`.destroy()`

Remove Slinky

Tips

Set .active on a ul element to jump there on init

slinky's People

Contributors

Stargazers

Watchers

Forkers

owtp ganlanyuan josetorrico djrondon armyofunicorns leonidche nunodotferreira nvdnkpr tuvaergun zenseo ulinaaron mattvoss sparkinzy design8383 freelancerbd9 passimnow ishawge chanthoeun unikneeraj reedstudio logirevo mihaitanase josephcardwell ccscoder mostafa0098 examinedliving bilobait-lorenz konweb bovas85 davidkindler umarmughal setroot milanzivanov smartnetguru maent45 phpground scriptsb chrisemoulton pandahisham maximzurkin pk-codebox-evo axelaredz cruzenaldo fejo-dk lyshfire shpshft waggertron praveenjuge webdevan tilky fabbbiob atomcorp stiropor masdhuha kavallo deepakpenaganti soymanuelpacheco kimdonii queenoftheoutlands ecr007 btry jqueryscript jotamiller cyrke alexh225 atk3shape kinofumi mohamedaltaib steevenz levipadre therford j-cam efeslive semsites programmyx codergab bolalabs mrdraud pandatamara juliocardonasv ngocminhxx resfront facoderr iamarek zackenders ralfostin ek bnasoft memdufaizan noman-ahk97 shandiz ghjoseph marchenkovdmitry nama7272 elxanquliyev awanesia serdtsekol1 deemilda fredpies fa-braik

slinky's Issues

.home() and .jump() not working properly

I am calling $("#menu").slinky().home() and the root menu is appering left: -300%.
The .jump() function on the other hand creates multiple back buttons on the top of the sub menu.

Any suggestion to fix them?

Label feature suggestion

Thanks for this awesome little plugin!

I have a wish for an extra little detail for UX. It would be a cool feature and informative if it could show the last label and the current label title.

destroy method or add breakpoint

i like your menu the problem is i want to have a normal hover dropdown menu for desktop and slinky for mobile or lower resolutions

Excluding Top Level with no children

Hi, I was wondering how to exclude top level items, that do not have children, from having their links stripped? As an example, home and contact wouldn't have children normally.

disable animation

hi, how can I completely disable sliding animation. I want just a simple click to go sub menus.

api usage

Trying to use the api and a bit confused how it works.

	$('.buttonclass').click(function(){
	    $('#menu').slinky().jump('ul.firstLevel');

or
$('#menu').slinky().home();
});

When using home the back buttons start repeating.

IE and Firefox compatible?

Hope you're still around, and supporting this project. I'm having issues with the placement of my carat in the sliding menu on IE and Firefox. I've narrowed the problem down to this line

"menu.empty().addClass('sliding-menu');"

In chrome the css attribute 'boxSizing' is no longer exists, because of empty().

However, in Firefox and IE, the boxSizing attribute still exists.

Maybe it's because of the modularization on my own that could be the problem. I was wondering if you have this compatibility problem on your projects. As it will determine how I approach the solution.

Any chance to get rid of jQuery dependency?

Do you by any chance consider removing jQuery dependency in the near future?

Links that don't have # as href

Hi! First of all, thanks for this amazing plugin. Using this plugin for production I'm having troubles with menu items that both have submenuitems as an actual link. Right now you cannot navigate to one of the parent navigation items.

Below an markup example of how I would like to use it.

<div class="menu">
    <ul>
        <li>
            <a href="http://google.com">Link I would also like to navigate to</a>
            <ul class="sub-menu">
                <li><a href="http://google.com">Menu item</a></li>
                <li><a href="http://google.com">Menu item</a></li>
                <li><a href="http://google.com">Menu item</a></li>
                <li><a href="http://google.com">Menu item</a></li>
                <li><a href="http://google.com">Menu item</a></li>
                <li><a href="http://google.com">Menu item</a></li>
            </ul>
        </li>
    </ul>
</div>

Uncaught TypeError: $ is not a function

You should use jQuery instead of $ or wrap the JS in a something like (function($){[...]})(jQuery).

This error shows up on WordPress sites, because they use jQuery.noConflict()

Reinit menu

Hi,

Thanks for the plugin, it's great.

Is there a way to re-init the destroyed menu?
Here you created a destroy method: #16
I need it for mobile as well (only mobile).
So a need to switch between normal menu and Slinky one.
What I did:

const menu = $('#menu').slinky({resize: false});

when you switch to desktop:

menu.destroy();

and when you go back to mobile and try to reinit to the required level, that doesn't work:

menu.jump('.active-level');

neither

menu.home();

Thank you.

If i click very fast it breaks

Hi!

When i click more than one time and very fast on a menu-item which have childs
it breaks.

Make parent clickable

Is there any way make parent menus as clickable? So with this feature sub menus must be toggle with only click by arrow.

Please provide a license!

Hello, friendly reminder to please provide a license for your code. I want to use it for a project but I feel like this link applies.

Thank you!

Load sub menus from remote server

Hi Ali, is it possible to load submenus per request via Ajax? I have a very complex one (with too much server-side processing) and I´d like to load each submenu when the user click it so initial loading does not take too long.
Thanks!
Germán

Repeated clicking

If you click on "artist" and "back" repeatedly really fast the menu will break, on your demo.

Unreachable code after return statement

Unreachable code after return statement at line 111 detected in Firefox console.

Reset method

Suggestion to add a reset method (to navigate the slinky menu back to the root). I have a basic implementation like so:

var mySlinky= $('#slinky').slinky({
    title: false,
});

mySlinky.resetSlinky();

Added the following to jquery.slinky.js

// reset the slinky back to the parent 
this.resetSlinky = function(){
    this.each(function() {
        var menu = $(this),     
        root = menu.children().first();
        var a = $(this).find(".back");

        if ( a.closest("ul").is(':visible')  ){
            console.log("is open");
            move(root, false, function() {
                a.parent().parent().hide();
            });

            if (settings.resize) {
                resize(menu, a.parent().parent().parents('ul'));
            }
        }
    });
}

Probably not the best implementation, but it works. Any suggestions/improvements?

Speed Performance using CSS

Could consider using CSS animation or transform transition to slide the menu panel instead of Jquery's own CSS Position animation which is slower.

Zurb foundation has implement this in their drilldown menu using trigger CSS Class.
http://foundation.zurb.com/sites/docs/drilldown-menu.html

Responsive issue on resize of window

Hi Ali,

I found an issue that I thought you might wanted to know. Trying to solve it myself.

If you shrink down the width of the window after it has loaded, the "greater than" charachter disappears.
If you load with you browser width low, and the drag your window to maximum, the hidden ul's is being exposed.

jump to active link

Is there a way to jump to active level if the page is changing?

Remove span

Hi,
I've 2 navs : the main nav (uses slinky) and the footer nav (not uses slinky)

The footer nav removes my <span>

The markup :

<ul class='footer-nav'>
  <li>
    <a href="#"><span>Some text</span></a>
  </li>
</ul>

The DOM :

<ul class='footer-nav'>
  <li>
    <a href="#">Some text</a>
  </li>
</ul>

Any idea why my <span> is removed in the DOM ?
Thx

Multiple inits on the same page

When i try to initialize multiple menus on the same page, only 1 of them works. Is there a workaround for this?

Firefox

My menu won't load in a Firefox browser, normal?

destroy and init on resize

Hello, I'm trying to init / destroy a slinky menu, depending on the viewport size.
I'm using this function on resize:

const handleMenuMobile = function () {
    if (window.matchMedia("(max-width: 1099px)").matches) {
        const menuMobile = $('.menu-wrapper').slinky({
            title: true,
            theme: ''
        });

        console.log (menuMobile);
    }

    if (window.matchMedia("(min-width: 1100px)").matches) {
        if (typeof menuMobile !== 'undefined') {
            menuMobile.destroy();
        }
    }
}

The second bit of code (min-width: 1100px) doesn't work because it always returns menuMobile as undefined. I'm guessing this is a scope problem... Can you help me fix this?

Thanks in advance.

Destroying a menu

Hey!

Wondering how to destroy a menu. I'm assuming destroy === reset? I want to reset the menu to original state when I close the hamburger menu.

menu.slinky().destroy() => destroys the menu all together, so when I reopen the hamburger menu, it's completely unstyled.

menu.slinky().home() => makes the menu disappear when I reopen the hamburger menu.

Is there another way to reset the menu when I close the hamburger?

Appreciate the time!

get data from json

I have a big menu, and i don't want to send everything in the html.

So, my idea is this:

i have a menu, and if I click on a item, it sends an get request to the server, that answers with JSON data, what is displayed in the next sub-menu.

slinky menu doesn't work on some phone browsers

hello,
i have added slinky menu to my website, it works perfectly in all browsers except some phone browsers, like samsung browser, or iphone default browser,
Any suggestion?

modal compatibility

The plugin doesn't seem to work on modal.

Set sub menu as active on init

Hi Ali
I don't know if this is more of a request rather than an issue.
But is it possible to set a menu item as active?

meaning if it is for e.g 3 layers down when the page loads it is already on that item and it does not reset to the top level like it currently does?

Cheers,

Jack

jquery sliding menu inside another plugin won't load

Is there some sort of callback i can use in my own custom jquery to load your plugin? For some reason if your sliding menu code isn't visible (hidden by a div on top) it doesn't load. Any help appreciated! :)
(your code starts at "Artist" as I'm using your demo html in my code running your plugin):

Browser support

Hi Ali,

This is almost exactly what I was looking for but I'm curious about which browser are supported and smartphone browsers?

I've tested it on Android v2.3.5 native browser and the ul's are not hidden.

Best regards
Umut Ücler

Slinky with Bootstrap

Hi, thank you for your great work. I really love your Slinky. And I am trying to combine it with Bootstrap 4. I want when user click on Dropdown button, it will show Slinky menu instead of Bootstrap's normal dropdown menu.

I tried to do it here: https://codepen.io/nht910/pen/wvMPOOy . But it doesn't seem to work.

And I am just a newbie so I have no idea to fix it. Can you please help me to fix it?

Thank you so so much.

P/s: sorry for my bad English.

Height: 0px;

Hello, I installed the library using the example from the index file, but as a result, I get a block height of 0 px from the menu block. Code that displays:

<div id="menu" class="slinky-menu slinky-theme-default" style="transition-duration: 300ms; height: 0px;">
  <ul style="transition-duration: 300ms;">
    <li>
      <a href="" class="next"><span>Мужское</span></a>
      <ul><li class="header"><a href="#" class="back"></a></li>
        <li>
          <a href="#" class="next"><span>Aerosmith</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#" class="next"><span>Get Your Wings</span></a>
              <ul><li class="header"><a href="#" class="back"></a></li>
                <li>
                  <a href="#"><span>Same Old Song and Dance</span></a>
                </li>
                <li>
                  <a href="#"><span>Train Kept A-Rollin'</span></a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="next"><span>Eagles</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#" class="next"><span>Hotel California</span></a>
              <ul><li class="header"><a href="#" class="back"></a></li>
                <li>
                  <a href="#"><span>Hotel California</span></a>
                </li>
                <li>
                  <a href="#"><span>Pretty Maids All in a Row</span></a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="next"><span>Led Zeppelin</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#" class="next"><span>Physical Graffiti</span></a>
              <ul><li class="header"><a href="#" class="back"></a></li>
                <li>
                  <a href="#"><span>Houses of the Holy</span></a>
                </li>
                <li>
                  <a href="#"><span>In My Time of Dying</span></a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="" class="next"><span>Женское</span></a>
      <ul><li class="header"><a href="#" class="back"></a></li>
        <li>
          <a href="#" class="next"><span>Get Your Wings</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Same Old Song and Dance</span></a>
            </li>
            <li>
              <a href="#"><span>Train Kept A-Rollin'</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="next"><span>Hotel California</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Hotel California</span></a>
            </li>
            <li>
              <a href="#"><span>Pretty Maids All in a Row</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="next"><span>Physical Graffiti</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Houses of the Holy</span></a>
            </li>
            <li>
              <a href="#"><span>In My Time of Dying</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="next"><span>Songs</span></a>
      <ul><li class="header"><a href="#" class="back"></a></li>
        <li>
          <a href="#"><span>Hotel California</span></a>
        </li>
        <li>
          <a href="#"><span>Houses of the Holy</span></a>
        </li>
        <li>
          <a href="#"><span>In My Time of Dying</span></a>
        </li>
        <li>
          <a href="#"><span>Pretty Maids All in a Row</span></a>
        </li>
        <li>
          <a href="#"><span>Same Old Song and Dance</span></a>
        </li>
        <li>
          <a href="#"><span>Train Kept A-Rollin'</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="next"><span>Genres</span></a>
      <ul><li class="header"><a href="#" class="back"></a></li>
        <li>
          <a href="#" class="next"><span>Rock</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Hotel California</span></a>
            </li>
            <li>
              <a href="#"><span>Pretty Maids All in a Row</span></a>
            </li>
            <li>
              <a href="#"><span>Same Old Song and Dance</span></a>
            </li>
            <li>
              <a href="#"><span>Train Kept A-Rollin'</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="next"><span>Hard rock</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Houses of the Holy</span></a>
            </li>
            <li>
              <a href="#"><span>In My Time of Dying</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="next"><span>Settings</span></a>
      <ul><li class="header"><a href="#" class="back"></a></li>
        <li>
          <a href="#"><span>Profile</span></a>
        </li>
        <li>
          <a href="#" class="next"><span>Player</span></a>
          <ul><li class="header"><a href="#" class="back"></a></li>
            <li>
              <a href="#"><span>Equalizer</span></a>
            </li>
            <li>
              <a href="#"><span>Volume</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Rename the widget function name from menu to sliding_menu

Getting conflict with jquery ui autocomplete v1.10. Because of same function name .menu is being used.