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

Forum

Ning popout tabs that float down the page with you. just add the stylesheet to your NC custom code box or just your main page place the stylesheet in a text box.

Update Version 2.1 I noticed on some networks using Google chrome there was an overflow problem and a sub tab issue but it's fixed now....

the look is completely customizable. if you'd like help adding the customized tabs and/or main button to the stylesheet just ask I'll be more than happy to help..

Compatibility
Compatible with all newer browsers and all Ning networks. Warning may not be compatible with some customized navigation codes...

Applying the code to your network or just your main page

for your whole network the stylesheet goes into your NC custom code box. or for just your main page place the stylesheet in a text box on your main page.

 

View it live Here

http://4himalone.ning.com/
or    www.b-yond.co

left Floating navigation button
<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/nAiZo7rmzbt9ZZTFuDHmUozXaaiRi83*LEJhllheLlecQ4ryFmunU13AF-5y8vxArQI1n2jjOlu5vk9cUxVJRzNpgphrbwEz/popouttabsfixedleft.css" />

 

 

 

 

 

 


center Floating navigation button
<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/ML7eTq6RkUO18UvXFQVxSkK*2h2JZRjdPopVG66JBPs43fpsYG9vX4uX268*7BxoCOu**fZdTF9q6UnSdbXhKLFLLV8FAurU/popouttabsfixedcenter.css" />

 

 

 

 

 

 

 

 

 

 

 

 

the width of the tabs is set to auto.  Here it is at 800x600 pixels

the minimum screen resolution is 225 X

 

editing the content in this Stylesheet..

if you can edit the stylesheet itself that's always the best way to go but if not here's your other choices
Main Floating navigation button image & size   Just change the image link to the one you prefer

DIV#xg_navigation.xj_navigation {background-image: url(http://api.ning.com:80/files/y-ReZwage8B91igY1AkwJf5dA5NaR6UVn-fqhg*i9EzqQzgnvq-RjSocMMol1*Q1m7LPa-0r3iLzve*u0446KEHjcYuZ7IyX/NingNavigationMenu.png)!important;
  background-size:100% 100%!important;
  width: 80px!important;
  height: 80px!important;}

Tab image Just change the image link to the one you prefer

DIV#xg_navigation.xj_navigation .xg_subtab A {
 background-image: url(http://api.ning.com:80/files/hjDeUIug8oyYlTS9Czi-JignMZhMy4qhhY*Pd3tLFksSAfT5DIycS7jI1UOZbyuE0*FRlVBmU8veM8iaZkF*rvW5ra7MYKNI/Clipboard1.jpg)!important;
 background-size:100% 100%!important;}

Mouse over tab image Just change the image link to the one you prefer

DIV#xg_navigation.xj_navigation .xg_subtab A:hover {
 background-image: url(http://api.ning.com:80/files/NP52OY86t7NseQsEFT79-gZf*Ekj0BUjKzYfm39ISpg1qhMpwYBJ7QAy3bmPqB9G89*OaUiB67tkOAkxD6OqnOZ-C7BunRen/Clipboard2.jpg)!important;
 background-size:100% 100%!important;}

Font color
  DIV#xg_navigation.xj_navigation .xg_subtab SPAN{color:white!important;}

Mouse over font color
  DIV#xg_navigation.xj_navigation .xg_subtab SPAN:hover{color:lime!important;}

the width of the tabs

DIV#xg_navigation  A{
 max-width:204.4px!important;
 min-width:204.4px!important;}

Moving the navigation image up or down and left or right

left navigation image

DIV#xg_navigation {
    top: 3%!important;
    left: 21px!important;}

center navigation image

DIV#xg_navigation {
    top: 3%!important;
    left: 45%!important;}


Moving the tabs up or down and left or right

DIV#xg_navigation UL:hover{
    top: 4%!important;
    left: 10%!important;}

if you need help adding the changes to the stylesheet just let me know I'll be more than happy to help.

here's some menu images that Dave gave me if you'd like to use one of these or make your own..

 

Thank you Dave.

Just right click on the image and opening in a new tab to get the link for the image.

 

 

 

 

 

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

Join Ning Creators Network

Email me when people reply –

