Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- sburb menu for tumblr themes by pyrlspite
- 4/13/18 edition
- ========================================
- === paste this directly after <head> ===
- ========================================
- <meta name="text:sburb text 1" content="home">
- <meta name="text:sburb link 1" content="https://YOURURL.tumblr.com">
- <meta name="text:sburb text 2" content="about">
- <meta name="text:sburb link 2" content="https://YOURURL.tumblr.com/about">
- <meta name="text:sburb text 3" content="archive">
- <meta name="text:sburb link 3" content="https://YOURURL.tumblr.com/archive">
- <meta name="text:sburb text 4" content="ask">
- <meta name="text:sburb link 4" content="https://YOURURL.tumblr.com/ask">
- <meta name="text:sburb text 5" content="submit">
- <meta name="text:sburb link 5" content="https://YOURURL.tumblr.com/submit">
- <meta name="text:sburb text 6" content="random">
- <meta name="text:sburb link 6" content="https://YOURURL.tumblr.com/random">
- <meta name="text:sburb font size" content="20px">
- <meta name="text:sburb width in px or percent" content="800px">
- <meta name="text:sburb max width in px if using percent above" content="">
- <meta name="text:sburb min width in px if using percent above" content="">
- =========================================
- === paste this directly after <style> ===
- =========================================
- .sburb {
- width:{text:sburb width in px or percent};
- max-width:{text:sburb max width in px if using percent above};
- min-width:{text:sburb min width in px if using percent above};
- position:fixed;
- top:0;
- left:0;
- z-index:50;
- pointer-events:none;
- }
- .sburb-bar-img-filler {
- position:absolute;
- top:0;
- left:100%;
- width:100vw;
- height:100%;
- }
- .sburb-select {
- position:absolute;
- pointer-events:auto;
- top:3%;
- width:7.75%;
- height:38%;
- box-sizing:border-box;
- }
- .sburb-select:hover {
- border:4px solid #4bec13;
- border-radius:5px;
- }
- .sburb-dropdown {
- position:absolute;
- background-color:white;
- top:52%;
- height:42%;
- width:23%;
- pointer-events:none;
- box-shadow: 5px 5px #ddd;
- border-radius:5px;
- padding:1.5%;
- z-index:100;
- opacity:0;
- }
- .sburb-dropdown-img {
- height:100%;
- float:left;
- }
- .sburb-drop-table {
- height:127%;
- border-collapse:collapse;
- margin:-5% -5% 0 0;
- float:right;
- }
- .sburb-drop-text {
- vertical-align:middle;
- text-align:center;
- color:#909090;
- font-family:"Arial";
- font-weight:bold;
- font-size:{text:sburb font size};
- }
- #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 {
- opacity:1;
- }
- ========================================
- === paste this directly after <body> ===
- ========================================
- <div class="sburb">
- <img class="sburb-bar-img-filler" src="https://i.imgur.com/X01zc9B.png">
- <img style="width:100%" src="https://i.imgur.com/FhATmhs.png">
- <a href="{text:sburb link 1}"><div id="ss-1" class="sburb-select" style="left:27.45%;"></div>
- <div id="sd-1" class="sburb-dropdown" style="left:27.45%;">
- <img src="https://i.imgur.com/Rl3MiS4.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:56%;">
- <td class="sburb-drop-text">{text:sburb text 1}<td>
- </table>
- </div></a>
- <a href="{text:sburb link 2}"><div id="ss-2" class="sburb-select" style="left:36.2%"></div>
- <div id="sd-2" class="sburb-dropdown" style="left:36.2%;">
- <img src="https://i.imgur.com/lcYqdxZ.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:56%;">
- <td class="sburb-drop-text">{text:sburb text 2}<td>
- </table>
- </div></a>
- <a href="{text:sburb link 3}"><div id="ss-3" class="sburb-select" style="left:44.85%"></div>
- <div id="sd-3" class="sburb-dropdown" style="left:44.85%;">
- <img src="https://i.imgur.com/g19eNUr.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:62%;">
- <td class="sburb-drop-text">{text:sburb text 3}<td>
- </table>
- </div></a>
- <a href="{text:sburb link 4}"><div id="ss-4" class="sburb-select" style="left:53.8%;"></div>
- <div id="sd-4" class="sburb-dropdown" style="left:53.8%;">
- <img src="https://i.imgur.com/7jNQ51c.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:68%;">
- <td class="sburb-drop-text">{text:sburb text 4}<td>
- </table>
- </div></a>
- <a href="{text:sburb link 5}"><div id="ss-5" class="sburb-select" style="left:62.4%;"></div>
- <div id="sd-5" class="sburb-dropdown" style="left:62.4%;">
- <img src="https://i.imgur.com/d9KdPtO.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:62%;">
- <td class="sburb-drop-text">{text:sburb text 5}<td>
- </table>
- </div></a>
- <a href="{text:sburb link 6}"><div id="ss-6" class="sburb-select" style="left:71.3%;"></div>
- <div id="sd-6" class="sburb-dropdown" style="left:71.3%;">
- <img src="https://i.imgur.com/GFq22nW.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:62%;">
- <td class="sburb-drop-text">{text:sburb text 6}<td>
- </table>
- </div></a>
- <a href="https://pyrlspite.tumblr.com/theme"><div id="ss-7" class="sburb-select" style="left:80.1%"></div>
- <div id="sd-7" class="sburb-dropdown" style="left:80.1%;">
- <img src="https://i.imgur.com/8Wn7NN3.png" class="sburb-dropdown-img"/>
- <table class="sburb-drop-table" style="width:63%;">
- <!-- feel free to use this as another link, but please credit me by linking https://pyrlspite.tumblr.com/theme elsewhere! -->
- <td class="sburb-drop-text">menu code<td>
- </table>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement