"tip" CSS3 "Ningbar navigation menu V2.1"

[George H. Compton IV]

A new discussion was started for Ningbar navigation menu version 3 Click the line below

GEOCOMs Ningbar navigation menu V3 Final full version

A true click-on-demand navigation menu using JavaScript, HTML and CSS. Save space and give your network a sleek new look

everything below here is the old discussion go to the new discussion above.

Let your members test it with an on-off button

I added a code at the bottom of this Discussion to Let your members test it with an on-off button by default it's turned off your members will have to turn it on to test it :-)

Ningbar menu V2.1 In this update I added cool new tab animation and gave the ability to use your design studio to change the background color of the tabs. click here to see it live

Ningbar menu V2 update!! In this update I centered the tabs and added a 30 pixel margin to the subtabs so you'll be able to get to the tabs underneath the subtabs Which makes it even more compatible with smaller screen resolutions..

I rewrote and combined three of my past discussions. My styled and animated tabs, the ultimate Ning bar without the animation and My pop-up tabs.. I think you'll love this :-)

 

 

As you can see in the image above it is compatible with very small screen resolutions.

 

you can customize the image button and raise and lower the height or move it left and right if necessary. You can also customize the Ningbar image. Use your design studio to change the text color and the background color of the tabs.

 

here's how it should look in your NC custom code box with the code changes if you don't want to change anything just put the stylesheet in your NC custom code box. There are four separate lines of codes. the first one is the stylesheet. the second one is to change the image of the Ningbar. the third code is the navigation image and positioning code. the fourth code you can change the width of the tabs.The bottom three are only needed if you want to customize the look

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/R4BQcV-MEbBI4aOxyEZvNx6X2bGPHlFJctHTMC4-U8-PYMsq3Whek8vYDgQTlWvXTsVpRIg8AUNx97r-DFqx5s3nswhDqaBd/NingbarnavigationmenuV2.css" />

<style>
DIV#xn_bar{ background-image: url(http://replace/with/your/image/ink/MenuGif2.gif))!important;
     background-size:100% 100%!important;}

DIV#xg_navigation{
     background-image: url(http://replace/with/your/mage/link/MenuGif2.gif)!important;
     background-size:100% 100%!important;
     top: 0px!important;
     left: 80px!important;
     margin-top: 1px!important;}

DIV#xg_navigation  A{
     width:154.4px!important; }
</style>

Let your members test it

Let your members test it and see if they like it before it's implemented on your network see image and codes below. By default the Ningbar menu is turned off in this code.

 

to let your members test the new navigation menu before it's implemented place these codes in your adbox above the header.

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css" ></link>
<p></p>
<script type="text/javascript">
// <![CDATA[
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
// ]]>
</script>
<p><span class="font-size-5">Test the new Ningbar menu turn it on and off and let the creator know if you want it permanently implemented in the network</span></p>
<p><br />
<button onclick="swapStyleSheet('off')">Ningbarmenu off</button> <button onclick="swapStyleSheet('http://api.ning.com:80/files/R4BQcV-MEbBI4aOxyEZvNx6X2bGPHlFJctHTMC4-U8-PYMsq3Whek8vYDgQTlWvXTsVpRIg8AUNx97r-DFqx5s3nswhDqaBd/NingbarnavigationmenuV2.css')">Ningbarmenu on</button></p>

click here to see it live

click here to view the codes in the stylesheet

[dave]

Nice work George,  just keeps getting better and better..Love It :)

[George H. Compton IV]

Thank you Dave :)

[Eric Suesz]

Thanks, George! Love that you are so generous with your tips. 

[George H. Compton IV]

You're welcome Eric Suesz I love sharing with the members here on creators.

[Illya]

Quick question, can you remove the inbox link in the Ning bar, but leave the other links like the friends, in invites, settings Esc. Please help with this I have want to remove that code because I have the Facebook message look alike code the Elson has done so new there are to inbox links on my Ning bar, and I only want the one that I just added by Elson but I don't want to remove the previous code for the Ning bar thing and end up losing the settings, friends, and invite links.

[George H. Compton IV]

I'm sorry that's actually not part of the codes that came from Jen's tip  everything else is mine :-)

Add Member Account Box Links/Notifications to NingBar
Posted by Jen on March 30, 2012 at 3:33pm click here

[Skye]

Hi George this is a wonderful idea thank you. Any way to show the tab titles as you can see when one doesn't hover over it the Nav Bar is blank, this will confuse the members they won't even know it is there. Thank you for your help on this.  I have put my own code in the background to resolve this but to no avail.

I see you have the Menu button showing, that would be great to have which the codes a

[George H. Compton IV]

the menu button is included in the stylesheet. So it must be some other customization that has been done on your networks Navigation that has caused this problem. I would actually have to be on your page to see what the problem is.  I don't need to log in I just need to see your page and I'll write the codes to fix that..

[Skye]

http://pathsofpaganunderworld.com/

[George H. Compton IV]

Okay This stylesheet will work on your network. You have some neat customization on your network :-) that's all it was

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/cXFI09Qrk*Cd5d-xf55PrNaV0CtYCNDdb6hNCbqG5YPFADWe42yxQNoKnV17kFaXiiHqTemwp6KrJtTzWdWsvOvzmHJacYpq/yourpopouttabsNingbar.css" />

[Skye]

Thank you George. Have a great New Years, be safe!

[Skye]

Gods thank you for pointing that out.