Responsive Navigation Sliding Tabs

Responsive Navigation Sliding Tabs, solo con CSS y HTML para insertar en nuestro Blog de gran calidad y el cual es responsive.

See the Pen Responsive Navigation Sliding Tabs by Jeremy T (@jetpacmonkey) on CodePen.

CODIGO HTML

<div class="navWrapper"> <nav class="nav-1"> <header>Social</header> <a href="https://twitter.com/jetpacmonkey" class="twitter"> <span class="icon-social" data-icon="t"></span> <span class="descText">@jetpacmonkey</span> </a> <a href="https://facebook.com/" class="facebook"> <span class="icon-social" data-icon="F"></span> <span class="descText">Jeremy Tice</span> </a> </nav> <nav class="nav-2"> <header>Content</header> <a href="#" class="projects"> <span class="icon" data-icon="+"></span> <span class="descText">Projects</span> </a> <a href="#" class="music"> <span class="icon" data-icon="*"></span> <span class="descText">Music</span> </a> <a href="#" class="blog"> <span class="icon" data-icon="\"></span> <span class="descText">Blog</span> </a> </nav> </div> <div id="main"> <h1>Welcome</h1> <div id="content"> You have reached the eventual online home of Jeremy Tice. I'm still in the midst of developing the site, but if you need to contact me, you can reach me at <a href="mailto:mail@example.com">mail@example.com</a>. Alternatively, you can follow me <a href="https://twitter.com/jetpacmonkey">on Twitter (@jetpacmonkey)</a>. If you would like to see some of my work, you can view my <a href="https://github.com/jetpacmonkey">Github profile</a>. <br><br> If you're interested in seeing the progress of this site, I'll be committing semi-regularly to a <a href="https://github.com/jetpacmonkey/personal">Github repository</a>. </div> </div>

CODIGO CSS

<style> @import "compass/css3"; @import "compass/reset"; @import "compass/css3/box-sizing"; @import "compass/css3/font-face"; @import url(http://weloveiconfonts.com/api/?family=typicons); @mixin breakpoint($point) { @if $point == papa-bear { @media (max-width: 1600px) { @content; } } @else if $point == mama-bear { @media (max-width: 1250px) { @content; } } @else if $point == baby-bear { @media (max-width: 600px) { @content; } }} @include font-face(JustVector, font-files( "http://dev.jeremytice.com/css/fonts/JustVector/justvectorv2-webfont.woff", woff, "http://dev.jeremytice.com/css/fonts/JustVector/justvectorv2-webfont.ttf", ttf, "dev.http://jeremytice.com/css/fonts/JustVector/justvectorv2-webfont.svg", svg), "http://dev.jeremytice.com/css/fonts/JustVector/justvectorv2-webfont.eot"); html, body { height: 100%; @include box-sizing(border-box); } body { /* background from https://subtlepatterns.com/wild-oliva/ */ background: url(http://jeremytice.com/img/wild_oliva.png); font-size: 14px; font-family: "Times New Roman", Times, serif; margin: 0; padding: 2%; @include breakpoint(baby-bear) { padding: 0; }} #main { margin: 2% auto; width: 1000px; max-width: 90%; min-height: 96%; background: white; box-shadow: 0 0 20px #333; border-radius: 20px; overflow: auto; @include breakpoint(baby-bear) { max-width: none; min-height: 0; width: 100%; margin: 2% 0; border-radius: 0; }} .icon { display: inline-block; font-family: "Typicons"; &:after { content: attr(data-icon); }} .icon-social { @extend .icon; font-family: "JustVector"; } /* *****END MAIN.SCSS***** */ /* *****BEGIN INDEX.SCSS***** */ @import "compass/css3/transform"; @import "compass/css3/transition"; @import "compass/css3/box-sizing"; @import "compass/css3/opacity"; $navWidth: 150px; $navStubWidth: 30px; $navHeight: 100px; h1 { text-align: center; font-style: italic; font-size: 2em; line-height: 1.5; background: rgb(140, 140, 140); background: rgba(180, 180, 180, 0.3); margin: 0; color: #333; } #content { padding: 2em 6%; font-size: 1.3em; line-height: 1.2; color: #333; } #content a { color: #08F; font-style: italic; font-family: Helvetica, Arial, sans-serif; font-size: 0.88em; text-decoration: underline; } #content a[href^="http"]:after { content: " \21d7"; } #content a[href^="mailto"]:after { content: " \2709"; } #content a:hover { color: #0BF; text-decoration: none; } .navWrapper:after { /* clearfix */ display: block; content: "."; visibility: hidden; clear: both; height: 0; line-height: 0; } %main-nav { width: $navWidth; position: absolute; top: 0; min-height: 100%; overflow: hidden; & a { position: relative; display: block; width: $navWidth; height: $navHeight; margin: 20px 0; line-height: $navHeight; text-decoration: none; text-align: center; @include box-sizing(border-box); &, & .descText, & .icon, & .icon-social { @include transition(all 0.3s linear); } &:hover { @include translateX(0); @include opacity(0.7); & .descText { @include opacity(0.8); } & .icon, & .icon-social { text-shadow: none; } } } & .icon, & .icon-social { font-size: $navStubWidth; width: $navStubWidth; text-align: center; display: block; position: absolute; top: 0; text-shadow: 0 0 8px #000; } & header { background: #CCC; font-size: 1.3em; line-height: 1.5; text-align: center; margin: 0; } } .nav-1 { @extend %main-nav; left: 0; & a { @include translateX($navStubWidth - $navWidth); border-radius: 0 10px 10px 0; } & .icon, & .icon-social { right: 0; } & .descText { padding-right: $navStubWidth; } & header { border-radius: 0 0 10px 0; } @include breakpoint(baby-bear) { float: left; } } .nav-2 { @extend %main-nav; right: 0; & a { @include translateX($navWidth - $navStubWidth); border-radius: 10px 0 0 10px; } & .icon, & .icon-social { left: 0; } & .descText { padding-left: $navStubWidth; } & header { border-radius: 0 0 0 10px; } @include breakpoint(baby-bear) { float: right; }} %main-nav { @include breakpoint(baby-bear) { position: static; width: 50%; & header { border-radius: 0; } & a { @include translateX(0); margin: 2px 0; border-radius: 0; width: auto; } & .icon, & .icon-social { position: static; width: 100%; padding-top: $navHeight * 0.1; height: $navHeight * 0.5; line-height: $navHeight * 0.5; font-size: $navHeight * 0.4; } & .descText { height: $navHeight * 0.4; line-height: $navHeight * 0.4; display: block; padding: 0; font-size: 1.3em; }}} .twitter { background: #0BF; color: white; &:hover { background: #08F;}} .facebook { background: #00F; color: white; &:hover { background: #05C;}} .projects { background: #804; color: white; &:hover { background: #A70;}} .music { background: #084; color: white; &:hover { background: #0A7;}} .blog { background: #3AA; color: white; &:hover { background: #7AC;}} </style>

REALIZADO POR: Jeremy T

ORIGEN DE LA ENTRADA: https://codepen.io/jetpacmonkey/pen/kPPVqP