A Pen by Kunsang Norbu Tsering on CodePen.
-
-
Save kunsang/05cc6e7d507f184963b3 to your computer and use it in GitHub Desktop.
MTS Datenraum 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul> | |
| <li><a href="#" class="zero active"><span>Alle Dateien</span></a></li> | |
| <li><a href="#" class="one"><span>Grundstück/Gebäude</span></a></li> | |
| <li><a href="#" class="two"><span>Baurecht, Bebauung</span></a></li> | |
| <li><a href="#" class="three"><span>Nutzungs- und Grundstückskaufverträge</span></a></li> | |
| <li><a href="#" class="four"><span>Corporate</span></a></li> | |
| <li><a href="#" class="five"><span>Netz und Einspeisung</span></a></li> | |
| <li><a href="#" class="six"><span>Sonstiges</span></a></li> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Open+Sans); | |
| body{ background: #dcdcdc;} | |
| ul { position: absolute; top: 100px; left: 400px;} | |
| ul li { display: block;} | |
| ul li a { | |
| display: inline-block; | |
| width: 32px; height: 32px; | |
| margin-bottom: 8px; padding: 8px; | |
| color: #fff; | |
| background: #fff 8px center / 32px 32px no-repeat; | |
| font: .8em 'Open Sans', sans-serif; | |
| white-space: nowrap; text-wrap: none; | |
| text-decoration: none; | |
| } | |
| ul li a span { | |
| position: absolute; | |
| right: 1em; | |
| margin-top: -8px; padding: 20px; | |
| line-height: 8px; | |
| background-color: #2598bf; | |
| transition: all .5s ease; | |
| pointer-events: none; | |
| text-align: right; | |
| opacity: 0; | |
| } | |
| ul li a span:after { | |
| content: ""; | |
| position: absolute; | |
| top: 16px; right: -10px; | |
| width: 0; height: 0; | |
| border-style: solid; | |
| border-width: 8px 0 8px 10px; | |
| border-color: transparent transparent transparent #2598bf; | |
| } | |
| ul li a:hover span { | |
| right: 60px; | |
| opacity: 1; | |
| } | |
| ul li a:hover, ul li a.active { background-color: #2598bf;} | |
| a.zero { background-image: url(http://bit.ly/1pk4z9H);} | |
| a.one { background-image: url(https://goo.gl/6rrohw);} | |
| a.two { background-image: url(https://goo.gl/Qmor6H);} | |
| a.three { background-image: url(http://bit.ly/1LDP4mB);} | |
| a.four { background-image: url(http://bit.ly/1TuG46k);} | |
| a.five { background-image: url(http://bit.ly/1RsJAHW);} | |
| a.six { | |
| background-image: url(http://bit.ly/1TdD5ib); | |
| background-size: 42px; | |
| background-position: 2px center; | |
| } | |
| a.zero:hover, a.zero.active { background-image: url(http://bit.ly/1RDvKmg);} | |
| a.one:hover, a.one.active { background-image: url(http://bit.ly/1Yah2sa);} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment