로그인

검색

Extra Form
추천지수 6

저희 라이믹스 꿀팁에 사용하고 있는 Flex 레이아웃 사용하기 편리하고 예뻐서 굉장히 만족해서 쓰고 있습니다. 사실 커스텀도 조금을 진행했습니다. 메뉴도 상단의 풀다운 메뉴를 제거하고 모바일에서 사용하는 방식의 메뉴를 PC에도 이식에서 좌측에 나오도록 했습니다. 이렇게 한 이유는 상단에 애드센스 광고를 배치하면 서 풀다운 메뉴가 가리는 문제를 회피하기 위해서 였습니다.

 

사이드 쪽에 있는 메뉴를 보시면 2차메뉴를 보기위해 펼치는 버튼이 있는데 이게 펼치거나 접거나 같은 아이콘으로 쓰다보니 조금 빠른 인식이 어려운 면이 있어 두개의 아이콘으로 토글되는 방식으로 커스텀 해보았습니다. 

 

모바일에서도 함께 적용이 되는 것이니 모바일쪽에 적용하고 싶다면 한번 참조해 보세요.

 

스크린샷(124).png

 

접지 않을때는 위와 같이  Up 아이콘이 보이도록 했습니다. (참고로 저희는 기본적으로 모두 펼쳐지도록 커스텀을 한 상태입니다.)

 

 

 

 

 

스크린샷(125).png

 

접게 되면 접혀진 메뉴만 아이콘이 Down 아이콘으로 전환이 되게 했습니다. 이렇게 하면 내가 눌렀을때 접혀질 건지 펼쳐질 건지 구분이 쉽게 되겠죠.

 

 

/layouts/flex/components/header/header-menu/header-menu.html

레이아웃의 위와 같은 파일에 보면 아래와 같은 내용이 있습니다. 수정해야 할 부분만 가져왔습니다.

 

 

 <nav class="app-header-menu-nav" cond="$global_menu->list">
      <ul>
        <li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']" is-divider|cond="$val1['link'] == '/'">
          <div class="app-header-menu-nav-item active">
            <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">
              <ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon>
              <span>{$val1['link']}</span>
            </a>
      
            <ion-icon cond="$val1['list']" name="chevron-down-outline" class="app-header-menu-nav-more nonactive"></ion-icon>
            <ion-icon cond="$val1['list']" name="chevron-up-outline" class="app-header-menu-nav-more active"></ion-icon>
          </div>

          <div cond="$val1['list']" class="app-header-menu-nav-child active">
            <ul>
              <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']" is-divider|cond="$val2['link'] == '/'">
                <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">
                  <ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon>
                  <span>{$val2['link']}</span>
                </a>
              </li>
            </ul>
          </div>

        </li>
      </ul>
</nav>

 

 

붉은색은 부분은 저 부분만 추가한 것이고 파란색은 완전히 새롭게 추가된 것입니다.

 

 

 

그리고 

 

/layouts/flex/components/header/header-menu/header-menu.js

 

의 파일을

 

jQuery(function($) {
  $('.app-header-menu__toggle').on('click', function() {
    $('.app-header-menu').toggleClass('active')
  })

  $('.app-header-menu-nav-more').on('click', function() {
    $(this).parent().next().toggleClass('active nonactive');
     $(this).parent().toggleClass('active nonactive')
  })
})

 

이렇게 수정해줍니다. 아래쪽만 수정되었어요.

 

 

그 다음 마지막으로 

 

/layouts/flex/components/header/header-menu/header-menu.scss

 

위 파일의 맨 하단에

 

.app-header-menu-nav-item.active .nonactive,
.app-header-menu-nav-item.nonactive .active {display: none;}

 

요렇게 추가를 해줘서 상황에 맞게 가려주면서 토글되게 해주면 됩니다.

?

라이믹스 팁

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. Read More
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
Board Pagination Prev 1 2 Next
/ 2