API tools faq
paste
Advertisement
poisonthangs_x

Tabbed Navi

poisonthangs_x
Dec 20th, 2018
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.11 KB | None | 0 0
raw download clone embed print report
  1. PASTE THIS INTO YOUR ABOUT ME STYLESHEET CODING
  2. [ if you have questions let me know i don't mind helping you out ]
  3.  
  4. <style>
  5. .page-wrap {
  6. width: 280px;
  7. position: fixed;
  8. top: 30px;
  9. right: 290px;
  10. margin: 0 auto;
  11. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  12. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  13. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  14. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  15. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  16. }
  17.  
  18.  
  19. p {
  20. font-size: 1rem;
  21. line-height: 1.5rem;
  22. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  23. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  24. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  25. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  26. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  27. }
  28.  
  29. input[type="radio"] {
  30. position: absolute;
  31. top: -9999px;
  32. left: -9999px;
  33. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  34. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  35. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  36. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  37. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  38. }
  39.  
  40. .tab-wrap {
  41. width: 100%;
  42. float: none;
  43. list-style: none;
  44. position: relative;
  45. margin: 0 auto;
  46. padding: 0;
  47. text-align: center;
  48. margin-left: 25px;
  49. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  50. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  51. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  52. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  53. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  54. }
  55.  
  56. .tab-wrap li {
  57. float: left;
  58. display: block;
  59. width: 100px;
  60. font-size: 9px;
  61. letter-spacing: -1px;
  62. margin-top: 16px;
  63. margin-left: -7px;
  64. text-align: center;
  65. line-height: 30px;
  66. font-weight: lighter;
  67. border-top: 7px solid #4B694C;
  68. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  69. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  70. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  71. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  72. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  73. }
  74.  
  75. .tab-wrap label {
  76. position: relative;
  77. display: inline-block;
  78. text-decoration: none;
  79. padding: 8px;
  80. color:#FFFF80;
  81. font-size: 8px;
  82. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  83. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  84. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  85. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  86. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  87. }
  88.  
  89. .label-1 {
  90. z-index: 100;
  91. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  92. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  93. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  94. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  95. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  96. }
  97.  
  98. .label-2 {
  99. z-index: 90;
  100. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  101. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  102. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  103. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  104. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  105. }
  106.  
  107. .label-3 {
  108. z-index: 80;
  109. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  110. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  111. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  112. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  113. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  114. }
  115.  
  116. .tab-wrap label:before {
  117. content: '';
  118. position: absolute;
  119. text-align: center;
  120. top: 0px;
  121. right: 0px;
  122. bottom: 5px;
  123. left: 0px;
  124. z-index: -1;
  125. border-bottom: none;
  126. color:#ffffff!important;
  127. background-color:#367D1A;
  128. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  129. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  130. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  131. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  132. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  133. }
  134.  
  135. .tab-wrap .tab-content {
  136. z-index: 200;
  137. display: none;
  138. width: 100%;
  139. height: 668px;
  140. position: absolute;
  141. top: 65px;
  142. left: -4px;
  143. border: 7px solid #4B694C;
  144. padding: 20px;
  145. color:#000000;
  146. background: #F7DF23;
  147. border-top: 0;
  148. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  149. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  150. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  151. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  152. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  153. }
  154.  
  155.  
  156. .tab-wrap [id^="tab"]:checked + label {
  157. z-index: 200;
  158. margin-bottom: -1px;
  159. border-top-width: 1px;
  160. color:#F0E91D;
  161. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  162. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  163. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  164. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  165. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  166. }
  167.  
  168. .tab-wrap [id^="tab"]:checked + label:before {
  169. background: #33472C;
  170. color:#000000;
  171. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  172. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  173. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  174. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  175. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  176. }
  177.  
  178. .tab-wrap [id^="tab"]:checked ~ .tab-content{
  179. display: block;
  180. webkit-transition: all 500ms cubic-bezier(0.600, 0, 0.735, 0.045); /* older webkit */
  181. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  182. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  183. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  184. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  185. }
  186.  
  187.  
  188. </style>
  189.  
  190.  
  191.  
  192.  
  193. PASTE THIS INTO YOUR LIKE TO MEET SECTION OR WHENEVER IN YOUR DIV STUFF
  194.  
  195.  
  196. <div class="page-wrap">
  197.  
  198. <ul class="tab-wrap">
  199. <li>
  200. <input type="radio" id="tab-1" name="tab" checked />
  201. <label for="tab-1" class="label-1">
  202. Our Affiliates
  203. </label>
  204. <article class="tab-content">
  205.  
  206. <h1>Highly Recommended</h1>
  207.  
  208. <p style="overflow: auto; display: block; height: 180px; width: 280px; color:#1D4009; font-weight: lighter; text-align: justify; overflow-x: hidden; letter-spacing: -1px; margin-top: -2px;">
  209.  
  210. <a href="">Affiliate Name</a>
  211. <a href="">Affiliate Name</a>
  212. <a href="">Affiliate Name</a>
  213. <a href="">Affiliate Name</a>
  214. <a href="">Affiliate Name</a>
  215. <a href="">Affiliate Name</a>
  216. <a href="">Affiliate Name</a>
  217. <a href="">Affiliate Name</a>
  218. <a href="">Affiliate Name</a>
  219. <a href="">Affiliate Name</a>
  220. <a href="">Affiliate Name</a>
  221. <a href="">Affiliate Name</a>
  222. <a href="">Affiliate Name</a>
  223. <a href="">Affiliate Name</a>
  224. <a href="">Affiliate Name</a>
  225. <a href="">Affiliate Name</a>
  226.  
  227. </p>
  228.  
  229. <h1>Resources&Premades</h1>
  230.  
  231. <p style="overflow: auto; display: block; height: 180px; width: 280px; color:#1D4009; font-weight: lighter; text-align: justify; overflow-x: hidden; letter-spacing: -1px; margin-top: -2px;">
  232.  
  233. <a href="">Affiliate Name</a>
  234. <a href="">Affiliate Name</a>
  235. <a href="">Affiliate Name</a>
  236. <a href="">Affiliate Name</a>
  237. <a href="">Affiliate Name</a>
  238. <a href="">Affiliate Name</a>
  239. <a href="">Affiliate Name</a>
  240. <a href="">Affiliate Name</a>
  241. <a href="">Affiliate Name</a>
  242. <a href="">Affiliate Name</a>
  243. <a href="">Affiliate Name</a>
  244. <a href="">Affiliate Name</a>
  245. <a href="">Affiliate Name</a>
  246. <a href="">Affiliate Name</a>
  247. <a href="">Affiliate Name</a>
  248. <a href="">Affiliate Name</a>
  249.  
  250. </p>
  251.  
  252.  
  253. <h1>Roleplay Groups</h1>
  254.  
  255. <p style="overflow: auto; display: block; height: 180px; width: 280px; color:#1D4009; font-weight: lighter; text-align: justify; overflow-x: hidden; letter-spacing: -1px; margin-top: -2px;">
  256.  
  257. <a href="">Affiliate Name</a>
  258. <a href="">Affiliate Name</a>
  259. <a href="">Affiliate Name</a>
  260. <a href="">Affiliate Name</a>
  261. <a href="">Affiliate Name</a>
  262. <a href="">Affiliate Name</a>
  263. <a href="">Affiliate Name</a>
  264. <a href="">Affiliate Name</a>
  265. <a href="">Affiliate Name</a>
  266. <a href="">Affiliate Name</a>
  267. <a href="">Affiliate Name</a>
  268. <a href="">Affiliate Name</a>
  269. <a href="">Affiliate Name</a>
  270. <a href="">Affiliate Name</a>
  271. <a href="">Affiliate Name</a>
  272. <a href="">Affiliate Name</a>
  273.  
  274. </p>
  275.  
  276.  
  277. </article>
  278. </li>
  279. <li>
  280. <input type="radio" id="tab-2" name="tab" />
  281. <label for="tab-2" class="label-2">
  282. Girl Members
  283. </label>
  284. <article class="tab-content">
  285.  
  286. <p style="overflow: auto; display: block; height: 670px; width: 280px; color:#1D4009; font-weight: lighter; text-align: justify; overflow-x: hidden; letter-spacing: -1px; margin-top: -2px;">
  287. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  288.  
  289. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  290.  
  291. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  292.  
  293. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  294.  
  295. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  296.  
  297. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  298.  
  299. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  300.  
  301. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  302.  
  303. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  304.  
  305. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  306.  
  307. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  308.  
  309. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  310. </p>
  311.  
  312. </article>
  313. </li>
  314. <li>
  315. <input type="radio" id="tab-3" name="tab" />
  316. <label for="tab-3" class="label-3">
  317. Boy Members
  318. </label>
  319. <article class="tab-content">
  320. <p style="overflow: auto; display: block; height: 670px; width: 280px; color:#1D4009; font-weight: lighter; text-align: justify; overflow-x: hidden; letter-spacing: -1px; margin-top: -2px;">
  321.  
  322. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  323.  
  324. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  325.  
  326. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  327.  
  328. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  329.  
  330. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  331.  
  332. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  333.  
  334. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  335.  
  336. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  337.  
  338. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  339.  
  340. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  341.  
  342. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  343.  
  344. <button><a href="http://www.roleplayer.me/madlove_resources"><img src="http://www.placehold.it/90x120" style="border: 7px solid #4B694C; "></a></button>
  345.  
  346. </p>
  347.  
  348. </article>
  349. </li>
  350. </ul>
  351. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!