Replies

  • Pretty awesome George, BUT, is there any way to have your new method and the older menus at the same time?

    • do you want the centered one or the one to left?

      Sent me the link to your network and I'll work that out for you.. :-)

      • I tried the center version and it was better on http://swmm2000.com but I took it out as i get a lot of lurkers on my network and they might be confused by a button, it did look good however,  let me think about it more but thanks for a great tip and even greater code

        • thank you for the Complement Doone You have a great day :-)

      • hi

        thank you this is great I love it, could you please but the code in for me as it is playing me up you are a star thank you www.b-yond.co

        • to make it look like the image above @ www.b-yond.co just add this code to your NC custom code box.

          <link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/*tHd*uipNJDIa5FrEWehiZ4CP-AiLfC3CFeJSQ4FCaP6Ea*ESGm8CQsVHFURtH6xE2bW6JZip6o83IoNzj*7wIoAHLxBFe3S/1064554081.css" />

          • Hi your a star, please can you just make sure that every thing is ok with my site please www.b-yond.co

            • your site looks great and the navigation is working perfectly in Firefox and in Internet Explorer 9-10  but when the spinning animation starts in Google chrome your sub tabs disappear. To fix that I recommend removing Dave's spinning tab animation code.

              and if you would like you can change the size of that button using this code.. just place this code underneath the stylesheet  in your NC custom code box..  I think your network looks better with the button at this size :)

              <style>

              DIV#xg_navigation{
                width: 60px!important;
                height: 60px!important;}

              </style>

              • Hi


                Thank you your a star :) done what you said, but I think I may have delete some thing, Please can you have a look and make sure  that my still ok, thank you so much for all your help and support 

                www.b-yond.co

  • it's explained above how to edit the stylesheet.  You just use this code for the image

    Main Floating navigation button image & size   Just change the image link to the one you prefer

    DIV#xg_navigation{background-image: url(http://api.ning.com:80/files/y-ReZwage8B91igY1AkwJf5dA5NaR6UVn-fqhg*i9EzqQzgnvq-RjSocMMol1*Q1m7LPa-0r3iLzve*u0446KEHjcYuZ7IyX/NingNavigationMenu.png)!important;
      background-size:100% 100%!important;
      width: 80px!important;
      height: 80px!important;}

This reply was deleted.

Search the Creators Network

Latest Activity

Chazz replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Thank you Fire-Tech! I don't understand why I didn't Pick it up like I did everything else. This sh…"
3 hours ago
Fire-Tech replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Find PHP classes you like here. Add to wishlist. Wait for them to go on sale for $10 if you don't w…"
3 hours ago
Suki Winthrop replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Roxanne not sure what exactly you r asking to george, but- if you have a ning 2 site you can use th…"
3 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I totally love Spruz...however....the only thing that I am bugged about is there is no way to send…"
4 hours ago
Chazz replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I would like to be able to learn PHP.. I can't afford to take classes to learn it. What would be a…"
4 hours ago
Chazz replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I have been exploring Spruz, Fingers now crossed, I haven't had any spammers yet. When I explored D…"
4 hours ago
Chazz replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I have actually had responses. Thankfully. Usually it took several days for the site to become acce…"
4 hours ago
Chad Burt replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Quick thought...look at this tracert from one of my many users that have had problems for weeks:
Tr…"
4 hours ago
Roxanne Furlong replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"George, Can you explain this in layman (or doesn't know crap) terms? I have no idea how or what to…"
5 hours ago
Suzie Nielsen replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Yeah, I guess it is not the answer... now I hear folks are checking with their servers..."
5 hours ago
Shadow replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Thank you and yes. dealing with such diversity age or mindset is hard to please all.. but mind that…"
5 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"My site is private by approval only so I guess that would not apply.  I also don't have the name Sp…"
6 hours ago
Shadow replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Have you noticed a bunch of spamming in Spruz.. I had asked one here about Spruz as it was suggeste…"
6 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I checked the isitdownrightnow.com and my site was indeed down.  I could not get to it from any pho…"
6 hours ago
Asil replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"@Donna Mac.  I suspect the issue was with your Internet Service Provider (ISP).  I was on the phone…"
6 hours ago
Suki Winthrop replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Donna that sounds like Sruz is the perfect fit foryou then- so happy you will be ok! :)"
7 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I totally agree.  The work I did with SE PHP was labor intensive and a learning experience that I d…"
7 hours ago
Suki Winthrop replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Hey Donna, i think your last sentence says it all.  We look for something 'as good as ning'- but ni…"
7 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"Social Engine PHP has all the info AND Spruz has the membership profiles.  SE is offline.  WAY TOO…"
8 hours ago
Donna Mac replied to The Ning Team's discussion Exciting News About Ning + Cyndx LLC
"I have all of my content on SocialEngine PHP but it is offline.  I have member profiles and member…"
8 hours ago
More…