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

Strumelia replied to Jeffrey Haskins's discussion Jamroom?
"Jeffrey, the fact that you keep comparing ning to JR and wondering if you'd really own your site su…"
34 minutes ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Actually you were right on the jamroom...forgot to erase that directory that is there on auto on th…"
36 minutes ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Also, if you go to the Jamroom front page.  There is a link down the page for Active and Helpful Su…"
1 hour ago
Strumelia replied to Jeffrey Haskins's discussion Jamroom?
"Oy.  I'm am not having these issues like you describe, and I did nothing special when setting up my…"
1 hour ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Hey John, one thing that I find that I do not like on the layout is how the response work.  Rather…"
1 hour ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Just telling me to go elsewhere, doesn't mean that they solved the problem.  Not so sure that the h…"
1 hour ago
Strumelia replied to Jeffrey Haskins's discussion Jamroom?
"So they have no customer service contact unless you pay them $29 a month.

Not true.  Jeffrey, I do…"
2 hours ago
Garfield Creator replied to Thisisbully's discussion This Is 50 Words To Ning
"One things for sure, somebody's pulling someone's chain."
3 hours ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"So they have no customer service contact unless you pay them $29 a month.  They want you to use the…"
3 hours ago
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Well, didn't get much help from them other then a suggestion that I sign up for their paid customer…"
4 hours ago
Thisisbully replied to Thisisbully's discussion This Is 50 Words To Ning
"lol"
4 hours ago
Strumelia replied to Thisisbully's discussion This Is 50 Words To Ning
"Gonna snatch Glam's chain?  Ok, good luck with that!  lol..."
4 hours ago
Alyce Keegan replied to Alyce Keegan's discussion Hiding members in a group on group information
"Hi JFarrow! Thanks so much... I tried this one but it doesn't work :( It's this number i want to ge…"
4 hours ago
Alyce Keegan replied to Alyce Keegan's discussion Hiding members in a group on group information
"Kos it is when people click on each individual group without being signed in it takes you to the gr…"
5 hours ago
Kos replied to Thisisbully's discussion This Is 50 Words To Ning
"I still cannot believe it took them 3 business days.  Thank goodness it wasn't platform wide.  smh…"
5 hours ago
Jords replied to Thisisbully's discussion This Is 50 Words To Ning
"Their message for being back online:"
6 hours ago
Kos replied to Alyce Keegan's discussion Hiding members in a group on group information
"Hi Alyce, for some reason I thought we had solved this one already.  Sorry.  Try this although idk…"
6 hours ago
Kos replied to Thisisbully's discussion This Is 50 Words To Ning
"Members are saying their sites are back up now.  Do a hard refresh or clear your cache and see if y…"
7 hours ago
JFarrow replied to Thisisbully's discussion This Is 50 Words To Ning
"wow"
7 hours ago
Kerrie replied to Kerrie's discussion Help I can’t access my network or blogs
"Working now here too :) thank you Ning :))"
7 hours ago
More…