Customised Side nav menu at all widths (instead of the hamburger top menu). Just a bit more modern

Side nav menu at any width, at the moment knack only offers a outdated top ham burger menu. This customisation offers a much more mordern feel utilising a spin on click menu click.

Resulting in a slide side nav to bring the menu in originally for mobile views. You will need to use a AJAX to use the the profile picture from your database, however this utilises a feature that is already pre built in for mobile resulting in the below.

 

 

Simply add this css code below. This works with knack 

 

#kn-login #kn-mobile-menu {
display: block !important;
}

#kn-mobile-menu {
background-color: #f1f1f1;
width:290px;
transition: 0.6s;
z-index:100;
margin-top:80px;
-webkit-box-shadow: 11px 13px 72px -29px rgba(0,0,0,0.64);
-moz-box-shadow: 11px 13px 72px -29px rgba(0,0,0,0.64);
box-shadow: 11px 13px 72px -29px rgba(0,0,0,0.64);
left: -300px!important;
}
#kn-mobile-menu .is-visible {
left: -300px!important;
}
#app-menu-list-mobile {
margin: .75em;
list-style: noe;
font-size: 16px;
}
@media screen and (max-width: 20000000000px) {
.kn-mobile-controls {
display: block;
}
}
@media screen and (min-width: 769px) {
#kn-mobile-menu.is-visible {
left: 0;
}
}
@media screen and (min-width: 1px) {
.kn-dropdown-icon .fa-caret-down:before {
display: contents !important;
}
}
#app-menu-list {
display: none;
}
#knack-body #kn-app-header {
height: 80px;
position: fixed;
z-index: 2000;
}
.kn-info-bar {
display: noe !important;
}
#kn-app-header img {
width: 116px;
margin-left: 15px;
}
#kn-app-header .kn-container {
margin-left: 10px !important;
z-index: 10000000;
}
.kn-dropdown-menu ul {
position: relative !important;
align-items: stretch;
background-color: #c7d5db00;
}
.kn-dropdown-menu ul .is-active {
color: #c7d5db00;
}

.kn-menu-list li ul {
border-left: 0px solid #dbdbdb !important;
margin: 0px !important;
padding-left: 0px !important;
padding-top 10px !important;
transition: 0.8s !important;
padding-left: 25px;
font-size: 16px;
border-bottom: 1px solid #e4e4e4;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
display: none;
}
.kn-menu-list li ul .is-active {
color: #c7d5db00;
}
.kn-dropdown-menu li {
background-color: #c7d5db00;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
padding-left: 25px;
font-size: 16px;

}
.kn-dropdown-menu li .is-active {
color: #c7d5db00;
}
.kn-dropdown-menu ul {
box-shadow: 0 0 0px 0px rgba(0,0,0,.1)!important;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
padding-left: 25px;
font-size: 16px;
color: #c7d5db00;
background-color: #eae8e838;
border-radius: 0.6em;
display:none;
}
#app-menu-list-mobile li.is-active {
background-color: #efefef00;
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
#kn-mobile-menu .is-active a {
color: grey;
}
#knack-body {
transition: margin-left 0.9s;
padding-top:100px;
}

.kn-dropdown-menu-list ul {
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}

.kn-mobile-nav-toggle {
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
margin-top: 10px;
}
.kn-mobile-nav-toggle.down {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
color:white;
}
.kn-dropdown-icon {
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}

.kn-dropdown-icon.down {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
color:white;
}


#app-menu-list-mobile ul {
list-style: none;
transition: 0.9s;
display: none;
background-color: #efefef00;
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
#kn-dropdown-menu-list ul {
margin-left: 20px !important;
-moz-transition: all .4s linear;
-webkit-transition: all .4s linear;
transition: all .4s linear;
margin-left: 15px !important;
}

#kn-dropdown-menu-list a {
opacity: 0;
visibility: hidden;
}
#kn-dropdown-menu-list a :target {
opacity: 1;
visibility: visible;

}

1 Like

This is really cool, Jonathan!

Unfortunately I couldn't get the code posted here to work the way I expected. But the logic here is sound and I was able to use your method (of removing mobile width settings) to port the Mobile Side Nav to Desktop. I also included a fix for dropdowns as well.

