CSS 템플릿 : 고정식 좌측 메뉴

코드만 저장해두고, 완성되면 설명을 적자.
<!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>
GINS WIKI 긴스 위키

목차

CSS 템플릿 : 고정식 좌측 메뉴
