テキスト比較

2 つのテキストファイルの違いを見つける

ライブエディター

未変更行を折りたたむ

折り返しなし

レイアウト

比較精度

シンタックスハイライト

Diffchecker Desktop Diffcheckerを実行する最も安全な方法。Diffchecker Desktopアプリを入手：あなたの差分はコンピューターから出ることはありません！Desktopを入手

responsive-menu-without-js

作成日 6 年前差分は期限切れになりません

2 削除

行
合計
削除

文字
合計
削除

この機能を引き続き使用するには、アップグレードしてください Diffchecker Pro 価格を見る

104 行

8 追加

行
合計
追加

文字
合計
追加

この機能を引き続き使用するには、アップグレードしてください Diffchecker Pro 価格を見る

109 行

/*Configurações Globais*/

html, body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

li {

list-style: none;

}

/*Início das configurações da header*/

header {

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

font-family: sans-serif;

background-color: #f1c40f;

}

.brand {

width: auto;

height: 100%;

float: left;

margin: 0 0 0 5%;

}

/*Início das configurações da Navigation*/

.menu {

width: 60%;

height: 100%;

float: right;

}

.menu ul {

width: 100%;

height: inherit;

margin: 0;

padding: 0;

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.menu ul a {

width: 20%;

height: inherit;

color: #222;

display: inline-block;

display: block;

}

.menu ul li {

width: 20%;

display: inline-block;

}

.menu ul a:hover {

background-color: #222;

color: #fff;

}

#menuToggle {

display: none;

}

.menu-icon {

display: none;

}

/*Início das configurações da Navigation com dispositivos < 768px*/

@media screen and (max-width: 768px) {

.menu {

width: 100%;

height: auto;

}

.menu ul {

display: block;

max-height: 0;

overflow: hidden;

-webkit-transition: max-height 0.3s;

-moz-transition: max-height 0.3s;

-ms-transition: max-height 0.3s;

-o-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 direita, você deve trocar max-height por max-width e setar float: right*/

}

.menu ul a {

.menu ul li {

text-align: left;

width: 100%;

height: 50px;

}

.menu ul a {

background-color: #f1c40f;

padding: 10px 0px 10px 5%;

}

.menu-icon {

width: 100px;

height: inherit;

display: block;

position: absolute;

top: 0;

right: 0;

line-height: 60px;

}

#menuToggle:checked ~ ul {

max-height: 350px;

/*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/

}

.menu-icon i {

font-size: 1.7em;

}

保存された差分

原文

ファイルを開く

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

変更されたテキスト

ファイルを開く

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