Sliding Content Navigation
Live View
Play With Code
Navigation links that when hovered over slide out into a panel with whatever information you want. Keeps from visitors having to view 5 million different pages and having all the info available at once
Paste this code under your <style type=”text/css”> tag
#link{ position:absolute; padding-top:12px; padding-bottom:12px; text-align:center; height:10px; color: #3CF; width:68px; overflow:hidden; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; background:transparent; z-index:9999; border-radius:10px; } #link:hover{ border:3px dashed #6CF; -webkit-box-shadow: 0px 0px 20px #56b1f0; -moz-box-shadow: 0px 0px 20px #56b1f0; box-shadow: 0px 0px 20px #56b1f0; padding:5px; height:500px; overflow:hidden; width:520px; opacity:1.0; background: #fcf; z-index:999999999; } #ext{ height: 500px; overflow-y:scroll; overflow-x:hidden; background:transparent; opacity:1.0; text-align:center; z-index:999999999; } #link2{ margin-left: 100px; position:absolute; padding-top:12px; padding-bottom:12px; text-align:center; color: #3CF; height:10px; width:68px; overflow:hidden; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; background:transparent; z-index:9999; border-radius:10px; } #link2:hover{ border:3px dashed #56b1f0; -webkit-box-shadow: 0px 0px 20px #56b1f0; -moz-box-shadow: 0px 0px 20px #56b1f0; box-shadow: 0px 0px 20px #56b1f0; padding:5px; height:440px; overflow:hidden; width:520px; opacity:1.0; background: #b3f87f; z-index:999999999; } #ext2{ height: 500px; overflow-y:scroll; overflow-x:hidden; background:transparent; opacity:1.0; text-align:center; z-index:999999999; } #link3{ margin-left: 220px; position:absolute; padding-top:12px; padding-bottom:12px; text-align:center; color: #3CF; height:10px; width:75px; overflow:hidden; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; background:transparent; z-index:9999; border-radius:10px; } #link3:hover{ border:3px dashed #56b1f0; -webkit-box-shadow: 0px 0px 20px #56b1f0; -moz-box-shadow: 0px 0px 20px #56b1f0; box-shadow: 0px 0px 20px #56b1f0; padding:5px; height:290px; overflow:hidden; width:520px; opacity:1.0; background: #b3f87f; z-index:999999999; } #ext3{ height: 300px; overflow: scroll; background:transparent; opacity:1.0; text-align:center; z-index:999999999; } #link4{ margin-left: 320px; position:absolute; padding-top:12px; padding-bottom:12px; text-align:center; color: #3CF; height:10px; width:75px; overflow:hidden; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; background:transparent; z-index:9999; border-radius:10px; } #link4:hover{ border:3px dashed #56b1f0; -webkit-box-shadow: 0px 0px 20px #56b1f0; -moz-box-shadow: 0px 0px 20px #56b1f0; box-shadow: 0px 0px 20px #56b1f0; padding:5px; height:520px; overflow:hidden; width:510px; opacity:1.0; background: #b3f87f; z-index:999999999; } #ext4{ height: 500px; overflow-y:scroll; overflow-x:hidden; background:transparent; opacity:1.0; text-align:center; z-index:999999999; } #link5{ margin-left: 420px; position:absolute; padding-top:12px; padding-bottom:12px; text-align:center; color: #3CF; height:10px; width:75px; overflow:hidden; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; background:transparent; z-index:9999; border-radius:10px; } #link5:hover{ border:3px dashed #56b1f0; -webkit-box-shadow: 0px 0px 20px #56b1f0; -moz-box-shadow: 0px 0px 20px #56b1f0; box-shadow: 0px 0px 20px #56b1f0; padding:5px; height:520px; overflow:hidden; width:510px; opacity:1.0; background: #b3f87f; z-index:999999999; } #ext5{ height: 500px; overflow-y:scroll; overflow-x:hidden; background:transparent; opacity:1.0; text-align:center; z-index:999999999; }
Now paste this code wherever you want the links to be (i.e. description, header, ect)
<div id="link"> Ask <div id="ext"> <center>ENTER FAQ/ASK HEADER/WHATEVER HERE <br /> <br /> <Center><iframe frameborder="0" scrolling="yes" width="70%" height="120" src="http://www.tumblr.com/ask_form/YOURTUMBLRUSERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe> </iframe></Center> </div> </div> <div id="link2"> Submit <div id="ext2"> <iframe frameborder="0" scrolling="yes" width="100%" height="750" src="http://www.tumblr.com/submit_form/YOURTUMBLRUSERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe> </div> </div>
<div id="link3"> Link <div id="ext3"> CONTENT GOES HERE </div> </div> <div id="link4"> Link <div id="ext4">
Content Goes Here
</div> </div> <div id="link5"> Link <div id="ext5"> Content Goes Here </div> </div> </div>
Changing the colors/ect