API tools faq
paste
Advertisement
franzzfu

Navigation 01

franzzfu
May 29th, 2014
9,289
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4. <title>NAVIGATION</title> <!-- This is the text on your browser tab-->
  5. <link rel="shortcut icon" href="{Favicon}">
  6.  
  7. <!----
  8.  
  9. navigation 01 by franz @ lestranqe.tumblr.com/
  10. DO NOT REMOVE THE CREDIT OR YOU WILL BE THE VALJEAN TO MY JAVERT
  11. instructions included :)
  12.  
  13. --->
  14.  
  15. <style type="text/css">
  16.  
  17. /*Scrollbar*/
  18.  
  19. ::-webkit-scrollbar {
  20. width:5px;
  21. height:auto;
  22. background:#fff;} /*Change scrollbar background colour here*/
  23. ::-webkit-scrollbar-corner {background:#fff;} /*Change scrollbar background colour here*/
  24. ::-webkit-scrollbar-thumb:vertical {background:#f2f2f2;} /*Change scrollbar colour here*/
  25. ::-webkit-scrollbar-thumb:horizontal {background:#f2f2f2;} /*Change scrollbar colour here*/
  26.  
  27. /*Main Structure*/
  28.  
  29. body {
  30. background:#fff; /*Change background colour here*/
  31. color:#000; /*Change font colour here*/
  32. font-family:times; /*Change font here*/
  33. font-size:11px; /*Change font size here*/
  34. line-height:180%;
  35. }
  36.  
  37. a {
  38. text-decoration:none;
  39. outline:none;
  40. -moz-outline-style:none;
  41. color:#6a6a6a;
  42. -webkit-transition:all .5s ease-in-out;
  43. -moz-transition:all .5s ease-in-out;
  44. transition:all .5s ease-in-out;
  45. }
  46.  
  47. a:hover {
  48. color:#e6e6e6;
  49. -webkit-transition:all .5s ease-in-out;
  50. -moz-transition:all .5s ease-in-out;
  51. transition:all .5s ease-in-out;
  52. }
  53.  
  54. /*Header*/
  55.  
  56. #header {
  57. margin-left:auto;
  58. margin-right:auto;
  59. margin-top:100px;
  60. background:transparent;
  61. width:700px;
  62. }
  63.  
  64. #title {
  65. text-align:center;
  66. font-family:times;
  67. font-size:25px;
  68. font-weight:bold;
  69. text-transform:uppercase;
  70. letter-spacing:8px;
  71. }
  72.  
  73. #description {
  74. margin:15px;
  75. text-align:center;
  76. font-size:8px;
  77. text-transform:uppercase;
  78. letter-spacing:3px;
  79. }
  80.  
  81. /*Content*/
  82.  
  83. #container {
  84. width:700px;
  85. height:310px;
  86. margin-left:auto;
  87. margin-right:auto;
  88. border:1px solid #e6e6e6;
  89. }
  90.  
  91. #left {
  92. height:310px;
  93. width:185px;
  94. position:absolute;
  95. }
  96.  
  97. .category label {
  98. color:#2a2a2a; /*Change font colour of categories here*/
  99. background-color:#fff; /*Change background colour of categories here*/
  100. width:162px;
  101. margin:6px;
  102. padding:5px;
  103. font-size:8px;
  104. text-transform:uppercase;
  105. text-align:center;
  106. letter-spacing:1px;
  107. line-height:150%;
  108. display:block;
  109. -webkit-transition:all .3s ease-in-out;
  110. -moz-transition:all .3s ease-in-out;
  111. transition:all .3s ease-in-out;
  112. }
  113.  
  114. .category label:hover {
  115. color:#fff; /*Change font colour of hovered category here*/
  116. background-color:#2a2a2a; /*Change background colour of hovered category here*/
  117. letter-spacing:2px;
  118. -webkit-transition:all .3s ease-in-out;
  119. -moz-transition:all .3s ease-in-out;
  120. transition:all .3s ease-in-out;
  121. }
  122.  
  123. .category [type=radio] {
  124. display:none;
  125. }
  126.  
  127. [type=radio]:checked ~ label {
  128. color:#fff; /*Change font colour of chosen category here*/
  129. background-color:#2a2a2a; /*Change background colour of chosen category here*/
  130. letter-spacing:2px;
  131. text-decoration:none!important;
  132. }
  133.  
  134. [type=radio]:checked ~ label ~ .links {
  135. z-index:1;
  136. }
  137.  
  138. .links {
  139. background-color:#fff;
  140. width:495px;
  141. height:290px;
  142. margin-left:185px;
  143. margin-top:-34px;
  144. top:33px;
  145. position:absolute;
  146. padding:10px;
  147. overflow:auto;
  148. text-align:center;
  149. border:1px solid #e6e6e6;
  150. }
  151.  
  152. .links a {
  153. color:#2a2a2a; /*Change font colour of tags here*/
  154. background-color:#fff; /*Change background colour of tags here*/
  155. width:138px;
  156. margin:5px;
  157. padding:5px;
  158. display:inline-block;
  159. font-size:9px;
  160. font-family:baskerville;
  161. font-style:italic;
  162. text-align:center;
  163. text-decoration:none;
  164. letter-spacing:2px;
  165. line-height:150%;
  166. border:1px solid #e6e6e6; /*Change border colour of tags here*/
  167. -webkit-transition:all .3s ease-in-out;
  168. -moz-transition:all .3s ease-in-out;
  169. transition:all .3s ease-in-out;
  170. }
  171.  
  172. .links a:hover {
  173. color:#fff; /*Change font colour of hovered tag here*/
  174. background-color:#2a2a2a; /*Change background colour of hovered tag here*/
  175. -webkit-transition:all .3s ease-in-out;
  176. -moz-transition:all .3s ease-in-out;
  177. transition:all .3s ease-in-out;
  178. }
  179.  
  180.  
  181. /*Bottom Navigation*/
  182.  
  183. #navigation {
  184. text-align:center;
  185. margin:15px 0;
  186. }
  187.  
  188. #navigation a {
  189. color:#000;
  190. padding:20px;
  191. font-size:8px;
  192. text-transform:uppercase;
  193. letter-spacing:3px;
  194. }
  195.  
  196. #navigation a:hover {
  197. color:#e6e6e6;
  198. }
  199.  
  200. /*Credit - DON'T TOUCH THIS PART*/
  201.  
  202. #credit {
  203. position:fixed;
  204. float:right;
  205. bottom:5px;
  206. right:5px;
  207. background:transparent;
  208. font-size:20px;
  209. text-align:right;
  210. }
  211.  
  212. #credit a {
  213. color:#000;
  214. }
  215.  
  216. #logo {
  217. font-size:10px;
  218. font-family:baskerville;
  219. font-style:italic;
  220. opacity:0;
  221. -webkit-transition:all .5s ease-in-out;
  222. -moz-transition:all .5s ease-in-out;
  223. transition:all .5s ease-in-out;
  224. }
  225.  
  226. #credit:hover #logo {
  227. opacity:1;
  228. -webkit-transition:all .5s ease-in-out;
  229. -moz-transition:all .5s ease-in-out;
  230. transition:all .5s ease-in-out;
  231. }
  232.  
  233.  
  234.  
  235. </style>
  236. </head>
  237.  
  238. <body>
  239. <div id="header">
  240. <div id="title">Navigation</div> <!-- Page Title -->
  241. <div id="description">Find your way around this blog</div> <!-- Description -->
  242. </div>
  243.  
  244. <div id="container">
  245. <div id="left">
  246.  
  247. <!------------ Category 1 ------------>
  248.  
  249. <div class="category">
  250. <input type="radio" id="tab-1" name="tab-group-1" checked>
  251. <label for="tab-1">Category 1</label> <!-- Name of Category 1 -->
  252.  
  253. <div class="links">
  254. <a href="/tagged/tag1" target="_blank">Tag 1</a>
  255. <a href="/tagged/tag2" target="_blank">Tag 2</a>
  256. <a href="/tagged/tag3" target="_blank">Tag 3</a>
  257. <a href="/tagged/tag4" target="_blank">Tag 4</a>
  258. <a href="/tagged/tag5" target="_blank">Tag 5</a>
  259. <a href="/tagged/tag6" target="_blank">Tag 6</a>
  260. <a href="/tagged/tag7" target="_blank">Tag 7</a>
  261. <a href="/tagged/tag8" target="_blank">Tag 8</a>
  262. <a href="/tagged/tag9" target="_blank">Tag 9</a>
  263. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  264. <!-- Duplicate or delete at your convenience -->
  265. </div>
  266.  
  267. </div>
  268.  
  269. <!------------ Category 2 ------------>
  270.  
  271. <div class="category">
  272. <input type="radio" id="tab-2" name="tab-group-1">
  273. <label for="tab-2">Category 2</label> <!-- Name of Category 2 -->
  274.  
  275. <div class="links">
  276. <a href="/tagged/tag1" target="_blank">Tag 1</a>
  277. <a href="/tagged/tag2" target="_blank">Tag 2</a>
  278. <a href="/tagged/tag3" target="_blank">Tag 3</a>
  279. <a href="/tagged/tag4" target="_blank">Tag 4</a>
  280. <a href="/tagged/tag5" target="_blank">Tag 5</a>
  281. <a href="/tagged/tag6" target="_blank">Tag 6</a>
  282. <a href="/tagged/tag7" target="_blank">Tag 7</a>
  283. <a href="/tagged/tag8" target="_blank">Tag 8</a>
  284. <a href="/tagged/tag9" target="_blank">Tag 9</a>
  285. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  286. <!-- Duplicate or delete at your convenience -->
  287. </div>
  288.  
  289. </div>
  290.  
  291. <!------------ Category 3 ------------>
  292.  
  293. <div class="category">
  294. <input type="radio" id="tab-3" name="tab-group-1">
  295. <label for="tab-3">Category 3</label> <!-- Name of Category 3 -->
  296.  
  297. <div class="links">
  298. <a href="/tagged/tag1" target="_blank">Tag 1</a>
  299. <a href="/tagged/tag2" target="_blank">Tag 2</a>
  300. <a href="/tagged/tag3" target="_blank">Tag 3</a>
  301. <a href="/tagged/tag4" target="_blank">Tag 4</a>
  302. <a href="/tagged/tag5" target="_blank">Tag 5</a>
  303. <a href="/tagged/tag6" target="_blank">Tag 6</a>
  304. <a href="/tagged/tag7" target="_blank">Tag 7</a>
  305. <a href="/tagged/tag8" target="_blank">Tag 8</a>
  306. <a href="/tagged/tag9" target="_blank">Tag 9</a>
  307. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  308. <!-- Duplicate or delete at your convenience -->
  309. </div>
  310.  
  311. </div>
  312.  
  313. <!------------ Category 4 ------------>
  314.  
  315. <div class="category">
  316. <input type="radio" id="tab-4" name="tab-group-1">
  317. <label for="tab-4">Category 4</label> <!-- Name of Category 4 -->
  318.  
  319. <div class="links">
  320. <a href="/tagged/tag1" target="_blank">Tag 1</a>
  321. <a href="/tagged/tag2" target="_blank">Tag 2</a>
  322. <a href="/tagged/tag3" target="_blank">Tag 3</a>
  323. <a href="/tagged/tag4" target="_blank">Tag 4</a>
  324. <a href="/tagged/tag5" target="_blank">Tag 5</a>
  325. <a href="/tagged/tag6" target="_blank">Tag 6</a>
  326. <a href="/tagged/tag7" target="_blank">Tag 7</a>
  327. <a href="/tagged/tag8" target="_blank">Tag 8</a>
  328. <a href="/tagged/tag9" target="_blank">Tag 9</a>
  329. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  330. <!-- Duplicate or delete at your convenience -->
  331. </div>
  332.  
  333. </div>
  334.  
  335. <!------------ Category 5 ------------>
  336.  
  337. <div class="category">
  338. <input type="radio" id="tab-5" name="tab-group-1">
  339. <label for="tab-5">Category 5</label> <!-- Name of Category 5 -->
  340.  
  341. <div class="links">
  342. <a href="/tagged/tag1" target="_blank">Tag 1</a>
  343. <a href="/tagged/tag2" target="_blank">Tag 2</a>
  344. <a href="/tagged/tag3" target="_blank">Tag 3</a>
  345. <a href="/tagged/tag4" target="_blank">Tag 4</a>
  346. <a href="/tagged/tag5" target="_blank">Tag 5</a>
  347. <a href="/tagged/tag6" target="_blank">Tag 6</a>
  348. <a href="/tagged/tag7" target="_blank">Tag 7</a>
  349. <a href="/tagged/tag8" target="_blank">Tag 8</a>
  350. <a href="/tagged/tag9" target="_blank">Tag 9</a>
  351. <a href="/tagged/tag10" target="_blank">Tag 10</a>
  352. <!-- Duplicate or delete at your convenience -->
  353. </div>
  354.  
  355. </div>
  356.  
  357. <!-- Duplicate more categories if you need them. Remember to change the tab number, but always keep it as "tag-group-1". -->
  358.  
  359. </div>
  360. </div>
  361.  
  362. <div id="navigation"> <!-- The links at the bottom, duplicate to add more links-->
  363. <a href="/">Link 1</a>
  364. <a href="/">Link 2</a>
  365. <a href="/">Link 3</a>
  366. <a href="/">Link 4</a>
  367. </div>
  368.  
  369. <div id="credit"> <!-- DON'T TOUCH-->
  370. <div id="logo">franztheme</div>
  371. <a href="http://lestranqe.tumblr.com">☺</a>
  372. </div>
  373.  
  374. </body>
  375. </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!