If anyone would like for their menu to function EXACTLY the same as it does on mobile, here's a post I made that shows how: https://support.knack.com/hc/en-us/community/posts/360072659172-Mobile-Side-Nav-Menu-Theme-with-Login-Logout-Support-that-CSS-and-Javascript-

Hi 17204109468

This is an awesome bit of code. Makes the page menu layout far more responsive & modern.

I've just come across one issue which is dropdown menus on a Mobile Device... it's not clickable and you cannot access the sub menu pages.

Any ideas what code we could add/amend to enable this?

Thank you!

After some adjustments I made it work the way I need, BUT there is one thing I can't fix, below 769px, menus that has sub-menus (dropdown) don't work, the down arrow disappears.

I guess there's something wrong with this:

@media screen and (min-width: 1px) {
.kn-dropdown-icon .fa-caret-down:before {
display: contents!important;
}

Any ideas? 

Hello!  Awesome Work!!  Thank you for this!  (Learning code here) Js & CSS installed and works well, except I still have to click on the hamburger in order for it to show the menu. Is this by design?

What code would ne@media screen and (min-width: 769px) {
#kn-mobile-menu.is-visible {
left: 0!important;

/* MUST ADD "!important" PER INSTRUCTIONS, still does not show until toggled manually the first time and adds another 300px to the left margin */

ed to be adjusted so that it's always toggled, and I can turn it off if needed?

No Worries Ismaila,

You will need to use a 'GET' method for this and fill in the bits in bold from your own app mainly from the scene and field where

Your app displays the logged in photo for each user a image field will be needed in the accounts object. 

Any problems just email me at jonathan.mart.parsons@gmail.com

 

$(document).on('knack-page-render.any', function (event, view, data) {
$.ajax({
url: "https://api.knack.com/v1/pages/scene_**/views/view_**/records",
type: "GET",
headers: {
'Authorization': Knack.getUserToken(),
"X-Knack-Application-Id": "Your application ID",
"X-Knack-REST-API-Key":"Your API KEY"},
success: function (result) {
console.log(result);
var element = $("<div class=\"userpic\"</div>");
element.append(result['field_**']);
element.append("<p>Logged in as "+result['field_**']+"</p>");
$('.kn-mobile-user-info').html(element);
}
});
});

Amazing work !
This is working for me!

Can you share how you used ajax to add the profile picture?
Thank you !

sorry everyone you need to add js

 

$(document).on('knack-scene-render.any', function (page) {
$(".kn-mobile-nav-toggle").off().on('click', function () {
$(this).toggleClass("down");
if ($(this).hasClass('down')) {
document.getElementById("knack-body").style.marginLeft = "260px";
document.getElementById("kn-mobile-menu").style.marginLeft = "300px";
} else {
document.getElementById("knack-body").style.marginLeft = "0px";
document.getElementById("kn-mobile-menu").style.marginLeft = "0px";
}
});
});

$(document).on('knack-scene-render.any', function (page) {
$(".kn-dropdown-menu").click(function () {
$(this).children("ul").slideToggle(200),
$(this).toggleClass("is-active");
});
});

$(document).on('knack-scene-render.any', function (page) {
if ($(".kn-login").length) {
$(".kn-mobile-nav-toggle").removeClass('down');
document.getElementById("knack-body").style.marginLeft = "0px";
document.getElementById("kn-mobile-menu").style.marginLeft = "0px";
}
});

I found the issue

@media screen and (min-width: 769px) {
#kn-mobile-menu.is-visible {
left: 0 !important;
}
}

Unfortunately, dropdown links dont seem to work for me.

tried it Great idea but it doesn't work for me either ? sorry 

Hi Jonathan

i ve dropped you an email as i am also trying to make your code work on a test app.

i guess there is some typo like
display: noe !important;

but thats not enough to make it works on my side

Hi Anthony, 

Sorry for the late reply.

This is meant to work with the new theme? as the old theme doesn't include a mobile menu. I've tested this and it does work what part especially are you having a problem with?

Feel free to pop me a email keen to help 

jonathan.mart,parsons@gmail.com

Thanks 

Thank you for posting but it doesn't seem to work in the new theme (that's been out for a year).  Perhaps it only works in the old Flat theme?