API tools faq
paste
Advertisement
pyrlspitepaste

sburb menu 2018

pyrlspitepaste
Apr 12th, 2018
1,215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.86 KB | None | 0 0
raw download clone embed print report
  1. sburb menu for tumblr themes by pyrlspite
  2. 4/13/18 edition
  3.  
  4. ========================================
  5. === paste this directly after <head> ===
  6. ========================================
  7. <meta name="text:sburb text 1" content="home">
  8. <meta name="text:sburb link 1" content="https://YOURURL.tumblr.com">
  9. <meta name="text:sburb text 2" content="about">
  10. <meta name="text:sburb link 2" content="https://YOURURL.tumblr.com/about">
  11. <meta name="text:sburb text 3" content="archive">
  12. <meta name="text:sburb link 3" content="https://YOURURL.tumblr.com/archive">
  13. <meta name="text:sburb text 4" content="ask">
  14. <meta name="text:sburb link 4" content="https://YOURURL.tumblr.com/ask">
  15. <meta name="text:sburb text 5" content="submit">
  16. <meta name="text:sburb link 5" content="https://YOURURL.tumblr.com/submit">
  17. <meta name="text:sburb text 6" content="random">
  18. <meta name="text:sburb link 6" content="https://YOURURL.tumblr.com/random">
  19. <meta name="text:sburb font size" content="20px">
  20. <meta name="text:sburb width in px or percent" content="800px">
  21. <meta name="text:sburb max width in px if using percent above" content="">
  22. <meta name="text:sburb min width in px if using percent above" content="">
  23.  
  24. =========================================
  25. === paste this directly after <style> ===
  26. =========================================
  27. .sburb {
  28. width:{text:sburb width in px or percent};
  29. max-width:{text:sburb max width in px if using percent above};
  30. min-width:{text:sburb min width in px if using percent above};
  31. position:fixed;
  32. top:0;
  33. left:0;
  34. z-index:50;
  35. pointer-events:none;
  36. }
  37. .sburb-bar-img-filler {
  38. position:absolute;
  39. top:0;
  40. left:100%;
  41. width:100vw;
  42. height:100%;
  43. }
  44. .sburb-select {
  45. position:absolute;
  46. pointer-events:auto;
  47. top:3%;
  48. width:7.75%;
  49. height:38%;
  50. box-sizing:border-box;
  51. }
  52. .sburb-select:hover {
  53. border:4px solid #4bec13;
  54. border-radius:5px;
  55. }
  56. .sburb-dropdown {
  57. position:absolute;
  58. background-color:white;
  59. top:52%;
  60. height:42%;
  61. width:23%;
  62. pointer-events:none;
  63. box-shadow: 5px 5px #ddd;
  64. border-radius:5px;
  65. padding:1.5%;
  66. z-index:100;
  67. opacity:0;
  68. }
  69. .sburb-dropdown-img {
  70. height:100%;
  71. float:left;
  72. }
  73. .sburb-drop-table {
  74. height:127%;
  75. border-collapse:collapse;
  76. margin:-5% -5% 0 0;
  77. float:right;
  78. }
  79. .sburb-drop-text {
  80. vertical-align:middle;
  81. text-align:center;
  82. color:#909090;
  83. font-family:"Arial";
  84. font-weight:bold;
  85. font-size:{text:sburb font size};
  86. }
  87. #ss-1:hover ~ #sd-1, #ss-2:hover ~ #sd-2, #ss-3:hover ~ #sd-3, #ss-4:hover ~ #sd-4, #ss-5:hover ~ #sd-5, #ss-6:hover ~ #sd-6, #ss-7:hover ~ #sd-7 {
  88. opacity:1;
  89. }
  90.  
  91. ========================================
  92. === paste this directly after <body> ===
  93. ========================================
  94. <div class="sburb">
  95. <img class="sburb-bar-img-filler" src="https://i.imgur.com/X01zc9B.png">
  96. <img style="width:100%" src="https://i.imgur.com/FhATmhs.png">
  97. <a href="{text:sburb link 1}"><div id="ss-1" class="sburb-select" style="left:27.45%;"></div>
  98. <div id="sd-1" class="sburb-dropdown" style="left:27.45%;">
  99. <img src="https://i.imgur.com/Rl3MiS4.png" class="sburb-dropdown-img"/>
  100. <table class="sburb-drop-table" style="width:56%;">
  101. <td class="sburb-drop-text">{text:sburb text 1}<td>
  102. </table>
  103. </div></a>
  104. <a href="{text:sburb link 2}"><div id="ss-2" class="sburb-select" style="left:36.2%"></div>
  105. <div id="sd-2" class="sburb-dropdown" style="left:36.2%;">
  106. <img src="https://i.imgur.com/lcYqdxZ.png" class="sburb-dropdown-img"/>
  107. <table class="sburb-drop-table" style="width:56%;">
  108. <td class="sburb-drop-text">{text:sburb text 2}<td>
  109. </table>
  110. </div></a>
  111. <a href="{text:sburb link 3}"><div id="ss-3" class="sburb-select" style="left:44.85%"></div>
  112. <div id="sd-3" class="sburb-dropdown" style="left:44.85%;">
  113. <img src="https://i.imgur.com/g19eNUr.png" class="sburb-dropdown-img"/>
  114. <table class="sburb-drop-table" style="width:62%;">
  115. <td class="sburb-drop-text">{text:sburb text 3}<td>
  116. </table>
  117. </div></a>
  118. <a href="{text:sburb link 4}"><div id="ss-4" class="sburb-select" style="left:53.8%;"></div>
  119. <div id="sd-4" class="sburb-dropdown" style="left:53.8%;">
  120. <img src="https://i.imgur.com/7jNQ51c.png" class="sburb-dropdown-img"/>
  121. <table class="sburb-drop-table" style="width:68%;">
  122. <td class="sburb-drop-text">{text:sburb text 4}<td>
  123. </table>
  124. </div></a>
  125. <a href="{text:sburb link 5}"><div id="ss-5" class="sburb-select" style="left:62.4%;"></div>
  126. <div id="sd-5" class="sburb-dropdown" style="left:62.4%;">
  127. <img src="https://i.imgur.com/d9KdPtO.png" class="sburb-dropdown-img"/>
  128. <table class="sburb-drop-table" style="width:62%;">
  129. <td class="sburb-drop-text">{text:sburb text 5}<td>
  130. </table>
  131. </div></a>
  132. <a href="{text:sburb link 6}"><div id="ss-6" class="sburb-select" style="left:71.3%;"></div>
  133. <div id="sd-6" class="sburb-dropdown" style="left:71.3%;">
  134. <img src="https://i.imgur.com/GFq22nW.png" class="sburb-dropdown-img"/>
  135. <table class="sburb-drop-table" style="width:62%;">
  136. <td class="sburb-drop-text">{text:sburb text 6}<td>
  137. </table>
  138. </div></a>
  139. <a href="https://pyrlspite.tumblr.com/theme"><div id="ss-7" class="sburb-select" style="left:80.1%"></div>
  140. <div id="sd-7" class="sburb-dropdown" style="left:80.1%;">
  141. <img src="https://i.imgur.com/8Wn7NN3.png" class="sburb-dropdown-img"/>
  142. <table class="sburb-drop-table" style="width:63%;">
  143. <!-- feel free to use this as another link, but please credit me by linking https://pyrlspite.tumblr.com/theme elsewhere! -->
  144. <td class="sburb-drop-text">menu code<td>
  145. </table>
  146. </div>
  147. </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!