API tools faq
paste
Advertisement
cocoofrps

THEME 28 'TWO SIDES'

cocoofrps
Nov 23rd, 2014
661
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  4. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  5. <script>
  6. (function($){
  7. $(document).ready(function(){
  8. $("[title]").style_my_tooltips({
  9. tip_follows_cursor:true,
  10. tip_delay_time:200,
  11. tip_fade_speed:300
  12. }
  13. );
  14. });
  15. })(jQuery);
  16. </script>
  17.  
  18.  
  19. <head>
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <!--- THEME BY @cocoofrps --->
  26.  
  27. <meta name="color:Background" content="#6bdfe9"/>
  28. <meta name="color:Text" content="#575757"/>
  29. <meta name="color:Links" content="#df9ebf" />
  30. <meta name="color:LinksText" content="#000000" />
  31. <meta name="color:PostBG" content="#d8dada"/>
  32. <meta name="color:DescBG" content="#d8dada"/>
  33. <meta name="color:NavBG" content="#ebacae" />
  34. <meta name="color:QuoteBG" content="#040404" />
  35. <meta name="color:PagiBG" content="#c99c89" />
  36. <meta name="color:Border" content="#333133"/>
  37. <meta name="color:Sidebar" content="#333133"/>
  38. <meta name="color:Hover" content="#c99c89"/>
  39. <meta name="color:Scrollbar" content="#b6a499"/>
  40. <meta name="color:ScrollbarBg" content="#d8dada"/>
  41. <meta name="color:Accent" content="#e4a1af"/>
  42.  
  43. <meta name="image:Background" content=""/>
  44. <meta name="image:Sidebar" content=""/>
  45. <meta name="image:TopNav" content=""/>
  46. <meta name="image:BottomNav" content=""/>
  47.  
  48. <meta name="text:Quote" content=""/>
  49. <meta name="text:Admins" content=""/>
  50. <meta name="text:Link 1" content="home"/>
  51. <meta name="text:Link 1 URL" content="/"/>
  52. <meta name="text:Link 2" content="inquire"/>
  53. <meta name="text:Link 2 URL" content="/fat"/>
  54. <meta name="text:Link 3" content="nav"/>
  55. <meta name="text:Link 3 URL" content="/etc"/>
  56. <meta name="text:Link 4" content="codes"/>
  57. <meta name="text:Link 4 URL" content="/codes"/>
  58.  
  59. <meta name="if:CoverBackgroundImage" content="0"/>
  60. <meta name="if:SlidePanel" content="1"/>
  61.  
  62. <style type="text/css">
  63.  
  64. ::-webkit-scrollbar-thumb {
  65. height:auto;
  66. border:{color:ScrollbarBg};
  67. background-color:{color:Scrollbar};
  68. }
  69.  
  70. ::-webkit-scrollbar {
  71. height:9px;
  72. width:5px;
  73. background-color:{color:ScrollbarBg};
  74. }
  75.  
  76.  
  77. ::selection {
  78. background: {color:Background};
  79. color: {color:PostBG};
  80. }
  81.  
  82. ::-moz-selection {
  83. background: {color:Background};
  84. color: {color:PostBG};
  85. }
  86.  
  87. ::-webkit-selection {
  88. background: {color:Background};
  89. color: {color:PostBG};
  90. }
  91.  
  92. body {
  93. background:{color:Background};
  94. margin:0px;
  95. color:{color:Text};
  96. font-family:'arial';
  97. font-size:11px;
  98. line-height:110%;
  99. letter-spacing:1px;
  100. text-align:justify;
  101. {block:ifNotCoverBackgroundImage}
  102. background-image:url('{image:Background}');
  103. background-attachment:fixed;
  104. {block:ifNotCoverBackgroundImage}
  105. {block:IfCoverBackgroundImage}
  106. background: url('{image:Background}') no-repeat center center fixed;
  107. -webkit-background-size: cover;
  108. -moz-background-size: cover;
  109. -o-background-size: cover;
  110. background-size: cover;
  111. {block:IfCoverBackgroundImage}
  112. }
  113.  
  114. code {
  115. font-size:9px;
  116. font-family:'Courier New';
  117. color:{color:Hover};
  118. text-transform:uppercase;
  119. }
  120.  
  121. small,big {
  122. font-size:8px;
  123. }
  124.  
  125. pre {
  126. font-family:'Courier New';
  127. font-size:8px;
  128. width:auto;
  129. padding:5px 8px;
  130. color:{color:Links};
  131. }
  132.  
  133. a {
  134. text-decoration:none;
  135. outline:none;
  136. -moz-outline-style:none;
  137. -webkit-transition: all 0.4s ease-in-out;
  138. -moz-transition: all 0.4s ease-in-out;
  139. -o-transition: all 0.4s ease-in-out;
  140. -ms-transition: all 0.4s ease-in-out;
  141. transition: all 0.4s ease-in-out;
  142. color:{color:Links};
  143. }
  144.  
  145. b {
  146. color:{color:Hover};
  147. font-weight:100;
  148. }
  149.  
  150. a:hover {
  151. color:{color:Hover};
  152. -webkit-transition: all 0.4s ease-in-out;
  153. -moz-transition: all 0.4s ease-in-out;
  154. -o-transition: all 0.4s ease-in-out;
  155. -ms-transition: all 0.4s ease-in-out;
  156. transition: all 0.4s ease-in-out;
  157. }
  158.  
  159. img {
  160. border:none;
  161. width:auto;
  162. }
  163.  
  164. blockquote {
  165. margin-left:5px;
  166. width:auto;
  167. padding-left:5px;
  168. border-left:5px solid {color:Border};
  169. }
  170.  
  171. blockquote blockquote {
  172. padding-left:5px;
  173. border-left:5px solid {color:Border};
  174. }
  175.  
  176. h1 {
  177. font-size:11px;
  178. letter-spacing:2px;
  179. text-transform:uppercase;
  180. font-style:none;
  181. line-height:10px;
  182. text-align:center;
  183. padding:0px;
  184. }
  185.  
  186. /*ENTRIES*/
  187.  
  188. #entries {
  189. margin-left:230px;
  190. position:absolute;
  191. padding-left:50px;
  192. font-weight:100;
  193. width:580px;
  194. margin-top:50px;
  195. font-size:11px;
  196. }
  197.  
  198. #post {
  199. background-color:{color:PostBG};
  200. width:500px;
  201. line-height:100%;
  202. border-radius:3px 3px 0px 0px;
  203. padding:20px;
  204. margin-bottom:50px;
  205. font-family:'arial';
  206. }
  207.  
  208. /* NAVIGATION */
  209.  
  210. .panel {
  211. position:fixed;
  212. left:-400px;
  213. width:400px;
  214. }
  215.  
  216. .push {
  217. position:relative;
  218. }
  219.  
  220. #menu {
  221. width:400px;
  222. position:fixed;
  223. height:100%;
  224. top:0px;
  225. margin-left:200px;
  226. z-index:99;
  227. padding:10px;
  228. background-color:{color:NavBG};
  229. }
  230.  
  231. .menuim {
  232. width:380px;
  233. height:200px;
  234. position:absolute;
  235. margin-left:20px;
  236. border-radius:3px 3px 0px 0px;
  237. background-color:{color:Background};
  238. background-image:url('{image:TopNav}');
  239. }
  240.  
  241. .menul {
  242. margin-top:210px;
  243. margin-left:20px;
  244. position:absolute;
  245. }
  246.  
  247. .menul a {
  248. padding:5px;
  249. background-color:{color:PostBG};
  250. display:inline-block;
  251. margin-bottom:3px;
  252. text-transform:uppercase;
  253. color:{color:Border};
  254. font-size:10px;
  255. width:178px;
  256. font-family:'courier new';
  257. text-align:center;
  258. }
  259.  
  260. .menul a:hover {
  261. background-color:{color:Links};
  262. }
  263.  
  264. .mquote {
  265. width:370px;
  266. margin-left:20px;
  267. padding:5px;
  268. text-transform:uppercase;
  269. font-size:8px;
  270. margin-top:342px;
  271. text-align:center;
  272. position:absolute;
  273. background-color:{color:QuoteBG};
  274. }
  275.  
  276. .omenuim {
  277. background-image:url('{image:BottomNav}');
  278. width:380px;
  279. height:140px;
  280. margin-left:20px;
  281. background-color:{color:Accent};
  282. margin-top:372px;
  283. position:absolute;
  284. }
  285.  
  286. .admins {
  287. background-color:{color:Border};
  288. padding:10px;
  289. position:fixed;
  290. width:360px;
  291. margin-top:522px;
  292. height:50px;
  293. border-radius:0px 0px 3px 3px;
  294. margin-left:20px;
  295. text-align:center;
  296. }
  297.  
  298. .admins img {
  299. padding:5px;
  300. }
  301.  
  302. /* SIDEBAR */
  303.  
  304. #sidebar {
  305. position:fixed;
  306. width:200px;
  307. height:100%;
  308. z-index:9999999;
  309. padding:10px;
  310. background-color:{color:Sidebar};
  311. top:0px;
  312. }
  313.  
  314. .simage img {
  315. width:200px;
  316. height:350px;
  317. }
  318.  
  319. .links a {
  320. padding:5px;
  321. background-color:{color:Links};
  322. display:block;
  323. color:{color:LinksText};
  324. text-align:right;
  325. font-family:'courier new';
  326. text-transform:uppercase;
  327. font-size:10px;
  328. border-top:3px solid {color:Sidebar};
  329. }
  330.  
  331. .links a:hover {
  332. background-color:{color:Hover};
  333. }
  334.  
  335. .links a:active {
  336. background-color:{color:Text};
  337. }
  338.  
  339. .nav a {
  340. padding:5px;
  341. display:block;
  342. background-color:{color:Accent};
  343. border-top:3px solid {color:Sidebar};
  344. color:{color:Sidebar};
  345. }
  346.  
  347. .desc {
  348. background-color:{color:DescBG};
  349. color:{color:DescText};
  350. padding:5px;
  351. max-height:80px;
  352. font-size:8px;
  353. overflow-y:auto;
  354. border-top:3px solid {color:Sidebar};
  355. }
  356.  
  357. .pagi {
  358. background-color:{color:PagiBG};
  359. color:{color:Sidebar};
  360. padding:5px;
  361. border-radius:0px 0px 3px 3px;
  362. font-size:8px;
  363. }
  364.  
  365. .pagi a {
  366. color:{color:PostBG};
  367. padding:2px 5px;
  368. }
  369.  
  370. .current_page {
  371. padding:2px 5px;
  372. background-color:{color:Accent};
  373. }
  374.  
  375. /*AUDIO INFO*/
  376.  
  377. .imgwrapper img{
  378. width:100px;
  379. }
  380.  
  381. .audio_player {
  382. width:25px;
  383. height:25px;
  384. overflow:hidden;
  385. border-radius:25px;
  386. margin-top:-70px;
  387. margin-left:33px;
  388. background-color:#fff;
  389. position:absolute;
  390. padding:5px;
  391. z-index:9;
  392. }
  393.  
  394. .trackdetails {
  395. font-family:calibri;
  396. position:absolute;
  397. font-size:8px;
  398. margin-top:-70px;
  399. text-align:center;
  400. margin-left:250px;
  401. text-transform:uppercase;
  402. letter-spacing:2px;
  403. }
  404.  
  405. /*POST INFO*/
  406.  
  407. #info {
  408. text-align:right;
  409. font-family: 'calibri';
  410. letter-spacing:1px;
  411. font-size:8px;
  412. font-style:none;
  413. margin-left:-20px;
  414. margin-bottom:-35px;
  415. margin-top:20px;
  416. color:{color:Border};
  417. width:530px;
  418. z-index:99999;
  419. border-radius:0px 0px 3px 3px;
  420. line-height:10px;
  421. min-height:10px;
  422. text-transform:uppercase;
  423. padding:5px;
  424. padding-bottom:7px;
  425. background-color:{color:Links};
  426. }
  427.  
  428. #info a {
  429. text-align:right;
  430. color:{color:Border};
  431. }
  432.  
  433. #info a:hover {
  434. -moz-transition-duration:0s;
  435. -webkit-transition-duration:0s;
  436. -o-transition-duration:0s;
  437. color:{color:PostBG};
  438. }
  439.  
  440. #tags {
  441. text-align:left;
  442. opacity:0;
  443. font-size:8px;
  444. font-family:'arial';
  445. padding:2px;
  446. margin-top:-20px;
  447. text-transform:lowercase;
  448. transition-duration: 0.5s;
  449. -moz-transition-duration: 0.5s;
  450. -webkit-transition-duration: 0.5s;
  451. -o-transition-duration: 0.5s;
  452. }
  453.  
  454. #tagss {
  455. text-align:left;
  456. opacity:1;
  457. font-size:8px;
  458. font-family:'arial';
  459. padding:2px;
  460. margin-top:0px;
  461. text-transform:lowercase;
  462. transition-duration: 0.5s;
  463. -moz-transition-duration: 0.5s;
  464. -webkit-transition-duration: 0.5s;
  465. -o-transition-duration: 0.5s;
  466. }
  467.  
  468.  
  469. #post:hover #tags {
  470. opacity:1;
  471. margin-top:0;
  472. }
  473.  
  474.  
  475. #tags a, #tagss a {
  476. padding:3px;
  477. color:{color:Links};
  478. letter-spacing:0px;
  479. font-family:'helvetica';
  480. text-decoration:none;
  481. background-color:{color:Background};
  482. display:inline-block;
  483. }
  484.  
  485. #tags a:hover, #tagss a:hover {
  486. -moz-transition-duration:0.3s;
  487. -webkit-transition-duration:0.3s;
  488. -o-transition-duration:0.3s;
  489. color:{color:Hover};
  490. }
  491.  
  492. /*QUESTION*/
  493.  
  494. .question {
  495. line-height:110%;
  496. background-color:{color:ScrollbarBG};
  497. }
  498.  
  499. .asker {
  500. font-family:'Arial';
  501. font-size:8px;
  502. display:block;
  503. text-transform:uppercase;
  504. text-align:right;
  505. text-decoration:underline;
  506. color:{color:Text};
  507. background-color:{color:Accent};
  508. padding:2px;
  509. letter-spacing:2px;
  510. }
  511.  
  512. .asker a {
  513. color:{color:Text};
  514. }
  515.  
  516. .q {
  517. font-size:8px;
  518. margin-top:-12px;
  519. background-color:{color:Scrollbar};
  520. color:{color:Border};
  521. padding:10px;
  522. }
  523.  
  524. .q small,.q big,.q code {
  525. background-color:{color:Background};
  526. font-size:8px;
  527. }
  528.  
  529. /*CREDIT*/
  530.  
  531. #cred {
  532. position:fixed;
  533. font-family:'helvetica';
  534. text-transform:uppercase;
  535. background-color:{color:Links};
  536. bottom:10px;
  537. right:10px;
  538. border-radius:3px;
  539. font-size:8px;
  540. padding:5px;
  541. }
  542.  
  543. #cred a {
  544. color:{color:Border};
  545. }
  546.  
  547. #notes {
  548. font-family:calibri;
  549. text-transform:uppercase;
  550. font-size:8px;
  551. margin-left:-40px;
  552. margin-top:-40px;
  553. }
  554.  
  555. #notes li{
  556. list-style-type:none;
  557. background-color:{color:PostBG};
  558. padding:5px;
  559. }
  560.  
  561. #notes img {
  562. opacity:0;
  563. display:none;
  564. }
  565.  
  566. #s-m-t-tooltip{
  567. position:absolute;
  568. background-color:{color:PostBG};
  569. padding:3px 5px 3px;
  570. z-index:99999999999999999999999999999999;
  571. margin-top:-30px;
  572. margin-left:-30px;
  573. font-family:'Courier New';
  574. display:block;
  575. text-transform:uppercase;
  576. font-size:8px;
  577. color:{color:text};
  578. }
  579.  
  580.  
  581. {CustomCSS}</style>
  582. </head>
  583. <body>
  584. {block:ifSlidePanel}
  585. <nav id="menu" class="panel" role="navigation">
  586. <div class="menuim"></div>
  587. <!--- NAVIGATION LINKS ::
  588. This is really easy to edit. Change the / to the url you want it to redirect to. Change 'link' the name of the link that you want to appear in the navigation. -->
  589. <div class="menul">
  590. <a href="/">link</a>
  591. <a href="/">link</a>
  592. <br/>
  593. <a href="/">link</a>
  594. <a href="/">link</a>
  595. <br/>
  596. <a href="/">link</a>
  597. <a href="/">link</a>
  598. <br/>
  599. <a href="/">link</a>
  600. <a href="/">link</a>
  601. <br/>
  602. <a href="/">link</a>
  603. <a href="/">link</a>
  604. </div>
  605. <div class="mquote">{text:Quote}</div>
  606. <div class="omenuim"></div>
  607. <div class="admins">{text:Admins}</div>
  608. </nav>{/block:ifSlidePanel}
  609.  
  610. <div id="sidebar">
  611. <div class="simage"><img src="{image:Sidebar}"></div>
  612. <div class="links">
  613. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  614. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  615. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  616. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  617. </div>
  618. {block:ifSlidePanel}
  619. <div class="nav">
  620. <a href="#menu" class="menu-link">+</a>
  621. </div>
  622. {/block:ifSlidePanel}
  623. <div class="desc">{Description}</div>
  624. <div class="pagi">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">BACK</a>{/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}
  625. {/block:Pagination}</div>
  626. </div>
  627. <!-- POSTS START -->
  628. <div id="entries" class="push">
  629. {block:Posts}
  630.  
  631. <div id="post">
  632. {block:Text}
  633. <h1>{block:Title}<a href="{Permalink}" title="{Title}"><div style="border-top:5px solid {color:Links};font-size:8px;font-family:'Courier New';text-transform:uppercase;padding:10px;background-color:{color:Border};color:{color:Links};">{Title}</div></a>{/block:Title}</h1>
  634. {Body}{/block:Text}
  635.  
  636. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  637. {block:Caption}{Caption}{/block:Caption}{/block:Photo}
  638.  
  639. {block:Photoset}{Photoset-500}{block:Caption}{Caption}
  640. {/block:Caption}{/block:Photoset}
  641.  
  642. {block:Quote}<div style="font-size:10px;font-family:'courier new';text-transform:uppercase;padding:10px;background-color:{color:Border};color:{color:Background};">"{Quote}"</div><br/>
  643. {block:Source}<div class="qsource"> —{Source}</div>
  644. {/block:Source}<br>{/block:Quote}
  645.  
  646. {block:Link}<a href="{URL}" {Target} title="{Name}"><div style="border-top:5px solid {color:Links};font-size:8px;font-family:'Courier New';text-transform:uppercase;padding:10px;background-color:{color:Border};color:{color:Links};">{Name}</div></a>{block:Description}{Description}{/block:Description}{/block:Link}
  647.  
  648. {block:Chat}{block:Title}{Title}{/block:Title}{block:Lines}{block:Label}<span style="text-transform:uppercase;font-family:'courier new';"><b>{Label}</b></span>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  649. {block:Audio}
  650. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}{block:AlbumArt}<div class="imgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer} <div class="trackdetails">{block:TrackName}<big>{TrackName}</big><br/>{/block:TrackName}{block:Artist}{Artist}<br/>{/block:Artist}{block:Album}{Album}<br/>{/block:Album}{PlayCountWithLabel}</div>{block:Caption}{Caption}{/block:Caption}
  651. {/block:Audio}
  652.  
  653. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}<br>{/block:Video}
  654.  
  655. <!--- Please don't steal anything. I find it rude and unethical. -->
  656. {block:Answer}<div id="answer">
  657. <div class="question">
  658. <div class="asker">{Asker}</div><br/><div class="q">{Question}</div></div>
  659. {block:Answerer}<br/><br/><div class="question"><div class="asker">{Answerer}</div><br/><div class="q">{Answer}</div></div>{/block:Answerer}{Replies}</div>{/block:Answer}
  660. {block:IndexPage}
  661. <div id="info">
  662. {block:Date}<a href="{Permalink}" title="{ShortMonth}.{DayOfMonth}.{Year}">{TimeAgo}</a>{/block:Date}
  663. {block:NoteCount}
  664. | <a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>{block:RebloggedFrom} | <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom} {block:ContentSource} |
  665. <a href="{SourceURL}" title="{SourceTitle}">source</a>{/block:ContentSource}
  666. {block:RebloggedFrom} <a href="{ReblogParentURL}" title="Reblogged From" target="_blank"></a>{/block:RebloggedFrom}
  667. {block:HasTags}<div id="tags">
  668. {block:Tags} <a href="/tagged/{Tag}">#{Tag}</a>{/block:Tags}
  669. </div>{block:HasTags}
  670. </div>
  671. {/block:IndexPage}
  672.  
  673. {block:PermalinkPage}
  674. <div id="info">
  675. {block:Date}<a>{Month} {DayOfMonth}, {Year} {12Hour}:{Minutes}{CapitalAmPm} | {TimeAgo}</a>{/block:Date}
  676. {block:NoteCount}
  677. | <a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>{block:RebloggedFrom} | <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom} {block:ContentSource} |
  678. <a href="{SourceURL}" title="{SourceTitle}">source</a>{/block:ContentSource}
  679. {block:RebloggedFrom} <a href="{ReblogParentURL}" title="Reblogged From" target="_blank"></a>{/block:RebloggedFrom}
  680. {block:HasTags}<div id="tagss">
  681. {block:Tags} <a href="/tagged/{Tag}">#{Tag}</a>{/block:Tags}
  682. </div>{block:HasTags}
  683. </div>
  684. {/block:PermalinkPage}
  685. </div>
  686.  
  687. {/block:Posts}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  688. {/block:Posts}</div>
  689.  
  690. </div>
  691.  
  692. </div>
  693. <div id="cred">
  694. <a href="http://cocoofrps.tumblr.com/" title="THEME 28 BY COCO">coco</a>
  695. </div>
  696. </div>
  697. </body>
  698. <script>
  699.  
  700. /*! bigSlide - v0.5.0 - 2014-09-12
  701. * http://ascott1.github.io/bigSlide.js/
  702. * Copyright (c) 2014 Adam D. Scott; Licensed MIT */
  703. /*! bigSlide - v0.4.3 - 2014-01-25
  704. * http://ascott1.github.io/bigSlide.js/
  705. * Copyright (c) 2014 Adam D. Scott; Licensed MIT */
  706.  
  707. (function($) {
  708. 'use strict';
  709.  
  710. $.fn.bigSlide = function(options) {
  711.  
  712. var settings = $.extend({
  713. 'menu': ('#menu'),
  714. 'push': ('.push'),
  715. 'side': 'left',
  716. 'menuWidth': '400px',
  717. 'speed': '300',
  718. 'activeBtn':'menu-open'
  719. }, options);
  720.  
  721. var menuLink = this,
  722. menu = $(settings.menu),
  723. push = $(settings.push),
  724. width = settings.menuWidth;
  725.  
  726. var positionOffScreen = {
  727. 'position': 'fixed',
  728. 'top': '0',
  729. 'bottom': '0',
  730. 'settings.side': '-' + settings.menuWidth,
  731. 'width': settings.menuWidth,
  732. 'height': '100%'
  733. };
  734.  
  735. var animateSlide = {
  736. '-webkit-transition': settings.side + ' ' + settings.speed + 'ms ease',
  737. '-moz-transition': settings.side + ' ' + settings.speed + 'ms ease',
  738. '-ms-transition': settings.side + ' ' + settings.speed + 'ms ease',
  739. '-o-transition': settings.side + ' ' + settings.speed + 'ms ease',
  740. 'transition': settings.side + ' ' + settings.speed + 'ms ease'
  741. };
  742.  
  743. menu.css(positionOffScreen);
  744. push.css(settings.side, '0');
  745. menu.css(animateSlide);
  746. push.css(animateSlide);
  747.  
  748. menu._state = 'closed';
  749.  
  750. menu.open = function() {
  751. menu._state = 'open';
  752. menu.css(settings.side, '0');
  753. push.css(settings.side, width);
  754. menuLink.addClass(settings.activeBtn);
  755. };
  756.  
  757. menu.close = function() {
  758. menu._state = 'closed';
  759. menu.css(settings.side, '-' + width);
  760. push.css(settings.side, '0');
  761. menuLink.removeClass(settings.activeBtn);
  762. };
  763.  
  764. $(document).on('click.bigSlide', function(e) {
  765. if (!$(e.target).parents().andSelf().is(menuLink) && menu._state === 'open') {
  766. menu.close();
  767. menuLink.removeClass(settings.activeBtn);
  768. }
  769. });
  770.  
  771. menuLink.on('click.bigSlide', function(e) {
  772. e.preventDefault();
  773. if (menu._state === 'closed') {
  774. menu.open();
  775. } else {
  776. menu.close();
  777. }
  778. });
  779.  
  780. menuLink.on('touchend', function(e){
  781. menuLink.trigger('click.bigSlide');
  782. e.preventDefault();
  783. });
  784.  
  785. return menu;
  786.  
  787. };
  788.  
  789. }(jQuery));
  790. </script>
  791. <script>
  792. $(document).ready(function() {
  793. $('.menu-link').bigSlide();
  794. });
  795. </script>
  796. </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!