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

Bizz replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
" As long as the page being iframed is within your own site you should be able to iframe the page, i…"
6 hours ago
Tavolo Ornitologico posted a discussion
}.photo{border:4px ridge #ffffff;} this also applies to ning 30 years ago .. but one of the problem…
12 hours ago
Scott Bishop replied to Scott Bishop's discussion
Photo Slideshow Embed for N2
"realise = release "
22 hours ago
Scott Bishop posted a discussion
Ning has been promising to realise a way to embed our photo slideshows once again but it is yet to…
22 hours ago
This Is bully replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"I keep the group or page private when they want to read or enter the group they cash app me the fun…"
yesterday
⚡JFarrow⌁ replied to David Shaw's discussion
Unexpected $4.50 NING Application Fee
"interested in how you do this.."
yesterday
Mr.Krissada Thongsom, Gerard Howard, Michael Daniel and 9 more joined Ning Creators Social Network
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
"thanks to you they are now ready to open a music site"
yesterday
Bizz replied to Bizz's discussion
Tip: How I added Music To A Page
"Thanks Tavolo, glad you found it useful"
yesterday
Tavolo Ornitologico liked Bizz's discussion Tip: How I added Music To A Page
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
""
yesterday
Tavolo Ornitologico replied to Bizz's discussion
Tip: How I added Music To A Page
"a nice bottle of Chianti from my Italy and Tuscany I send you a case of wine you are a great"
Monday
More…

Meanwhile, you can check our social media channels