"Updated tip" Ning popout Navigation tabs!! Update Version 2.1 for your main page or your whole network Google chrome overflow problem fixed

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.

 

 

 

 

 

Tags: Navigation, menu, popout, tabs

Views: 1484

Reply to This

Replies to This Discussion

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/Kx3aMiswcFpp6dlNvwcGIoi47p8nkbtVP3U4A0zCqFA-XNoElnZRKVJfSf5d8zG-9NSv1Jvw5YdIplRAe0oLQENZNQKp*1G6/popouttabsfixedcenter.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;}

I'm sorry you can't use the floating tabs :(

for what you want the code would have to be written for that.. I have created codes for that Style of tabs a years ago or so.. if I can find those codes I will send them your way.

you have a great day Scott

There was a discussion somewhere about tabs down one side, i saw it on my test network as well with no CSS at all in the advanced css box. I cleared my cache and back to normal it went. I hope you can sort this out.

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity


NC for Hire
JFarrow replied to John Bizley's discussion 'Has anyone else considered using a tab container for help files ?'
"this tip is infinitely useful to NCs John .. I've been doing something similar, but instead of…"
1 hour ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"category nav seems fixed  but custom page module still screwy but..great job on a very speredy…"
1 hour ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Same as SE. That would be a problem with the Trademark name.."
4 hours ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"same on all sites its a bug"
4 hours ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Hi Riccardo I see no navegation on your network"
4 hours ago
Aaron replied to Rainer Glaap's discussion 'Heartbleed, MITM - Security Issues'
"Thanks for bringing this up! As Rainer mentioned, Ning.com wasn't vulnerable to the Heartbleed…"
4 hours ago
Khatlen Guse replied to Stig Karlsen's discussion 'Problems with Facebook activity feed'
"Hi Stig! My feed its ok now! :) I hope that your is ok too."
4 hours ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"id use that but to be safe make sure theres no copywrite on the pentaprism and if there is it…"
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service