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.
How 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 **/
Replies
Very nice! Thank you for sharing it
Thanks Kos :-)
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
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
<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 :-)