Comparar texto

Encontre a diferença entre dois arquivos de texto

Editor live
Recolher inalteradas
Sem quebra de linha
Layout
Nível de detalhe
Realce de sintaxe

responsive-menu-without-js

Criado O diff nunca expira
2 remoções
104 linhas
8 adições
109 linhas
/*Configurações Globais*/
/*Configurações Globais*/
html, body {
html, body {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
a {
a {
text-decoration: none;
text-decoration: none;
}
}
li {
li {
list-style: none;
list-style: none;
}
}
/*Início das configurações da header*/
/*Início das configurações da header*/
header {
header {
width: 100%;
width: 100%;
height: 50px;
height: 50px;
line-height: 50px;
line-height: 50px;
text-align: center;
text-align: center;
font-family: sans-serif;
font-family: sans-serif;
background-color: #f1c40f;
background-color: #f1c40f;
}
}
.brand {
.brand {
width: auto;
width: auto;
height: 100%;
height: 100%;
float: left;
float: left;
margin: 0 0 0 5%;
margin: 0 0 0 5%;
}
}
/*Início das configurações da Navigation*/
/*Início das configurações da Navigation*/
.menu {
.menu {
width: 60%;
width: 60%;
height: 100%;
height: 100%;
float: right;
float: right;
}
}
.menu ul {
.menu ul {
width: 100%;
width: 100%;
height: inherit;
height: inherit;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
}
.menu ul a {
.menu ul a {
width: 20%;
height: inherit;
height: inherit;
color: #222;
color: #222;
display: inline-block;
display: block;
}
.menu ul li {
width: 20%;
display: inline-block;
}
}
.menu ul a:hover {
.menu ul a:hover {
background-color: #222;
background-color: #222;
color: #fff;
color: #fff;
}
}
#menuToggle {
#menuToggle {
display: none;
display: none;
}
}
.menu-icon {
.menu-icon {
display: none;
display: none;
}
}
/*Início das configurações da Navigation com dispositivos < 768px*/
/*Início das configurações da Navigation com dispositivos < 768px*/
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
.menu {
.menu {
width: 100%;
width: 100%;
height: auto;
height: auto;
}
}
.menu ul {
.menu ul {
display: block;
display: block;
max-height: 0;
max-height: 0;
overflow: hidden;
overflow: hidden;
-webkit-transition: max-height 0.3s;
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-ms-transition: max-height 0.3s;
-ms-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
transition: max-height 0.3s;
transition: max-height 0.3s;
/*Para fazer com que o menu saia da esquerda, você deve trocar max-height por max-width*/
/*Para fazer com que o menu saia da esquerda, você deve trocar max-height por max-width*/
/*Para fazer com que o menu saia da direita, você deve trocar max-height por max-width e setar float: right*/
/*Para fazer com que o menu saia da direita, você deve trocar max-height por max-width e setar float: right*/
}
}
.menu ul a {
.menu ul li {
text-align: left;
text-align: left;
width: 100%;
width: 100%;
height: 50px;
height: 50px;
}
.menu ul a {
background-color: #f1c40f;
background-color: #f1c40f;
padding: 10px 0px 10px 5%;
padding: 10px 0px 10px 5%;
}
}
.menu-icon {
.menu-icon {
width: 100px;
width: 100px;
height: inherit;
height: inherit;
display: block;
display: block;
position: absolute;
position: absolute;
top: 0;
top: 0;
right: 0;
right: 0;
line-height: 60px;
line-height: 60px;
}
}
#menuToggle:checked ~ ul {
#menuToggle:checked ~ ul {
max-height: 350px;
max-height: 350px;
/*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/
/*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/
}
}
.menu-icon i {
.menu-icon i {
font-size: 1.7em;
font-size: 1.7em;
}
}
}
}


Diferenças salvas