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

dark fear updated their profile
5 hours ago
dark fear liked Gerry Regan's blog post Ability to feature and unfeature lost, as is My Network page
5 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"I appreciate your honesty... it is not all that I pictured either so it is OK...
The merge sorta…"
8 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"Sorry, KOS I forgot to mention you! You are like my right arm, Tech and listens to my rants!"
9 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Why 3.0?
"the welcome page is ok the rest looks like a paper to write"
11 hours ago
Rosas † Negras replied to Suzie Nielsen's discussion
Why 3.0?
12 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
i managed to build my mp3 player .. now i need you webmaster
"you are a genius, i knew i could count on you ... thank you very much dear friend"
12 hours ago
Bizz replied to Rosas † Negras's discussion
i managed to build my mp3 player .. now i need you webmaster
"To have a scrollbar show up you need to set a max height to the playlist and then set the…"
13 hours ago
Cindy Dean Mccoy replied to Cindy Dean Mccoy's discussion
approve group members
"Let me know what you found.  I would love a more accurate list.  maybe Ning will use it as a go-by…"
13 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"May I see your site?"
13 hours ago
Suzie Nielsen replied to Cindy Dean Mccoy's discussion
approve group members
"Thanks! Glad you made a list! I was working on it!"
13 hours ago
Suzie Nielsen replied to Suzie Nielsen's discussion
Why 3.0?
"What do you mean? I created the network and I hired JFarrow to design my welcome page... please…"
13 hours ago
More…

Meanwhile, you can check our social media channels