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

Forum

A few weeks back i was running through some css to change my Nav buttons to look my like apple Navigation,I gave this code to George to work a little magic and as usual he came up with all sought's of ideas :-)Here is my little spin on that Enjoy :-)This is the Dark Version.DIV#xg_navigationul,DIV#xg_navigation li,DIV#xg_navigation span,DIV#xg_navigation a {margin: 0!important;padding: 0!important;position: relative!important;}DIV#xg_navigation A:hover {background: #646464 url(images/grad_dark.png) repeat-x left bottom!important;background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a))!important;background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%)!important;filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0)!important;box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;filter: none!important;transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;}DIV#xg_navigation li a {box-shadow: inset 0 0 0 1px #8a8a8a!important;-moz-box-shadow: inset 0 0 0 1px #8a8a8a!important;-webkit-box-shadow: inset 0 0 0 1px #8a8a8a!important;background: #4a4a4a url(images/grad_dark.png) repeat-x left top!important;background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878))!important;background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0)!important;border-bottom: 1px solid #5d5d5d!important;border-top: 1px solid #5d5d5d!important;border-right: 1px solid #5d5d5d!important;line-height: 34px!important;filter: none!important;transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;}DIV#xg_navigation a {border-radius: 5px 0 0 5px!important;-moz-border-radius: 5px 0 0 5px!important;-webkit-border-radius: 5px 0 0 5px!important;border-left: 0px solid #5d5d5d!important;color: #ffffff!important;display: inline-block!important;font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif!important;font-size: 12px!important;text-align: center!important;text-decoration: none!important;text-shadow: 0 -1px 0 #333333!important;}div#xg_navigation li a {-webkit-animation: cssAnimation 2.561s 1 ease;-moz-animation: cssAnimation 2.561s 1 ease;-o-animation: cssAnimation 2.561s 1 ease;}@-webkit-keyframes cssAnimation {from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }}@-moz-keyframes cssAnimation {from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }}@-o-keyframes cssAnimation {from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }}DIV#xg_navigationul,DIV#xg_navigation li,DIV#xg_navigation span,DIV#xg_navigation a {margin: 0!important;padding: 0!important;position: relative!important;}DIV#xg_navigation a {border-radius: 5px!important;-moz-border-radius: 5px!important;-webkit-border-radius: 5px!important;transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;}DIV#xg_navigation ul li A{text-align: center!important;}DIV#xg_navigation a {border-top: 0 none!important;border-left: 1px solid #5d5d5d!important;display: block!important;line-height: 120%!important;text-align: center!important;}DIV#xg_navigation UL{background-color: transparent!important;}DIV#xg_navigation {background-color: transparent!important;}DIV#xg_navigation .xg_subtab SPAN{color:black!important;transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;}DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;}DIV#xg_navigation A{min-width:100.4px!important;}

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

Join Ning Creators Network

Email me when people reply –

Replies

  • If you don't want the rotation animation just take out this line of css


    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
  • Scott Bishop replied to this and asked to see a screen shot..his comment was deleted..who Knows why, can't seem to add any screen shots as theirs no link button or upload phot buttons above lol...
    If you want to stop the rotation of the nav tabs use this instead of the first comment i made..i left a few lines out :-)

    div#xg_navigation li a {
    -webkit-animation: cssAnimation 2.561s 1 ease;
    -moz-animation: cssAnimation 2.561s 1 ease;
    -o-animation: cssAnimation 2.561s 1 ease;
    }
    @-webkit-keyframes cssAnimation {
    from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-moz-keyframes cssAnimation {
    from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
    @-o-keyframes cssAnimation {
    from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
    to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
    }
  •  I love the animation you added :) dancing tabs

    • Hi George, Thanks for putting the pic's up :-) ,  i couldn't find a link , Glad you like them :-) There on the edge, I thought they look pretty cool :-)

      •  you're welcome they do look pretty cool and I'm glad the animation stops shortly after the mouse over. It makes a great eye-catching visual effect :-)

  • This is VERY cool, but I'm curious... which codes would I remove that takes out your css styling... color and border wise? I like this, but I want the css style to come from my previous stylesheet.

    Not sure if it will work, but if you now visit my network, you'll see the nav tabs come in... they start with my yellow, shaped borders, but end without them. Seems your code appearance settings are over riding mine, but mine will work with the movements of these tabs. Here's my link.

    http://addictapic.com

    • is this all that I would remove to keep animations and have my style sheet allot the colors and borders/shape?

      DIV#xg_navigationul,
      DIV#xg_navigation li,
      DIV#xg_navigation span,
      DIV#xg_navigation a {
      margin: 0!important;
      padding: 0!important;
      position: relative!important;}
      DIV#xg_navigation A:hover {
      background: #646464 url(images/grad_dark.png) repeat-x left bottom!important;
      background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a))!important;
      background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
      background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
      background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
      background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%)!important;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0)!important;
      box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
      -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
      -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
      filter: none!important;
      transition:all 1s ease-out;
      -webkit-transition:all 1s ease-out;
      -moz-transition:all 1s ease-out;}
      DIV#xg_navigation li a {
      box-shadow: inset 0 0 0 1px #8a8a8a!important;
      -moz-box-shadow: inset 0 0 0 1px #8a8a8a!important;
      -webkit-box-shadow: inset 0 0 0 1px #8a8a8a!important;
      background: #4a4a4a url(images/grad_dark.png) repeat-x left top!important;
      background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878))!important;
      background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
      background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
      background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
      background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0)!important;
      border-bottom: 1px solid #5d5d5d!important;
      border-top: 1px solid #5d5d5d!important;
      border-right: 1px solid #5d5d5d!important;
      line-height: 34px!important;
      filter: none!important;
      transition:all 1s ease-out;
      -webkit-transition:all 1s ease-out;
      -moz-transition:all 1s ease-out;}
      DIV#xg_navigation a {
      border-radius: 5px 0 0 5px!important;
      -moz-border-radius: 5px 0 0 5px!important;
      -webkit-border-radius: 5px 0 0 5px!important;
      border-left: 0px solid #5d5d5d!important;
      color: #ffffff!important;
      display: inline-block!important;
      font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif!important;
      font-size: 12px!important;
      text-align: center!important;
      text-decoration: none!important;
      text-shadow: 0 -1px 0 #333333!important;}

      • Never mind, I totally have figured it out. :) It was only the rotation I wanted. None of the styles. :) Great tip!

        • Hi Damien, just visited your site , the animation looks good :-)

          • Thank you very much!

            I'm not sure if this will stay like this though, I've started another thread requesting the ability to have nav tabs hidden under a small button, and when mouse over that button, the nav tabs/subtabs animate out to their positions. When mouse out, they animate back into the button. Hoping to get some replies on that one. :)

