차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- 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_left-menu-sample.gif|}} |
+코드만 저장해두고, 완성되면 설명을 적자.
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="keywords" content="">
+  <meta name="description" content="">
+  <title>왼쪽 메뉴</title>
+  <script src="./lib/jquery-3.6.0.js"></script>
+  <script src="./lib/jquery-ui-1.12.1/jquery-ui.js"></script>
+</head>
+<!-- 문서 시작 ------------------------------- -->
+<body>
+<style>
+/* 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: 300;
+  background: #0d77b6;
+}
+.lm-base .left-menu-title-off {
+  display: none;
+}
+.lm-base>a {
+  display: block;
+  color: #fff;
+  font-size: 1.1em;
+  font-weight: 300;
+}
+.lm-base-vertical {
+  width: 240px;
+  height: 100%;
+  top: 0;
+  z-index: 1000;
+}
+.lm-base-vertical>a {
+  border-bottom: 1px solid #258ecd;
+  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:100px;
+  height:100px;
+  position: fixed;
+  background: #0d77b6;
+}
+</style>
+<div id='tm_top_menu'>
+  <P>히든 메뉴</p>
+</div>
+<div id=sample_box>
+</div>
+<a>클릭A</a> <a>클릭 B</a>
+<nav class="lm-base lm-base-vertical lm-base-left" id="cbp-spmenu-s1">
+  <h3 id="left-menu-title-a">왼쪽 메뉴<a id="lm-btn-show1">&nbsp;[◀]&nbsp;</a></h3>
+  <h3 id="left-menu-title-b" class="left-menu-title-off"><a id="lm-btn-show2">&nbsp;[▶]&nbsp;</a></h3>
+  <a href="#">왼쪽 메뉴 1</a>
+  <a href="#">왼쪽 메뉴 2</a>
+  <a href="#">왼쪽 메뉴 3</a>
+  <a href="#">왼쪽 메뉴 4</a>
+</nav>
+</body>
+<!-- 종료 ------------------------------- -->
+</html>
+<script>
+  $('#lm-btn-show1').click(function () {
+    hide_fixed_leftmenu();
+  });
+  $('#lm-btn-show2').click(function () {
+    hide_fixed_leftmenu();
+  });
+  /* 스크롤무관한 왼쪽 메뉴의 on/off */
+  function hide_fixed_leftmenu() {
+    var _lm = $('.lm-base-left');
+    var _pos = _lm.position();
+    // h3 타이틀 찾아 두기
+    var _h3_a = $('#left-menu-title-a');
+    var _h3_b = $('#left-menu-title-b');
+    //// 방법 3. { "Learning jQuery" : 68 }
+    if (_pos.left < 0) { // 커지는 경우
+      //_h3_a.show(); _h3_b.hide();
+      _lm.animate({ opacity: 0.9, left: "0px" }, 200, "easeOutBack");
+      _h3_a.css({ "text-align": "left" });
+    }
+    else { // 작아지는 경우
+      //_h3_a.hide(); _h3_b.show();
+      _lm.animate({ opacity: 0.4, left: "-200px" }, 200, "easeOutBack");
+      _h3_a.css({ "text-align": "right" });
+    }
+  }
+  jQuery(document).ready(function () {
+    // 문서 로딩이 끝났다면 할 것들
+  });
+</script>
+</code>