[비그누]레이어 액션 관련
본문
안녕하세요.
그누관련 질문이 아니라 죄송합니다.
구글링해도 해답을 못찾아 물어볼때도 없어서 염치없이 이곳에 남깁니다.
위 티스토리 블로그를 수정중에 있습니다.
PC로 봐주세요.
우측상단에 카테고리를 나타내는 것이 있습니다.
클릭하면 레이어가 펼쳐지고
다시 클릭하면 레이어가 닫힙니다.
제가 원하는건 처음부터 레이어가 펼쳐져 있고
다시 클릭했을땐 접히게 하고 싶습니다
css를 봐야 하는건지? 어디를 봐야하는건지?
좀 알려주시면 감사하겠습니다.
css를 뚤어지게 쳐다봐도 잘 모르겠네요.
감사합니다.
답변 5
아래 두 이미지를 보시면
메뉴 레이어에 클래스가 list_cate만 있으면 안보여지게 CSS 코딩이 되어 있고,
on 클래스가 추가되어야 보이게 되어 있다는 것을 알 수 있습니다.
이미 CSS에서 다 준비해두었음으로 아래와 같이 하시면 됩니다.
1. 블로그 방문시 열려있게 하려면 HTML 코딩하실때 아래와 같이 해두시면 열려있을 겁니다.
<div role="navigation" class="area_navi">
<button type="button" class="btn_cate">CATEGORY <span class="ico_skin ico_cate"></span></button>
<div class="list_cate on"> <!-- on class를 추가해두기 -->
[##_category_list_##]
<ul class="menu_profile">
2. jQuery의 toggle 함수를 이용하여 클릭될때마다 반전되게 합니다.
// 아래 함수를 jquery의 시작 또는 적당한 부분에 넣어주세요.
$( document ).ready(function() {
.................
$(".list_cate").toggleClass("on");
..................
});
친절한 답변 감사합니다.
그런데 누었다가 답변 달린것 보고 벌떡 일어나서 적용해 봤는데.
1. 첫번째 이미지 같이 코딩때 on을 넣어 봤는데 .... 안 펼쳐져 있네요.
현재 소스 넣어 둔 상태 입니다. 샘플페이지
2. 두번째것은 어디에 어떻게 해야 하는지 몰라서 적용은 안했습니다.
일단 1번을 성공후 해 봐도 될것 같아서요. 2번이 안되면 1번 기능만으로 만족 할 수 있어서요.
늦은밤 감사합니다.
전 내일 다시 새벽에 일어나 출근해야 되서 일단 다시 잠을청해야 겠습니다.
좋은 하루 되세요. ^^
* 1번은 아래쪽에... 2번 내용과 이어져서...
* 2번 내용 수정.
아... 저도 잠결에 작성하다보니 2번째거는 좀 잘 못되어 있네요.
이렇게 수정하시면 될것같아요.
2.1. 카테고리 버튼에 id="toggleMenuLayer" 추가하시구요.
2.2. 하단 스크립트 쪽에 한 줄 더 넣으세요.
<div role="navigation" class="area_navi">
<button type="button" id="toggleMenuLayer" class="btn_cate">CATEGORY <span class="ico_skin ico_cate"></span></button>
<div class="list_cate on"> <!-- on class를 추가해두기 -->
<ul class="tt_category"
...................... 중략 ............................
<script src="https://tistory3.daumcdn.net/tistory/4075480/skin/images/script.js"></script>
<script>
(function($) {
$.Area.init();
})(jQuery);
// 위 구문 검색하셔서 이쯤에 이렇게 넣으시면 될 겁니다.
$("#toggleMenuLayer").click(function(){ $(".list_cate").toggleClass("on") });
// 강제로 카테고리 레이어를 열어주는 부분
$("#toggleMenuLayer").click();
</script>
* 1번 내용 수정...
만약 on을 넣어도 안펼쳐진다면 소스내에 다른 스크립트가 초기화시에 닫혀있도록 조정하는 것입니다. 이 경우 스크립트로 강제로 펼쳐주어야죠.
만약 그래도 안열린다면... .list_cate를 닫힌상태로 초기화 해주는 부분을 찾아 열려있게 하는 것도 방법입니다.
감사합니다.
야근 하고 조금 전에 집에와서 적용해 보니 바로 되네요.
오늘 하루 피로가 싹 다 사라지는 것 같네요.
감사합니다.
클릭하면 id="mEtc" 에 style="display:none"을 넣어주면 해당 되는 Div가 안보이게 됩니다.
여기서 움직이는 효과를 넣을려면 transition 값을 검색해서 애니메이션 효과를 넣어주세요
위 티스토리 블로그에서 id="mEtc" 를 찾아서 위 스타일을 넣어주니 하단의 footer 부분이 안보입니다.
제 질문은 우측 카테고리를
기본: 클릭하면 레이어가 펼쳐짐
이것을 블로그 처음 방문하면 처음부터 우측 상단의 카테고리가 펼쳐져 있기(클릭된듯)를 바라는 것입니다.
제 질문이 설명이 부족했나 봅니다.
혹시 이부분 다시 봐주실 수 있으신가요?
분명 아래 부분인데 말입니다.
클릭하면 펼쳐지고 다시 클릭하면 접히고를 반복하는데..
처음을 펼쳐져 있게 하고 싶은데...말입니다.
<div role="navigation" class="area_navi">
<button type="button" class="btn_cate">CATEGORY <span class="ico_skin ico_cate"></span></button>
<div class="list_cate">
[##_category_list_##]
<ul class="menu_profile">
<li><a href="[##_guestbook_link_##]">방명록</a></li>
</ul>
</div>
</div>
</div>
가장 좋은 방법은 말보다는 그림으로 해 주시는 것이 좋습니다.
처음 접속시 이렇게 나오게 하고 싶다는 것이죠
클릭하면 없어지고
지금 코드에서 보시면 클릭을 하면 크롬 디벨러퍼에서 보면
class="area_navi" 이 class="area_navi on" 으로 변경됩니다.
이것을 반대로 컨트롤하시면 됩니다.
죄송합니다. 다음엔 저도 설명을 좀더 자세히 하도록 하겠습니다.
이론적으로 무슨 말인지 알겠는데...개발자가 아니다 보니 적용을 못하겠습니다.
늦은 시간 답변 감사합니다.
전 잠시 후 새벽 출근이라 잠을 조금이라도 자야겠습니다.
그럼 좋은 하루 되세요.
아래 두 이미지를 보시면
메뉴 레이어에 클래스가 list_cate만 있으면 안보여지게 CSS 코딩이 되어 있고,
on 클래스가 추가되어야 보이게 되어 있다는 것을 알 수 있습니다.
이미 CSS에서 다 준비해두었음으로 아래와 같이 하시면 됩니다.
1. 블로그 방문시 열려있게 하려면 HTML 코딩하실때 아래와 같이 해두시면 열려있을 겁니다.
<div role="navigation" class="area_navi">
<button type="button" class="btn_cate">CATEGORY <span class="ico_skin ico_cate"></span></button>
<div class="list_cate on"> <!-- on class를 추가해두기 -->
[##_category_list_##]
<ul class="menu_profile">
2. jQuery의 toggle 함수를 이용하여 클릭될때마다 반전되게 합니다.
// 아래 함수를 jquery의 시작 또는 적당한 부분에 넣어주세요.
$( document ).ready(function() {
.................
$(".list_cate").toggleClass("on");
..................
});
