$$config title: [css] 모바일 화면 구현 keywords: - IT - ... $$ # html - `.mobile-menu-box-1>ul>li*10>a{1차 메뉴 아이템 $$}` ```html

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore dolorem nostrum doloremque tenetur exercitationem vel non, dignissimos distinctio placeat consequuntur maxime quis alias. Delectus numquam dicta pariatur dolorum atque. Cupiditate dolorem provident possimus nam similique quia necessitatibus neque consequuntur at debitis mollitia optio ipsum totam earum, blanditiis aut quisquam. Consectetur cumque culpa consequuntur laboriosam ratione unde maiores mollitia sint? Inventore deleniti velit facilis animi tenetur veritatis ipsam sunt recusandae ea dolorem? Odit voluptatem quos quam accusamus asperiores necessitatibus neque ducimus nobis natus, ab et fuga sunt pariatur unde quidem. Qui, quasi beatae laboriosam cumque ipsam corporis quos nisi doloremque exercitationem placeat rerum accusantium accusamus numquam laudantium labore perspiciatis. Voluptas aspernatur eveniet accusamus iste aliquam praesentium atque labore nemo laboriosam. Odio, placeat eveniet! Assumenda maxime dolores quaerat, cum esse modi nemo repellat ipsam ut voluptate voluptatum ipsum nulla temporibus. Autem accusantium ratione libero eligendi voluptatibus debitis voluptates consequatur ea dicta! Iusto ullam vero quisquam, aspernatur et quasi accusantium neque quos nihil perspiciatis dolorum eum earum debitis placeat! Sunt, velit, numquam nostrum ea animi alias neque quod expedita voluptate, eaque earum. Voluptate blanditiis facere ad ex velit commodi, eos accusamus voluptatum atque cumque, nesciunt exercitationem obcaecati nostrum itaque perferendis ipsam facilis doloribus assumenda quis, odio est et sit necessitatibus. Voluptas, quo. Sunt aliquid minus id laboriosam, aperiam odio placeat ipsam accusantium vel, vero neque voluptatem maxime, similique dolor natus facere consectetur illum! Odit beatae minus voluptates consequatur corporis. Magni, cum deleniti. Labore dolor deserunt excepturi reprehenderit distinctio corrupti facilis sapiente ducimus tempora inventore officiis magnam ipsa voluptatem, consequatur laborum atque fuga eaque voluptates? Veritatis incidunt id inventore dolor quam, fugit vero! Beatae repellat ut nisi perferendis quod temporibus rem laborum nesciunt. Officiis similique minima labore reprehenderit animi beatae iusto accusantium quibusdam quasi, vel voluptatibus nulla veritatis vitae corrupti sunt suscipit vero.

``` # css ```css body { min-height:500vh; } @media (max-width: 767px) { html.mobile-side-bar-actived, html.mobile-side-bar-actived > body { overflow:hidden; } } .mobile-side-bar { transition: visibility 0.3s, opacity 0.3s; background-color:rgba(0,0,0,0.5); } .mobile-side-bar.active { visibility: visible; opacity: 1; } .mobile-side-bar__content { transform: translateX(100%); transition: transform 0.3s; } .mobile-side-bar.active .mobile-side-bar__content { transform: translateX(0); } .mobile-side-bar__btn-close > div { top:40%; transform:rotate(-45deg); } .mobile-side-bar__btn-close > div:last-child { transform:rotate(45deg); } .mobile-menu-box-1 > ul ul { display: none; margin-left: 20px; background-color:rgba(170, 170, 170, 0.3) } .mobile-menu-box-1 ul > li.active > ul { display: block; } .mobile-menu-box-1 ul > li > a { display: block; padding: 20px; } .mobile-menu-box-1 ul > li.active > a:not(:only-child) { color: red; text-decoration: underline; } .mobile-menu-box-1 ul > li > a::after { float:right; } .mobile-menu-box-1 ul > li > a:not(:only-child)::after { content:" [+]"; } .mobile-menu-box-1 ul > li.active > a:not(:only-child)::after { content:" [-]"; } .mobile-menu-box-1 ul > li > a:only-child::after { content:" >"; } ``` # javascript ```javascript function MobileHeader__init() { $('.mobile-header__menu').click(function() { $('.mobile-side-bar').addClass('active'); $('html').addClass('mobile-side-bar-actived'); }); } function MobileSideBar__init() { $('.mobile-side-bar').click(function() { $('.mobile-side-bar').removeClass('active'); $('html').removeClass('mobile-side-bar-actived'); }); $(".mobile-side-bar__content").click(function() { return false; }) $(".mobile-side-bar__btn-close").click(function() { $('.mobile-side-bar').removeClass('active'); $('html').removeClass('mobile-side-bar-actived'); }) } function MobileMenuBox1__init() { $(".btn-1").click(function() { MobileMenuBox1__show(); }); $("body").click(function() { MobileMenuBox1__hide(); }); $("section").click(function() { return false; }); $(".mobile-menu-box-1 ul > li").click(function() { let $this = $(this); $this.siblings(".active").find(".active").removeClass("active"); $this.siblings(".active").removeClass("active"); if ($this.hasClass("active")) { $this.find(".active").removeClass("active"); $this.removeClass("active"); } else { $this.addClass("active"); } }); $(".mobile-menu-box-1 ul").click(function() { return false; }); } function MobileMenuBox1__show() { $(".mobile-menu-box-1").addClass("active"); } function MobileMenuBox1__hide() { $(".mobile-menu-box-1 .active").removeClass("active"); $(".mobile-menu-box-1").removeClass("active"); } MobileHeader__init(); MobileSideBar__init(); MobileMenuBox1__init(); ```