Menu toggle button with flat menu. Uses CSS transitions and Vanilla JS.
A Pen by Geoffrey Crofte on CodePen.
| $icons: "facebook", "twitter", "instagram"; | |
| $size: 1.2em; | |
| @each $icon in $icons { | |
| .ico{ | |
| display: block; | |
| &:before{ | |
| content: ''; | |
| display: block; | |
| width: $size; |
| <!-- | |
| icon 만들기 : http://iconverticons.com/online/ | |
| 아이폰 : apple-touch-icon | |
| 안드로이드 : shortcut icon | |
| --> | |
| <link rel="shortcut icon" href="${cp}/images/common/app_icon1.icon" /><!-- size:48x48 --> | |
| <link rel="apple-touch-icon" href="${cp}/images/common/app_icon2.png" /><!-- size:114x114 --> |
| # Compass 플러그인 추가 | |
| # CSS 파일 기본 인코딩(Default Encoding) 설정 | |
| # Windows에서 한글, 일어, 중국어 등 SCSS 파일을 CSS로 컴파일 시 문자 인코딩 에러가 생길 경우 | |
| # 아래 코드를 설정하여 기본 인코딩을 UTF-8로 설정하면 문제가 해결됨. | |
| Encoding.default_external = "utf-8" | |
| # 프로젝트 내 폴더 경로 지정 | |
| http_path = "/" | |
| css_dir = "css" |
| $ie8: false !default; | |
| $ie9: false !default; | |
| $lt-ie9: $ie7 or $ie8; | |
| // Compass cross-browser support configuration | |
| // http://compass-style.org/reference/compass/support/ | |
| $legacy-support-for-ie6: false; | |
| $legacy-support-for-ie7: $ie7; | |
| $legacy-support-for-ie8: $ie8; |
| IE6 Only | |
| ================== | |
| _selector {...} | |
| IE6 & IE7 | |
| ================== | |
| *html or { _property: } | |
| IE7 Only | |
| ================== |