This reply was deleted.

Search the Creators Network

Latest Activity

George H. Compton IV replied to George H. Compton IV's discussion TIP Ning 3.0 & 2.0 timed Full screen overlay .. Update logged in divide delay fix.
"Update logged in divide delay fix.  If you're already using this tip just add the update…"
58 minutes ago
Skye replied to Ning's discussion Update to Product Roadmap and Communication Changes
"+1"
1 hour ago
John Bizley replied to John Bizley's discussion How to get your Network Logo AND Your Network Name Both Showing Up ( Updated )
"Now updated this for both types of menu. The top code is for those with the menu at the top and the…"
1 hour ago
John Bizley replied to Lea Scott's discussion How do I stop the modules from expanding so much on some things. Is there a way?
"Your latest activity feed can be shortened like this, the line gets added into your css theme…"
1 hour ago
Zachary Moonshine replied to Mary Jane Peterson's discussion CometChat
"i plan on doing that but the chat i have now (addonchat) is paid for till september at that time i…"
1 hour ago
Simon Farnworth replied to Kos's discussion Forum tabs have DISAPPEARED!
"That the same message, verbatim, I got when I asked!"
2 hours ago
Simon Farnworth replied to Kos's discussion Forum tabs have DISAPPEARED!
"This is very worrying. Either they are swamped with tickets due to all the ongoing issues or Ning…"
2 hours ago
Nor Cal Social Media replied to Jeroen Beelen's discussion Email notifications (how do member stay up to date - even without being logged-in?)
"FALSE! All Ning Networks are online and speedy. Things are humming along nicely. This is not true…"
2 hours ago
Kos replied to Kos's discussion Forum tabs have DISAPPEARED!
"No response from Ning whatsoever.  I recreated the discussion tabs and linked them.  They…"
3 hours ago
Writer Chick {Diane} replied to Lea Scott's discussion How do I stop the modules from expanding so much on some things. Is there a way?
"There is a code for scrolling your Latest Activity module in THIS DISCUSSION."
3 hours ago
Strumelia replied to Kos's discussion Forum tabs have DISAPPEARED!
"Kos have you heard anything from your ticket yet?  Are your Forums all still gone?"
3 hours ago
Strumelia replied to Kos's discussion Forum tabs have DISAPPEARED!
"Kos-  gross!   lolol...."
3 hours ago
Strumelia replied to Kos's discussion Forum tabs have DISAPPEARED!
""If there are any changes made to this release timeframe, we will make an announcement."…"
3 hours ago
CocteauBoy replied to Ning's discussion Update to Product Roadmap and Communication Changes
"There are several other options that do far more than Ning, far more affordable, and treat their…"
3 hours ago
Jords replied to Kos's discussion Forum tabs have DISAPPEARED!
"Should be out end of July:"
3 hours ago
Simon Farnworth replied to Kos's discussion Forum tabs have DISAPPEARED!
":-)"
3 hours ago
Kos replied to Kos's discussion Forum tabs have DISAPPEARED!
"Everyone's holding their breathe"
3 hours ago
Simon Farnworth replied to Kos's discussion Forum tabs have DISAPPEARED!
"I'm with you there! Surely these days an activity feed is something that everything should run…"
4 hours ago
Strumelia replied to Kos's discussion Forum tabs have DISAPPEARED!
"Yes...but four months to re-vamp the activity feed they didn't get right to begin with?  …"
4 hours ago
Simon Farnworth replied to Kos's discussion Forum tabs have DISAPPEARED!
"Nope nothing there and still no response. The ticket was for the lost URLs and profile info. I also…"
5 hours ago