API tools faq
paste
Advertisement
MystiqueAquanian

RP: Nav Page

MystiqueAquanian
Jul 13th, 2017
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. TAGS II
  7. by alydae
  8.  
  9. - do not steal any part of this code
  10. - do not even TOUCH the credit
  11. - direct questions to enchantedthemes.tumblr.com
  12. - tabs tutorial by @phoenixthemes
  13.  
  14. thank you for using!!!
  15.  
  16. -->
  17.  
  18. <title>navigation</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <!-- scripts - DO NOT TOUCH -->
  22.  
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  24.  
  25. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:200,
  32. tip_fade_speed:300
  33. }
  34. );
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39. <!-- custom font -->
  40.  
  41. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  42.  
  43. <style type="text/css">
  44.  
  45.  
  46. @keyframes fadein {
  47. from { opacity:0; }
  48. to { opacity:1; }
  49. }
  50.  
  51. @-moz-keyframes fadein {
  52. from { opacity:0; }
  53. to { opacity:1; }
  54. }
  55.  
  56. @-webkit-keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-ms-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-o-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. /*-- selection --*/
  72.  
  73. ::-moz-selection { background:#eee; color:#444; }
  74. ::selection { background:#eee; color:#444; }
  75.  
  76. /*-- scrollbar --*/
  77.  
  78. ::-webkit-scrollbar {
  79. width:1px;
  80. height:2px;
  81. }
  82.  
  83. ::-webkit-scrollbar-thumb { background-color:#aaa; } /* scrollbar colour */
  84.  
  85. /*-- tooltips --*/
  86.  
  87. #s-m-t-tooltip {
  88. color:#444;
  89. background-color:#fff;
  90. font-size:8px;
  91. font-family:'Open Sans', helvetica, sans-serif;
  92. letter-spacing:1px;
  93. text-transform:uppercase;
  94. text-align:center;
  95. position:absolute;
  96. padding:0px 5px 0px 5px;
  97. border:1px solid #eee;
  98. margin-top:30px;
  99. z-index:9999;
  100. }
  101.  
  102. /*-- tumblr controls --*/
  103.  
  104. .tmblr-iframe--desktop-logged-in-controls, #tumblr_controls {
  105. display:none!important;
  106. }
  107.  
  108.  
  109. /*-- general customisation --*/
  110.  
  111. body {
  112. color:#666; /* text colour */
  113. background-color:#fafafa; /* background colour */
  114. font-style:normal;
  115. font-family:'Open Sans', helvetica, sans-serif;
  116. font-size:10px;
  117. font-weight:400;
  118. text-decoration:none;
  119. line-height:180%;
  120. -moz-osx-font-smoothing: grayscale;
  121. -webkit-font-smoothing: antialiased;
  122. font-smoothing: antialiased;
  123. -webkit-animation: fadein 1.5s;
  124. -moz-animation: fadein 1.5s;
  125. -o-animation: fadein 1.5s;
  126. animation: fadein 1.5s;
  127. }
  128.  
  129. a {
  130. text-decoration:none;
  131. color:#444; /* links colour */
  132. transition-duration: 0.6s;
  133. -moz-transition-duration: 0.6s;
  134. -webkit-transition-duration: 0.6s;
  135. -o-transition-duration: 0.6s
  136. }
  137.  
  138. a:hover {
  139. color:#bad1e7; /* links hover colour */
  140. cursor:pointer;
  141. transition-duration: 0.6s;
  142. -moz-transition-duration: 0.6s;
  143. -webkit-transition-duration: 0.6s;
  144. -o-transition-duration: 0.6s
  145. }
  146.  
  147. b, strong {
  148. font-weight:700;
  149. color:#444;
  150. }
  151.  
  152. i, em { font-style:italic; }
  153.  
  154. /*-- header --*/
  155.  
  156. #header {
  157. position:absolute;
  158. width:350px;
  159. top:100px;
  160. padding:15px;
  161. left:50%;
  162. transform:translateX(-50%);
  163. text-align:left;
  164. }
  165.  
  166. .icon {
  167. position:fixed;
  168. margin-top:40px;
  169. height:60px;
  170. width:60px;
  171. }
  172.  
  173. .icon img {
  174. height:60px;
  175. width:60px;
  176. border-radius:50%;
  177. }
  178.  
  179. .title {
  180. position:relative;
  181. margin-left:90px;
  182. text-transform:uppercase;
  183. font-size:14px;
  184. font-weight:700;
  185. letter-spacing:1px;
  186. color:#222; /* title colour */
  187. }
  188.  
  189. .desc {
  190. width:225px;
  191. max-height:55px;
  192. margin:15px 90px 15px;
  193. padding:10px;
  194. background-color:#fff; /* description background colour */
  195. border:1px solid #eee;
  196. overflow-y:scroll!important;
  197. }
  198.  
  199. .links {
  200. width:250px;
  201. margin:10px 90px;
  202. }
  203.  
  204. .links a {
  205. display:inline;
  206. margin-right:10px;
  207. letter-spacing:.5px;
  208. text-transform:uppercase;
  209. }
  210.  
  211. /*-- tags --*/
  212.  
  213. .content {
  214. position:absolute;
  215. width:801px;
  216. margin-top:330px;
  217. left:50%;
  218. transform:translateX(-50%);
  219. }
  220.  
  221. .tab label {
  222. width:140px;
  223. padding:20px;
  224. padding-right:40px;
  225. background-color:#fff; /* tab label background colour */
  226. border-left:1px solid #eee;
  227. border-bottom:1px solid #eee;
  228. font-size:11px;
  229. font-weight:600;
  230. letter-spacing:0.5px;
  231. line-height:825%;
  232. text-align:right;
  233. text-transform:uppercase;
  234. display:block;
  235. cursor:pointer;
  236. color:#222; /* tab text colour */
  237. transition-duration: 0.6s;
  238. -moz-transition-duration: 0.6s;
  239. -webkit-transition-duration: 0.6s;
  240. -o-transition-duration: 0.6s
  241. }
  242.  
  243. .tab label:first-of-type { border-top:1px solid #eee; }
  244.  
  245. .tab label:hover {
  246. color:#bad1e7; /* links hover colour */
  247. cursor:pointer;
  248. transition-duration: 0.6s;
  249. -moz-transition-duration: 0.6s;
  250. -webkit-transition-duration: 0.6s;
  251. -o-transition-duration: 0.6s
  252. }
  253.  
  254. .tags {
  255. position:absolute;
  256. width:535px;
  257. height:250px;
  258. /* if you want the height of the tabs to match the height of the main tag body, replace height:300px; with the line below
  259. height:calc((52px * 5) - 27px);
  260. change the 5 according to how many tabs you have */
  261. top:0px;
  262. margin:0px 201px 150px;
  263. padding:15px;
  264. padding-left:50px;
  265. overflow-y:scroll;
  266. border:1px solid #eee;
  267. background-color:#fff; /* tags section background colour */
  268. }
  269.  
  270. .tags a::before {
  271. content:'>';
  272. padding-right:7px;
  273. }
  274.  
  275. .tags a {
  276. width:calc(495px / 1); /* change the 3 to 2 for the tags to be in two columns */
  277. display:inline-block;
  278. padding:5px;
  279. }
  280.  
  281. .tags h8 {
  282. color:#444; /* subtitle colour */
  283. font-size:10.5px;
  284. font-weight:600;
  285. letter-spacing:0.5px;
  286. text-transform:uppercase;
  287. display:block;
  288. margin-top:20px;
  289. margin-bottom:5px;
  290. }
  291.  
  292. [type=radio]:checked ~ label {
  293. z-index:2;
  294. color:#bad1e7; /* text colour of selected tab */
  295. background-color:#fafafa; /* background colour of selected tab */
  296. }
  297.  
  298. [type=radio]:checked ~ label ~ .tags { z-index:1; }
  299.  
  300. .tab [type=radio] { display:none; }
  301.  
  302.  
  303. /*-- credit - DO NOT TOUCH --*/
  304.  
  305. .credit a {
  306. font-size:10px;
  307. bottom:15px;
  308. right:20px;
  309. position:fixed;
  310. text-transform:uppercase;
  311. }
  312.  
  313.  
  314. </style>
  315. </head>
  316.  
  317.  
  318. <body>
  319.  
  320.  
  321. <div id="header">
  322. <!-- the default is your icon. if you want to change it, remove {PortraitURL-64} and replace it with the image url of the one you want -->
  323. <div class="icon"><img src="{PortraitURL-64}"/></div>
  324. <div class="title">navigation</div> <!-- title -->
  325. <div class="desc"> <!-- you cannot delete or leave this section blank! it will mess up the entire layout. -->
  326. Tags page. I hope you can find what you are looking for :)
  327. </div>
  328. <div class="links">
  329. <!-- this is where your header links are. feel free to add more. -->
  330. <a href="/">home</a>
  331. <a href="/">inbox</a>
  332. <!-- do not remove this one!!! -->
  333. <a href="http://alydae.tumblr.com">credit</a>
  334. </div>
  335. </div>
  336.  
  337.  
  338. <div class="content">
  339.  
  340. <!--
  341. INSTRUCTIONS ON HOW TO ADD MORE TABS
  342. 1. copy the template below
  343.  
  344. <div class="tab">
  345. <input type="radio" id="tab-1" name="tab-group-1">
  346. <label for="tab-1">tab title</label>
  347. <div class="tags">
  348. <a href="/tagged/">tag name</a>
  349. <h8>optional subtitle</h8>
  350. <a href="/tagged/">tag name</a>
  351. </div>
  352. </div>
  353.  
  354. 2. once you have done that, you need to change the number after the tab in id="tab-1" and label for="tab-1" - so if you were copying your third tab, it would be id="tab-3" and label for="tab-3".
  355. DO NOT TOUCH THE name="tab-group-1"
  356. -->
  357.  
  358. <div class="tab">
  359. <input type="radio" id="tab-1" name="tab-group-1" checked>
  360. <label for="tab-1">General Tags</label>
  361. <div class="tags">
  362.  
  363. <h8>PAGES</h8>
  364. <a href="/about">Bio</a>
  365. <a href="/connections">Connections</a>
  366.  
  367. <h8>Tags</h8>
  368. <a href="/tagged/i can't help it if you look like an angel">i can't help it if you look like an angel <i>(visage, images)</i></a>
  369.  
  370. <a href="/tagged/look in the mirror who's inside there">look in the mirror who's inside there <i>(xx images)</i></a>
  371.  
  372. <a href="/tagged/took the words right out of my mouth">took the words right out of my mouth <i>(musings)</i></a>
  373.  
  374. <a href="/tagged/dancing with your red dress on">dancing with your red dress on <i>(wardrobe, attire)</i></a>
  375. <a href="/tagged/made of starlight">made of starlight <i>(her aesthetic)</i></a>
  376.  
  377. <a href="/tagged/a new soundtrack I could dance to">a new soundtrack I could dance to <i>(music, playlists)</i></a>
  378.  
  379. </div>
  380. </div>
  381.  
  382.  
  383.  
  384.  
  385. <div class="tab">
  386. <input type="radio" id="tab-2" name="tab-group-1">
  387. <label for="tab-2">Interactions</label>
  388. <div class="tags">
  389. <h8>Types</h8>
  390. <a href="/tagged/talk turns into air">talk turns into air <i>(conversations)</i></a>
  391.  
  392. <a href="/tagged/you're dancing with her while i'm staring at my phone">you're dancing with her while i'm staring at my phone <i>(texts + tweets)</i></a>
  393.  
  394. <a href="/tagged/ooh snap">ooh snap <i>(snapchats)</i></a>
  395. </div>
  396. </div>
  397.  
  398. </div>
  399.  
  400.  
  401. <!-- credit - DO NOT TOUCH -->
  402.  
  403. <div class="credit">
  404. <a href="http://alydae.tumblr.com" title="enchantedthemes">A.</a>
  405. </div>
  406.  
  407.  
  408. </body>
  409. </html>
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!