API tools faq
paste
Advertisement
keciasthemes

navigation page 01: asschlinthemes

keciasthemes
Jul 20th, 2014
789
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.18 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  4.  
  5. <script src="jquery.js"></script>
  6. <script>
  7. $(document).ready(function(){
  8. $("#click").click(function(){
  9. $("#guts").slideToggle("fast");
  10. });
  11. });
  12. </script>
  13.  
  14. <script src="jquery.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17. $("#click2").click(function(){
  18. $("#guts2").slideToggle("fast");
  19. });
  20. });
  21. </script>
  22.  
  23. <script src="jquery.js"></script>
  24. <script>
  25. $(document).ready(function(){
  26. $("#click3").click(function(){
  27. $("#guts3").slideToggle("fast");
  28. });
  29. });
  30. </script>
  31.  
  32. <script src="jquery.js"></script>
  33. <script>
  34. $(document).ready(function(){
  35. $("#click4").click(function(){
  36. $("#guts4").slideToggle("fast");
  37. });
  38. });
  39. </script>
  40.  
  41. <script src="jquery.js"></script>
  42. <script>
  43. $(document).ready(function(){
  44. $("#click5").click(function(){
  45. $("#guts5").slideToggle("fast");
  46. });
  47. });
  48. </script>
  49.  
  50. </head>
  51.  
  52. <style type="text/css">
  53.  
  54. #content {
  55. width:600px;
  56. margin:auto;
  57. }
  58.  
  59. #title {
  60. margin-top:0px;
  61. margin-left:5px;
  62. margin-bottom:-12px;
  63. text-align:left;
  64. text-transform:uppercase;
  65. font-family:consolas;
  66. font-size:10px;
  67. line-height:12px;
  68. color:#000;
  69. letter-spacing:6px;
  70. z-index:9;
  71. }
  72.  
  73. #topbar{
  74. position:absolute;
  75. margin-top:-24px;
  76. margin-left:-8px;
  77. padding:3px;
  78. padding-right:5px;
  79. text-align:right;
  80. width:506px;
  81. height:9px;
  82. background:#f4f4f4;
  83. border:1px solid #ebebeb;
  84. }
  85.  
  86. #sections{
  87. position:fixed;
  88. width:500px;
  89. margin-top:35px;
  90. margin-left:20px;
  91. padding-top:7px;
  92. padding-left:7px;
  93. padding-right:7px;
  94. padding-bottom:4px;
  95. font-family:consolas;
  96. font-size:10px;
  97. line-height:12px;
  98. background-color:#ffffff;
  99. border:1px solid #ebebeb;
  100. color:#000000;
  101. z-index:999;
  102. box-shadow:rgba(0,0,0,0.07)7px 7px;
  103. }
  104.  
  105.  
  106. /* section one coding. */
  107.  
  108. #guts,#click{
  109. padding:3px;
  110. display:inline-block;
  111. }
  112.  
  113. #click{
  114. margin-bottom:4px;
  115. font-family:consolas;
  116. font-size:10px;
  117. text-transform:uppercase;
  118. letter-spacing:1px;
  119. text-align:center;
  120. background:#f4f4f4;
  121. border:1px solid #f4f4f4;
  122. padding:3px;
  123. display:block;
  124. -webkit-transition: all 0.1s ease;
  125. -moz-transition: all 0.1s ease;
  126. transition: all 0.6s ease;
  127. }
  128.  
  129. #click:hover{
  130. background:#ddff99; /*change for the hover */
  131. transition: all 0.6s ease
  132. }
  133.  
  134. #click:active{
  135. background:#ffffff;
  136. }
  137.  
  138. #guts{
  139. padding:1px;
  140. display:none;
  141. }
  142.  
  143.  
  144. #links{
  145. width:100%;
  146. margin-left:0px;
  147. margin-bottom:4px;
  148. }
  149.  
  150. #links a{
  151. float:center;
  152. color:#000;
  153. background:#f1f1f1;
  154. margin-top:2px;
  155. margin-left:10px;
  156. width:140px;
  157. text-transform:uppercase;
  158. padding:5px;
  159. display:inline-block;
  160. -webkit-transition: all 0.7s ease;
  161. -moz-transition: all 0.7s ease;
  162. transition: all 0.7s ease;}
  163.  
  164. #links a:hover{
  165. color:#fff;
  166. background:#ddff99; /*change for the hover */
  167. -webkit-transition: all 0.7s ease;
  168. -moz-transition: all 0.7s ease;
  169. transition: all 0.7s ease;}
  170.  
  171. /* section two coding. */
  172.  
  173. #guts2,#click2{
  174. padding:1px;
  175. display:inline-block;
  176. }
  177.  
  178. #click2{
  179. margin-bottom:4px;
  180. text-transform:uppercase;
  181. letter-spacing:1px;
  182. text-align:center;
  183. background:#f4f4f4;
  184. border:1px solid #f4f4f4;
  185. padding:3px;
  186. display:block;
  187. -webkit-transition: all 0.1s ease;
  188. -moz-transition: all 0.1s ease;
  189. transition: all 0.6s ease;
  190. }
  191.  
  192. #click2:hover{
  193. background:#ffdd99; /*change for the hover */
  194. transition: all 0.6s ease;
  195. }
  196.  
  197. #click2:active{background:#ffffff;}
  198.  
  199. #guts2{
  200. padding:1px;
  201. display:none;
  202. }
  203.  
  204. #links2{
  205. width:100%;
  206. margin-left:0px;
  207. margin-bottom:4px;
  208. }
  209.  
  210. #links2 a{
  211. float:center;
  212. color:#000;
  213. background:#f1f1f1;
  214. margin-top:2px;
  215. margin-left:10px;
  216. width:140px;
  217. text-transform:uppercase;
  218. padding:5px;
  219. display:inline-block;
  220. -webkit-transition: all 0.7s ease;
  221. -moz-transition: all 0.7s ease;
  222. transition: all 0.7s ease;}
  223.  
  224. #links2 a:hover{
  225. color:#fff;
  226. background:#ffdd99; /*change for the hover */
  227. -webkit-transition: all 0.7s ease;
  228. -moz-transition: all 0.7s ease;
  229. transition: all 0.7s ease;}
  230.  
  231. /* section three coding. */
  232.  
  233. #guts3,#click3{
  234. padding:1px;
  235. display:inline-block;
  236. }
  237.  
  238. #click3{
  239. margin-bottom:4px;
  240. text-transform:uppercase;
  241. letter-spacing:1px;
  242. text-align:center;
  243. background:#f4f4f4;
  244. border:1px solid #f4f4f4;
  245. padding:3px;
  246. display:block;
  247. -webkit-transition: all 0.1s ease;
  248. -moz-transition: all 0.1s ease;
  249. transition: all 0.6s ease;}
  250.  
  251. #click3:hover{background:#ff99dd; /*change for the hover */}
  252. #click3:active{background:#ffffff;}
  253.  
  254.  
  255. #guts3{
  256. padding:1px;
  257. display:none;
  258. }
  259.  
  260. #links3{
  261. width:100%;
  262. margin-left:0px;
  263. margin-bottom:4px;
  264. }
  265.  
  266. #links3 a{
  267. float:center;
  268. color:#000;
  269. background:#f1f1f1;
  270. margin-top:2px;
  271. margin-left:10px;
  272. width:140px;
  273. text-transform:uppercase;
  274. padding:5px;
  275. display:inline-block;
  276. -webkit-transition: all 0.7s ease;
  277. -moz-transition: all 0.7s ease;
  278. transition: all 0.7s ease;}
  279.  
  280. #links3 a:hover{
  281. color:#fff;
  282. background:#ff99dd; /*change for the hover */
  283. -webkit-transition: all 0.7s ease;
  284. -moz-transition: all 0.7s ease;
  285. transition: all 0.7s ease;}
  286.  
  287. /* section four coding. */
  288.  
  289.  
  290. #guts4,#click4{
  291. padding:1px;
  292. display:inline-block;
  293. }
  294.  
  295. #click4{
  296. margin-bottom:4px;
  297. text-transform:uppercase;
  298. letter-spacing:1px;
  299. text-align:center;
  300. background:#f4f4f4;
  301. border:1px solid #f4f4f4;
  302. padding:3px;
  303. display:block;
  304. -webkit-transition: all 0.1s ease;
  305. -moz-transition: all 0.1s ease;
  306. transition: all 0.6s ease;}
  307.  
  308. #click4:hover{background:#dd99ff; /*change for the hover */}
  309. #click4:active{background:#ffffff;}
  310.  
  311. #guts4{
  312. padding:1px;
  313. display:none;
  314. }
  315.  
  316. #links4{
  317. width:100%;
  318. margin-left:0px;
  319. margin-bottom:4px;
  320. }
  321.  
  322. #links4 a{
  323. float:center;
  324. color:#000;
  325. background:#f1f1f1;
  326. margin-top:2px;
  327. margin-left:10px;
  328. width:140px;
  329. text-transform:uppercase;
  330. padding:5px;
  331. display:inline-block;
  332. -webkit-transition: all 0.7s ease;
  333. -moz-transition: all 0.7s ease;
  334. transition: all 0.7s ease;}
  335.  
  336. #links4 a:hover{
  337. color:#fff;
  338. background:#dd99ff;
  339. -webkit-transition: all 0.7s ease;
  340. -moz-transition: all 0.7s ease;
  341. transition: all 0.7s ease;}
  342.  
  343. /* section five coding. */
  344.  
  345.  
  346.  
  347. #guts5,#click5{
  348. padding:1px;
  349. display:inline-block;
  350. }
  351.  
  352. #click5{
  353. margin-bottom:4px;
  354. text-transform:uppercase;
  355. letter-spacing:1px;
  356. text-align:center;
  357. background:#f4f4f4; /*tab 3 background color*/
  358. border:1px solid #f4f4f4;
  359. padding:3px;
  360. display:block;
  361. -webkit-transition: all 0.1s ease;
  362. -moz-transition: all 0.1s ease;
  363. transition: all 0.6s ease;}
  364.  
  365. #click5:hover{background:#99ddff; /*change for the hover */}
  366. #click5:active{background:#ffffff;}
  367.  
  368. #guts5{
  369. padding:1px;
  370. display:none;
  371. }
  372.  
  373. #links5{
  374. width:100%;
  375. margin-left:0px;
  376. margin-bottom:4px;
  377. }
  378.  
  379.  
  380. #links5 a{
  381. float:center;
  382. color:#000;
  383. background:#f1f1f1;
  384. margin-top:2px;
  385. margin-left:10px;
  386. width:140px;
  387. text-transform:uppercase;
  388. padding:5px;
  389. display:inline-block;
  390. -webkit-transition: all 0.7s ease;
  391. -moz-transition: all 0.7s ease;
  392. transition: all 0.7s ease;}
  393.  
  394. #links5 a:hover{
  395. color:#fff;
  396. background:#99ddff;
  397. -webkit-transition: all 0.7s ease;
  398. -moz-transition: all 0.7s ease;
  399. transition: all 0.7s ease;}
  400. </style>
  401.  
  402. <body>
  403. <div id="content">
  404.  
  405. <div id="sections">
  406.  
  407. <div id="topbar">
  408. <div id="title">{blogtitle}'s NAVIGATION</div>
  409. <a href="/"><img src="http://i.imgur.com/7OhFa9w.gif"></a>
  410. <a href="/ask"><img src="http://i.imgur.com/HIbpGls.gif"></a>
  411. <a href="http://asschlinthemes.tumblr.com/"><img src="http://i.imgur.com/DAZmnNZ.gif"></a>
  412. </div>
  413.  
  414. <div id="click">navigation section uno</div>
  415. <div id="guts">
  416. <div id="links">
  417. <a href="/tagged/">link</a>
  418. <a href="/tagged/">link</a>
  419. <a href="/tagged/">link</a>
  420. <a href="/tagged/">link</a>
  421. <a href="/tagged/">link</a>
  422. <a href="/tagged/">link</a>
  423. <a href="/tagged/">link</a>
  424. <a href="/tagged/">link</a>
  425. <a href="/tagged/">link</a>
  426. <a href="/tagged/">link</a>
  427. <a href="/tagged/">link</a>
  428. <a href="/tagged/">link</a>
  429. <a href="/tagged/">link</a>
  430. <a href="/tagged/">link</a>
  431. <a href="/tagged/">link</a>
  432. <a href="/tagged/">link</a>
  433. <a href="/tagged/">link</a>
  434. <a href="/tagged/">link</a>
  435. </div>
  436. </div>
  437.  
  438. <div id="click2">navigation section dos</div>
  439. <div id="guts2">
  440. <div id="links2">
  441. <a href="/tagged/">link</a>
  442. <a href="/tagged/">link</a>
  443. <a href="/tagged/">link</a>
  444. <a href="/tagged/">link</a>
  445. <a href="/tagged/">link</a>
  446. <a href="/tagged/">link</a>
  447. <a href="/tagged/">link</a>
  448. <a href="/tagged/">link</a>
  449. <a href="/tagged/">link</a>
  450. <a href="/tagged/">link</a>
  451. <a href="/tagged/">link</a>
  452. <a href="/tagged/">link</a>
  453. </div>
  454. </div>
  455.  
  456. <div id="click3">navigation section tres</div>
  457. <div id="guts3">
  458. <div id="links3">
  459. <a href="/tagged/">link</a>
  460. <a href="/tagged/">link</a>
  461. <a href="/tagged/">link</a>
  462. <a href="/tagged/">link</a>
  463. <a href="/tagged/">link</a>
  464. <a href="/tagged/">link</a>
  465. <a href="/tagged/">link</a>
  466. <a href="/tagged/">link</a>
  467. <a href="/tagged/">link</a>
  468. <a href="/tagged/">link</a>
  469. <a href="/tagged/">link</a>
  470. <a href="/tagged/">link</a>
  471. </div>
  472. </div>
  473.  
  474. <div id="click4">navigation section quatro</div>
  475. <div id="guts4">
  476. <div id="links4">
  477. <a href="/tagged/">link</a>
  478. <a href="/tagged/">link</a>
  479. <a href="/tagged/">link</a>
  480. <a href="/tagged/">link</a>
  481. <a href="/tagged/">link</a>
  482. <a href="/tagged/">link</a>
  483. <a href="/tagged/">link</a>
  484. <a href="/tagged/">link</a>
  485. <a href="/tagged/">link</a>
  486. <a href="/tagged/">link</a>
  487. <a href="/tagged/">link</a>
  488. <a href="/tagged/">link</a>
  489. <a href="/tagged/">link</a>
  490. <a href="/tagged/">link</a>
  491. <a href="/tagged/">link</a>
  492. <a href="/tagged/">link</a>
  493. <a href="/tagged/">link</a>
  494. <a href="/tagged/">link</a>
  495. <a href="/tagged/">link</a>
  496. <a href="/tagged/">link</a>
  497. <a href="/tagged/">link</a>
  498. <a href="/tagged/">link</a>
  499. <a href="/tagged/">link</a>
  500. <a href="/tagged/">link</a>
  501. </div>
  502. </div>
  503.  
  504. <div id="click5">navigation section cinco</div>
  505. <div id="guts5">
  506.  
  507. <div id="links5">
  508. <a href="/tagged/">link</a>
  509. <a href="/tagged/">link</a>
  510. <a href="/tagged/">link</a>
  511. <a href="/tagged/">link</a>
  512. <a href="/tagged/">link</a>
  513. <a href="/tagged/">link</a>
  514. <a href="/tagged/">link</a>
  515. <a href="/tagged/">link</a>
  516. <a href="/tagged/">link</a>
  517. <a href="/tagged/">link</a>
  518. <a href="/tagged/">link</a>
  519. <a href="/tagged/">link</a>
  520. </div>
  521.  
  522. </div>
  523.  
  524. </div>
  525.  
  526. </div>
  527. </body>
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!