Menu com abertura lateral em celulares

Views:
CÓDIGO CSS

/*MENU FIXO COM REDES SOCIAIS*/
#fixedheader {
height: 55px; /* ALTURA DO MENU */
position: fixed;
top: 0;
right: 0;
left: 0;
text-align: left;
background: $(tabs.background.color); /* COR DE FUNDO DO MENU */
border-bottom: 1px solid $(tabs.border.color);
z-index: 2;
}
#fixedheader ul{
margin-left: 85px; /* AFASTA O TEXTO DA MARGEM ESQUERDA, ALTERE SE DESEJAR */
}
#fixedheader ul li {
display: inline-block;
padding: 0px 12px; /* 12PX DEFINE A DISTÂNCIA ENTRE AS CASAS */
margin-top: 10px; /* POSICIONA O TEXTO EM RELAÇÃO AO TOPO DO MENU */
}
#fixedheader ul li a{
font: $(tabs.font); /* TIPO DA FONTE DO MENU*/
text-decoration: none;
color: $(tabs.text.color); /* COR DO TEXTO DO MENU */
text-transform: uppercase; /* COLOCA O TEXTO EM MAIÚSCULA, APAGUE SE PREFERIR */
font-weight: 600; /* PESO DA FONTE */
-moz-transition: .3s;
-webkit-transition: .3s;
}
#fixedheader ul li a:hover{
color: $(tabs.selected.text.color); /* COR DO TEXTO DO MENU AO PASSAR O CURSOR */
}
input#control-nav{
display:none;
}
div#social-menu {
position: absolute;
left: 5%;
top: 0;
float: right;
margin-left: 62em;
}
#social-menu a{
color: $(tabs.text.color); /* COR DOS ÍCONES DE REDES SOCIAIS */
margin-left: 12px;
margin-top: 16px;
margin-bottom: 0px;
font-size: 19px;
display: inline-block;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
transition: .25s;
cursor:pointer;
}
#social-menu a:hover{
color: $(tabs.selected.text.color); /* COR DOS ÍCONES DE REDES SOCIAIS AO PASSAR O CURSOR */
}
/* PARTE RESPONSIVA DO MENU */
@media screen and (max-width: 1024px) {
#fixedheader ul{
margin-left: 115px;/* DISTANCIA ENTRE AS CASA */
}
#social-menu a{
font-size: 23px;
}
#fixedheader .control-nav {
position: absolute;
right: 30px;
top: 20px;
display: block;
width: 30px;
padding: 5px 0px;
border: solid $(tabs.text.color);
border-width: 3px 0;
z-index: 2;
cursor: pointer;
}
#fixedheader .control-nav:before {
content: "";
display: block;
height: 3px;
background: $(tabs.text.color); /* COR DO ICONE QUE ABRE O MENU */
}
#fixedheader .control-nav-close {
position: fixed;
right: 0;
top: 0;
bottom: 0;
left: 0;
display: block;
z-index: 1;
background: rgba(0,0,0,0.4); /* COR SEMI TRANSPARENTE DO MENU*/
-webkit-transition: a/ll 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
#fixedheader ul li{
font: $(tabs.font); /* TIPO DA FONTE DO MENU*/
text-decoration: none;
color: #000000 !important; /* COR DO TEXTO DO MENU */
text-transform: uppercase; /* COLOCA O TEXTO EM MAIÚSCULA, APAGUE SE PREFERIR */
font-weight: 600; /* PESO DA FONTE */
-moz-transition: .3s;
-webkit-transition: .3s;
}
#fixedheader nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width:270px; /* LARGURA DO MENU  */
background: $(tabs.background.color); /* COR DE FUNDO DO MENU */
color:  #000000 !important;
text-align: center;
line-height: 4em;
overflow-x: auto;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
div#social-menu{
margin-left: 90em;
}
}
#control-nav:checked ~ .control-nav-close {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#control-nav:checked ~ nav {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
@media screen and (max-width : 1680px) {
div#social-menu {margin-left: 84em; }
}
@media screen and (max-width : 1440px) {
div#social-menu {margin-left: 72em;}
}
@media screen and (max-width : 1366px) {
div#social-menu {margin-left: 62em;}
}
@media screen and (max-width : 1152px) {
div#social-menu {margin-left: 52em;}
}


CÓDIGO HTML

<div id='fixedheader'>
<input id='control-nav' type='checkbox'/>
<label class='control-nav' for='control-nav'/>
<label class='control-nav-close' for='control-nav'/>
<nav>
<ul>
<li><a href='LINK AQUI' title='Home'>Home</a></li>
<li><a href='LINK AQUI' title='Nome da aba'>Nome da aba</a></li>
<li><a href='LINK AQUI' title='Nome da aba'>Nome da aba</a></li>
<li><a href='LINK AQUI' title='Nome da aba'>Nome da aba</a></li>
<li><a href='LINK AQUI' title='Nome da aba'>Nome da aba</a></li>
<li><a href='LINK AQUI' title='Contato'>Contato</a></li>
</ul>
</nav>
<div id='social-menu'>
<a href='https://www.facebook.com/' target='_blank'><i class='fa fa-facebook'/></a>
<a href='https://www.instagram.com/' target='_blank'><i class='fa fa-instagram'/></a>
<a href='https://br.pinterest.com/' target='_blank'><i class='fa fa-pinterest'/></a>
<a href='https://www.youtube.com/' target='_blank'><i class='fa fa-youtube'/></a>
<a href='https://plus.google.com/' target='_blank'><i class='fa fa-google-plus'/></a>
<a href='http://www.twitter.com/' target='_blank'><i class='fa fa-twitter'/></a>
</div>
</div>


CÓDIGO DA FONTE DOS ÍCONES

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>