Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* THE FOLLOWING CODES GO IN THE <style></style> SECTION */
- /* update tab by almighty-bini
- used codes: "accordion with css by mary lou"
- http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
- please do not remove this part. thanks. */
- .updates {
- position: fixed;
- left: 20px;
- bottom: 20px;
- font-family: "trebuchet ms";
- text-transform: uppercase;
- text-align: left;
- font-size: 9px;
- color: white;
- width: 160px;
- height: 100px;}
- .updates article {
- width: 160px;
- overflow: auto;
- height: 0px;
- position: absolute;
- z-index: 10;
- margin-top: 12px;}
- .updates article p {padding: 5px; margin: 0px; color: white;}
- .updates input:checked ~ article.ac{height: 80px;}
- .updates label {
- padding: 0px 3px;
- position: relative;
- z-index: 20;
- display: block;
- float: left;
- line-height: 12px;
- -webkit-border-top-left-radius: 5px;
- -webkit-border-top-right-radius: 5px;
- -moz-border-radius-topleft: 5px;
- -moz-border-radius-topright: 5px;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;}
- .updates input {display: none;}
- .updates article::-webkit-scrollbar {width: 5px; height: 5px;}
- .updates article::-webkit-scrollbar-thumb {background: transparent; border: 1px solid white;}
- /* CSS PART END */
- /* THE FOLLOWING CODES GO IN THE <body></body> SECTION */
- <section class="updates">
- <div>
- <input id="bx-1" name="box-1" type="radio" checked />
- <label for="bx-1" style="background: red;"><a title="© almighty-bini">Updates</a></label>
- <article class="ac" style="background: red;">
- <p>Example Text.</p>
- </article>
- </div>
- <div>
- <input id="bx-2" name="box-1" type="radio" />
- <label for="bx-2" style="background: orange;">Info</label>
- <article class="ac" style="background: orange;">
- <p>Example Text.</p>
- </article>
- </div>
- <div>
- <input id="bx-3" name="box-1" type="radio" />
- <label for="bx-3" style="background: lime;">Stats</label>
- <article class="ac" style="background: lime;">
- <p>Example Text.</p>
- </article>
- </div>
- <div>
- <input id="bx-4" name="box-1" type="radio" />
- <label for="bx-4" style="background: cyan;">Networks</label>
- <article class="ac" style="background: cyan;">
- <p>Example Text.</p>
- </article>
- </div>
- </section>
- /* BODY PART END */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement