Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Fade in code:
- <style>
- #testone {position: fixed; top: 50px; left: 240px;}
- .testing {position: fixed; top: 200px; left: 440px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0;}
- .testing:target {top: 50px; opacity: 1;}
- #firsttest {position: absolute; top: 0px; left: 0px; height: 200px; width: 150px; background: #ccc; border: solid 1px;}
- #secondtest {position: absolute; top: 0px; left: 190px; height: 200px; width: 150px; background: #ccc; border: solid 1px;}
- #thirdtest {position: absolute; top: 240px; left: 0; height: 200px; width: 340px; background: #ccc; border: solid 1px;}
- </style>
- Navigation:
- <div id="testone">
- <a href="#one">one</a>
- <a href="#two">two</a>
- <a href="#three">three</a>
- <a href="#">return</a>
- </div>
- Boxes:
- <div id="one" class="testing">
- <div id="firsttest">testing text.</div>
- <div id="secondtest">testing text.</div>
- <div id="thirdtest">testing text.</div>
- </div>
- <div id="two" class="testing">
- <div id="firsttest">testing text.</div>
- <div id="secondtest">testing text.</div>
- <div id="thirdtest">testing text.</div>
- </div>
- <div id="three" class="testing">
- <div id="firsttest">testing text.</div>
- <div id="secondtest">testing text.</div>
- <div id="thirdtest">testing text.</div>
- </div>
- The only problem there seems to be with this, is that you have to know the space that you're going to use, to which is set on the width of the :target
- <style>
- #onetest {position: fixed; top: 50px; left: 150px; height: 300px; width: 150px; border: solid 1px; opacity: 0;}
- body:hover #onetest {opacity: 1;}
- </style>
- <div id="onetest"></div>
- You can have less or more than three in a thing, as well!
- [6:59:20 PM] elizabeth.: You place it inside of the tab without adding many properties to the :target.
- [6:59:26 PM] elizabeth.: With each div, there is a box set to it.
- [7:00:15 PM] elizabeth.: While inside of another div that moves, 'position: absolute;' is mandatory, to keep it in place where it should be moving to.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement