사이드바 내비게이션을 활성화하면 기본적으로 사이드바가 표시되고, 사용자가 메뉴 아이콘을 처음 클릭하면 사이드바가 숨겨집니다.
이 설정을 반대로 변경할 수 있을까요? 즉, 페이지가 처음 로드될 때 랜딩 페이지가 전체 너비로 표시되고, 사용자가 메뉴 아이콘을 클릭하면 사이드바가 나타나도록 하는 것입니다.
사이드바 내비게이션을 활성화하면 기본적으로 사이드바가 표시되고, 사용자가 메뉴 아이콘을 처음 클릭하면 사이드바가 숨겨집니다.
이 설정을 반대로 변경할 수 있을까요? 즉, 페이지가 처음 로드될 때 랜딩 페이지가 전체 너비로 표시되고, 사용자가 메뉴 아이콘을 클릭하면 사이드바가 나타나도록 하는 것입니다.
사이드바가 aria-expanded 속성에 의해 제어되는 것 같으므로, 이는 어느 정도 유사합니다.
공유해 주셔서 감사합니다! 이 접근 방식이 될 것 같습니다:
<script>
$(document).ready(function(){
jQuery(function(){
jQuery('button.btn-sidebar-toggle).click();
});
})
</script>
이 코드는 사이드바가 숨겨진 상태로 슬라이드하도록 합니다. 즉, 문서가 준비될 때 자동으로 애니메이션이 실행되는데, 이는 이상적이지 않습니다.
사실 저는 사이드바가 aria 속성에 의해 제어된다고 생각해서, 다음을 시도해 보았습니다:
<script>
$(document).ready(function(){
$("button.btn-sidebar-toggle").attr("aria-expanded","false");
})
</script>
하지만 이 속성은 상태를 제어하는 것이 아니라 상태만을 나타내는 것입니다. 따라서 이 스니펫은 속성은 변경하지만 상태는 변경하지 않습니다 ![]()
Nolo님, 안녕하세요!
이를 구현하기 위해 컴포넌트를 만들었습니다. 도움이 되길 바랍니다 ![]()
오, 정말 도움이 되네요!
제가 막연히 시도해 보긴 했는데, 결국 작동이 안 됐거든요..
공유해 주셔서 정말 감사합니다 @Don ![]()
당신, 돈! 정말 훌륭해요!