Make menu into left sidebar

API & Customization Show & Tell
1

This is handy if you have lots of menu items and want the classic left sidebar menu type layout.   This isn't perfect by any means but works great when accessing your Knack app directly.

JavaScript

$(document).on('knack-page-render.any', function(event, page) {

//Make the scene height = menu set in CSS

$(".kn-scene").height($("#kn-app-menu").height());


});

CSS

/* Doc setup */

html {height: 100%}

body {height: 100%}

#knack-dist_1 {height: 100%; padding: 0 0 0 0; }


/* Sidebar */

#kn-app-menu {float: left; width: 180px; height: calc(100% - 60px); background-color: ChangeThis;}

#kn-app-menu > ul > li > a {padding: 0 0 0 5px !Important; width: 175px;}

.kn-scene {float: left; width: calc(100% - 180px); overflow-y: scroll;}

Change the app-menu background color to the color set in app settings > Layout & Colors > Tab Menu.

Customise the width of the sidebar by changing the 180px figure.

Current Problems

So far the print link of any page will also scale the scene as on the screen in any print output and I’m sure there’s a fix for that.  The left sidebar height is set as the screen height minus 60px which is the top panel height, that might change if you use a custom logo and I’m sure a complete JavaScript solution would cover that issue.

Enjoy!


2

Is there anyway to have a menu float at the bottom of the page for mobile users like you see in some mobile apps?

3

thanks marc

Jonathan work is really good, but the code in his community post do not work... And it s still too tricky for me right now (need to improve my CSS skills :D)

so i like the Brad approach wich is quite easily understandable.
i would like to go first on that... and try to make my lists expanded...

i guest i need to set all ul and li menu items  with display:block property and went for
.app-menu-list-mobile {display:block !Important;}
.kn-dropdown-menu {display:block !Important;}
.kn-dropdown-menu-list {display:block !Important;}

but items are still one over the other... what do i miss please :)

4

Hi Saint-Criq,

 

Have a look at the following post

https://support.knack.com/hc/en-us/community/posts/360022175651-Customised-Side-nav-menu-at-all-widths-instead-of-the-hamburger-top-menu-Just-a-bit-more-modern

Might be helpful.

5

hi there

first thanks for sharing that improvment.

I would like to use that side menu, but i am also using dropdown menus, and would like dropdown items to be always visible, not only after clicking the subitem...

any ideas on how to make side menu always fully expanded?

6

A different approach here to make this work in the new theme - this simply forces the mobile menu to be displayed permanently at widths > 768px, and happily doesn't require javascript at all.

Other things this does:

  • Sets the sidebar below the app title.
  • Hides the mobile account settings (.kn-mobile-account-container) - they remain in under the app title bar.
  • Sets the scene to scroll vertically so the app menu and sidebar stay locked.
  • Hides the usual horizontal menu (#kn-app-menu).
  • Allows the usual mobile menu to work for widths < 769px.
@media screen and (min-width: 768px) {
 html, #knack-body {overflow-y:hidden !Important;} 
 #knack-logo {padding: 0.5em 0;}
 #kn-mobile-menu {left: 0; top: 60px; width:150px; font-size:inherit; background-color:#ebebeb; box-shadow: inherit;}
 .kn-scenes {left:150px; width:calc(100% - 150px); position: relative; height:calc(100vh - 60px - 40px); overflow-y: scroll;}
 .kn-mobile-account-container {display:none !Important;}
 #kn-app-menu {display:none !Important;}
}

I haven't fully tested across the whole app yet (popup forms and print screens for example...).

Here's the CRM template:

7

Thanks Brad,

I'll have a go with the div ids and the inspector...

Marc

 

8

Hi Marc, thanks for the feedback - the more we share the better Knack gets!

The script will need targeting the beta theme div ids to make it work - I'm short of time just now but I'm confident all it will take is some Chrome inspector time and testing to find the ids and modify the script.

Brad

9

Hi Brad,

Thanks for sharing this great script.

It works like a charm with the 'old' theme designs, but I'm unable to get work with the new beta theme.

Any thought on how the fix this problem?

Thanks,

 

Marc

10

Keith - I've been meaning to thank you for ages!

Thanks!

Brad

11

One more thing to make this work with popups...you have the change the code to this...

  

$(document).on('knack-page-render.any', function(event, page) {  

//Make the scene height = menu set in CSS

$(‘div.kn-scenes > div.kn-scene’).height($("#kn-app-menu").height());


}); 

  

12

Actually, the above leaves a vertical scroll bar that's not supposed to be there.  This is better...

.kn-page-modal > .kn-scene {float: initial; width: initial; overflow-y: hidden;}

 

13

This breaks the a modal pop-up form, but I figured out you can fix it by adding this line to the end of the CSS...

.kn-modal-wrapper.kn-page-modal > .kn-scene {float: initial; width: initial; overflow-y: initial;}

 

14

Sorry Graham I haven't explored doing this for a menu set.  I've you have a go and get something working please post in a separate topic!

15

This is great for the changing the main top menu to the side in the app.  Can you tell me how I would keep the top menu horizontal, and only change the TAB MENUS into vertical layout instead?  I'm not great at the coding side, so any help is appreciated.  

16

Thanks for the input Jeff - we settled on "@media screen and (min-width: 500px)" in our environment that seems to work well.

17

Worked perfectly!  Thanks Jeff!

18

Sorry for not providing more clarity. Try putting all of the existing css that you used to move the menu to the side within the brackets. Basically, this will make it only follow those css rules if the min width is at least 480. If it's on a smaller screen, it will ignore the rules, and follow the default layout that knack has set up for smaller screens. Try tweaking the 480 number if necessary to ensure it works the way you want on each screen.

19

I've googled the css media queries, but I am a little bit confused about how to set up in the CSS.  Does anything need to go in between the { }?

20

@media queries should be able to help here as well. Give something like this a shot:

@media screen and (min-width: 480px) {

}

Googling css media queries should help provide some more guidance for you, or post back here  and we can try to help you through the process.