Skip to content

Instantly share code, notes, and snippets.

@kunsang

kunsang/MTS Datenraum 3.markdown

Forked from anonymous/MTS Datenraum 3.markdown
Created March 11, 2016 17:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kunsang/05cc6e7d507f184963b3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kunsang/05cc6e7d507f184963b3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Mar 11, 2016.
    7 changes: 7 additions & 0 deletions MTS Datenraum 3.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    MTS Datenraum 3
    ---------------


    A [Pen](http://codepen.io/kunsang/pen/jqbmoo) by [Kunsang Norbu Tsering](http://codepen.io/kunsang) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/kunsang/pen/jqbmoo/license).
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <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>
    54 changes: 54 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    @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);}