Current status of the Ning Platform is always available on the Ning Status Blog.

Tip: Side Nav Menu Hide and Show ver1

I was asked to share how I did this so here is the code for this version. You can see this working on my site except I have added some extras of how my site behaves when the nav is activated and also added my own header. This tip just shows the working slide in and out of view menu.

This is set up for the sites which have the menu on the left side off their sites.

Demo Video

 

So here is how to set this up

First have you menu set to the side via the design studio and set it also to scrolling NOT fixed. It's best to do this anyway because if your menu is to long your menbers can't reach the bottom of the menu on some screen sizes, this is just an issue with the Ning setup of the menu as standard.

4883184467?profile=RESIZE_710xHow to adjust the width of the menu in the code

In the CSS below there are three lines to change if you want a different width than what I've added. Where you see..

/** Position of button when open **/    /** Sets width of nav menu **/ and /** width of navOpen must be the same as site-headerFrame value **/

there is a value of 300px. To make is smaller set these values to what you want ie if you want it a little smaller set these to 200px for example. As a tip if you want the button to site more inside the menu set that value to a little less for the position of button when open. For example if you set the menu to 200px set this button value when open to something like 155px.

Ok so here is the code.

                               The first part of code is a little custom code which goes in your Social Site Builder > Custom Code > End Of Page Section

 

<script type="text/javascript">
// SIDE BAR MENU
x$(document).ready(function() {
x$('<button type="button" id="navMenu">Menu</button>').insertBefore(".header-nav");
x$("#navMenu").toggle(
function(){
x$('.central-content').addClass('navOpen');
x$('#pageHeader').slideUp();
x$('.central-content.navOpen #navMenu').text('X');
x$('html, body').animate({scrollTop : 0},600);
},
function(){
x$('.central-content').removeClass('navOpen');
x$('.central-content #navMenu').text('Menu');
}
);
});
</script>

 

Next we are going to add the CSS for the menu

                       This code goes in your Design Studio > Custom CSS > Theme or Global if you have the tick box activated

 

/***Site Menu **/
@media only screen and (max-width:766px){
#navMenu { display:none
}}
@media only screen and (min-width:767px){
#navMenu {
display:block
}
/** Menu button and style plus position from top **/
#navMenu {
position: fixed;
top:35px;
width: 80px;
z-index: 2000;
height: 40px;
font-weight:bold;
font-size:16px;
left:0;
border-radius: 0px 0px 10px 0px;
transition: 0.7s;
}
/** If admin this moves it down further to accomadate the design bar **/
.isAdmin #navMenu {
top:70px;
}
/** Button On Hover **/
#navMenu:hover{
color:white;background-color:royalblue
}
.central-content .site-headerFrame .site-header {
width:100%
}
/** Button when nav is open **/
.central-content.navOpen #navMenu {
right:0;
left: 255px;/** position of button when open**/
width:45px;
height:45px;
border-radius:50px;
transition: 0.8s;
}
.site-headerFrame{
width: 300px; /*sets width of nav menu**/
left: -300px; /*sets width of nav menu**/
top: 0;
bottom: 0;
position: absolute;
transition: 0.8s;
}
.central-content.navOpen .site-bodyFrame{ padding-left:300px;transition: 0.8s; }/** width of navOpen must be same as site-headerFrame value **/
.central-content.navOpen .site-headerFrame{ left:0;transition: 0.8s; }
.central-content .site-bodyFrame{ padding-left:0px;transition: 0.8s; }
.central-content.navOpen .site-header{ width:100% }
}

/***Site Menu END **/

 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

  • Very nice!  Thank you for sharing it

    • Thanks Kos :-)

  • NC for Hire

    You did it again!  Nice work..ill see how it looks on a site i'm working on..

    thinking about trying alternative layouts for groups...great work Bizz!

    • Thanks Justin :-)

      Oh by the way if you want me to show how I did the header bit as well let me know. I am working on some other versions of the menus, for example when you move over the button to open the nav it will show a popular pages menu underneath so you don't have to go into the full menu and also one which you can have multiple sub menus ie say you add a submenu to lets say groups which will show all the groups then sub menus to those to lets say show the pages of the group ie blog forum etc and then maybe could even have another submenu to show the categories of the particular page etc. It going to take a while but should be good especially for mobiles as hate the way the Ning mobile menus work.

      • Oh that's slick and you're right regarding mobile..  Looking forward to it

      • NC for Hire

        Yes.. i was going to try to tackle that tonight... you read my mind from across the pond!

        • Here is the code with the site header added in so you should be able to see the extra bits of code in it for the page header with is stated as this  #pageHeader

          Below that is the css for it and also to get the site name to show up which is the #header-siteName part.

          To set up your design for the text you can still do that in the design studio as normal by first choosing the use text as logo part, so you add the text you want font etc then save it, go back in then choose the use logo option then save it again. This will then set your logo to show above the nav menu and as it retains the text design you added it will display the text in your header. Below is how mine is set up in the design studio

          5055417878?profile=RESIZE_930xSo here is the code for the header

          <script type="text/javascript">
          // SIDE BAR MENU
          x$(document).ready(function() {
          x$('<button type="button" id="navMenu">Menu</button>').insertBefore(".header-nav");
          x$("#navMenu").toggle(
          function(){
          x$('.central-content').addClass('navOpen');
          x$('#pageHeader').slideUp();
          x$('.central-content.navOpen #navMenu').text('X');
          x$('html, body').animate({scrollTop : 0},600);
          },
          function(){
          x$('.central-content').removeClass('navOpen');
          x$('#pageHeader').slideDown();
          x$('.central-content #navMenu').text('Menu');
          }
          );
          });
          </script>

          <script>
          x$(document).ready(function(){
          x$("<div></div>").attr('id','pageHeader').insertBefore('.site-body');
          x$('.header-siteName').appendTo('#pageHeader').show();
          });
          </script>

          /** My Site Header **/
          #pageHeader{ height:100px; background-color:black;position:relative }
          #header-siteName{
          display: block;
          position: relative;
          z-index: 2;
          margin-top: 30px;
          float: left;
          margin-left: 120px;
          padding: 0px 20px 0px 10px;
          border-radius: 10px;
          }
          a#header-siteName:hover{ cursor:pointer }
          @media only screen and (max-width:766px){
          #pageHeader{ height:60px }
          #header-siteName{ width:100%; padding:0; font-size:36px;margin-top:5px;margin-left:0px;text-align:center }
          }

          Here is a little extra code if you want to use that . What this does is for mobile use. It hides the Logo and just shows the header and site name so there is not so much room taken up. The ' sticky' code is so when the member scrolls up the header and name scroll out the way and it just leaves the nav menu at the top.

          Try it on your phone to see what I mean. Here is the code for that.

          @media only screen and ( max-width:780px ) and (orientation:portrait){
          .header-nav .occasional-button > .button-iconic { font-size:1.5em }
          .site-headerFrame{ position:sticky!important; top:0px;z-index:800; }
          }

          @media only screen and ( max-width:780px ){
          .site-nameLogo{ display:none }
          #pageHeader{ padding-top:20px; height:80px }
          }

          Hope that helps you out budd :-)

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels