language:css:css_템플릿_고정식_좌측_메뉴
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
다음 판 | 이전 판 | ||
language:css:css_템플릿_고정식_좌측_메뉴 [2021/06/05 20:42] – 만듦 kieuns | language:css:css_템플릿_고정식_좌측_메뉴 [2024/04/23 22:44] (현재) – 바깥 편집 127.0.0.1 | ||
---|---|---|---|
줄 3: | 줄 3: | ||
====== CSS 템플릿 : 고정식 좌측 메뉴 ====== | ====== CSS 템플릿 : 고정식 좌측 메뉴 ====== | ||
+ | | {{: | ||
+ | 코드만 저장해두고, | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | <!-- 문서 시작 ------------------------------- --> | ||
+ | < | ||
+ | |||
+ | < | ||
+ | /* General styles for all menus */ | ||
+ | .lm-base { | ||
+ | /* left menu base */ | ||
+ | background: #47a3da; | ||
+ | position: fixed; | ||
+ | } | ||
+ | |||
+ | .lm-base h3 { | ||
+ | color: #afdefa; | ||
+ | font-size: 1.9em; | ||
+ | padding: 10px; | ||
+ | margin: 0; | ||
+ | font-weight: | ||
+ | background: #0d77b6; | ||
+ | } | ||
+ | |||
+ | .lm-base .left-menu-title-off { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .lm-base> | ||
+ | display: block; | ||
+ | color: #fff; | ||
+ | font-size: 1.1em; | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | .lm-base-vertical { | ||
+ | width: 240px; | ||
+ | height: 100%; | ||
+ | top: 0; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | .lm-base-vertical> | ||
+ | border-bottom: | ||
+ | padding: 1em; | ||
+ | } | ||
+ | |||
+ | /* Vertical menu that slides from the left or right */ | ||
+ | .lm-base-left { | ||
+ | left: 0px; | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #sample_box { | ||
+ | left:50px; | ||
+ | right:50px; | ||
+ | width: | ||
+ | height: | ||
+ | position: fixed; | ||
+ | background: #0d77b6; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | <div id=' | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | <div id=sample_box> | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | |||
+ | <nav class=" | ||
+ | <h3 id=" | ||
+ | <h3 id=" | ||
+ | <a href="#"> | ||
+ | <a href="#"> | ||
+ | <a href="#"> | ||
+ | <a href="#"> | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | <!-- 종료 ------------------------------- --> | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | $('# | ||
+ | hide_fixed_leftmenu(); | ||
+ | }); | ||
+ | $('# | ||
+ | hide_fixed_leftmenu(); | ||
+ | }); | ||
+ | |||
+ | /* 스크롤무관한 왼쪽 메뉴의 on/off */ | ||
+ | function hide_fixed_leftmenu() { | ||
+ | var _lm = $(' | ||
+ | var _pos = _lm.position(); | ||
+ | |||
+ | // h3 타이틀 찾아 두기 | ||
+ | var _h3_a = $('# | ||
+ | var _h3_b = $('# | ||
+ | |||
+ | |||
+ | //// 방법 3. { " | ||
+ | if (_pos.left < 0) { // 커지는 경우 | ||
+ | // | ||
+ | _lm.animate({ opacity: 0.9, left: " | ||
+ | _h3_a.css({ " | ||
+ | } | ||
+ | else { // 작아지는 경우 | ||
+ | // | ||
+ | _lm.animate({ opacity: 0.4, left: " | ||
+ | _h3_a.css({ " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | jQuery(document).ready(function () { | ||
+ | // 문서 로딩이 끝났다면 할 것들 | ||
+ | }); | ||
+ | </ | ||
+ | </ |
language/css/css_템플릿_고정식_좌측_메뉴.1622893328.txt.gz · 마지막으로 수정됨: 2024/04/23 22:43 (바깥 편집)