html折叠导航菜单,JS实现移动端可折叠导航菜单（现代都市风）

效果图

1.html部分

index

2.css部分

/*basic*/

@import "https://fonts.googleapis.com/css?family=Raleway:200,500,700,800";

@font-face {

font-family:icomoon;

src:url(../fonts/icomoon.eot?rretjt);

src:url(../fonts/icomoon.eot?#iefixrretjt) format('embedded-opentype'),

url(../fonts/icomoon.woff?rretjt) format('woff'),

url(../fonts/icomoon.ttf?rretjt) format('truetype'),

url(../fonts/icomoon.svg?rretjt#icomoon) format('svg');

font-weight:400;

font-style:normal

}

[class^=icon-],[class*=" icon-"] {

font-family:icomoon;

speak:none;

font-style:normal;

font-weight:400;

font-variant:normal;

text-transform:none;

line-height:1;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale

}

body,html {

font-size:100%;

padding:0;

margin:0

}

*,*:after,*:before {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box

}

.clearfix:before,.clearfix:after {

content:" ";

display:table

}

.clearfix:after {

clear:both

}

body {

background:#f9f7f6;

color:#404d5b;

font-weight:500;

font-size:1.05em;

font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

}

a {

color:#2fa0ec;

text-decoration:none;

outline:none

}

a:hover,a:focus {

color:#74777b

}

.htmleaf-container {

margin:0 auto;

text-align:center;

overflow:hidden

}

.htmleaf-content {

font-size:150%;

padding:1em 0

}

.htmleaf-content h2 {

margin:0 0 2em;

opacity:.1

}

.htmleaf-content p {

margin:1em 0;

padding:5em 0 0;

font-size:.65em

}

.bgcolor-1 {

background:#f0efee

}

.bgcolor-2 {

background:#f9f9f9

}

.bgcolor-3 {

background:#e8e8e8

}

.bgcolor-4 {

background:#2f3238;

color:#fff

}

.bgcolor-5 {

background:#df6659;

color:#521e18

}

.bgcolor-6 {

background:#2fa8ec

}

.bgcolor-7 {

background:#d0d6d6

}

.bgcolor-8 {

background:#3d4444;

color:#fff

}

.bgcolor-9 {

background:#ef3f52;

color:#fff

}

.bgcolor-10 {

background:#64448f;

color:#fff

}