codyhouse/responsive-sidebar-navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Responsive Sidebar Navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

Article on CodyHouse

Demo

License

Dependencies

This experiment is built upon the CodyHouse Framework.

Make sure to include both the style.scss and util.js files of the framework.

Credits

Icons: Nucleo Library

Diagonal movement plugin: Vanilla JS plugin based on jQuery-menu-aim

responsive-sidebar-navigation's Issues

Can't use float clearing in main content area

If you try to use a clear="all" or clear="left" in the main content section then any content after that disappears until you try to scroll down the page.
If the page content doesn't extend pass the bottom of the screen then you'll never be able to see it.

Add the following to a page to test:-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

< br clear="both"/ >

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How is the --selected class supposed to get added to the side menu items

For desktop, I don't see in the main.js file how the --selected suffix gets added to the cd-side__item class. I'd assume this would be by checking the current window.location and finding it in the side menu li items and if found, applying it?

I searched the main.js file for --selected but only see where it is being read in the expandSiderbarItem() function but not how it is being set.

Is this supposed to work out of the box and I'm missing something, or are we supposed to put in the logic to handle this?

Cover menu at mobile devices

In case, when there are many content on page, menu didnt work correctly on mobile devices.
Menu do not cover all display, so users continue to scroll in page content after menu items.

I think, it is no ok, because content could be very long and menu items should be separate from other content

toggle body class

Hi,

This is a great plugin, but we have issue with z-index (eg, if you have a sticky header above main).

As such, it would be great if when the button is CLICKED to show the slide out panel, a class was toggled on the body tag so we can target elements and customise z-index accordingly.

Many thanks.