헤더 메뉴 클릭시 새로고침 후에도 컬러 유지
본문
헤더메뉴에서 클릭된 a태그만 컬러를 바꿔주고 싶습니다.
페이지마다 다르게 컬러를 주면 되겠지만 그것보다는 헤더 컨텐츠박스에서
누른것만 자동으로 컬러가 변경, 고정 유지되게 하고싶습니다.
방법을 알아보니 제이쿼리 쿠키를 이용해서 하는 방법이 있는 것 같습니다만...
너무 생소해서 모르겠어요 ㅠㅠㅠ
현재 스크립트는
$(".hGnb > ul > li > a").mouseover(function(e) {
e.preventDefault();
$(".hGnb_2dep").stop().fadeOut(100);
$(this).next("ul").stop().fadeIn(100);
});
$(".hGnb_2dep").mouseleave(function(e) {
e.preventDefault();
$(".hGnb_2dep").stop().fadeOut(100);
});
$(".mMenu-left .uk-nav > li > a").click(function(e) {
e.preventDefault();
$(".mMenu-left .uk-nav-sub").stop().slideUp(100);
$(this).next("ul").stop().toggle(100);
$(this).parent("li").addClass("on");
});
$(document).on("hover", ".hGnb > ul > li > a", function(event){
$(this).attr("class","pick");
});
html은
<div class="hGnb">
<ul class="clearboth">
<li><a href="#"></a>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
</ul>
</div>
CSS
.hGnb {width: 100%;}
.hGnb > ul > li {width: 16.666%; float: left;}
.hGnb > ul > li > a {
line-height: 48px;
padding: 0 10px;
font-size: 15px;
font-weight: 500;
color: #ffffff;
text-align: center;
letter-spacing: -0.5px;
transition: all .2s ease-out;
display: block;
}
.hGnb > ul > li > a.on {
color: #666666;
}
.pick {
color: orange !important;
}
.hGnb_2dep {
padding: 10px 0;
box-sizing: border-box;
background: #fff;
display: none;
position: relative;
z-index: 9999;
border: 1px solid #e5e5e5;
}
.hGnb_2dep > li {width: 100%; height: 100%; float: left;}
.hGnb_2dep > li > a {
display: block;
padding: 8px 10px;
font-size: 14px;
font-weight: 500;
color: #777777;
text-align: center;
line-height: 1.3em;
letter-spacing: -0.5px;
transition: all .2s ease-out;
}
.hMenu a:hover, .hGnb > ul > li > a:hover, .hGnb_2dep > li > a:hover {color: orange;}
이렇게 구성되어있습니다.
혹시 쿠키 말고 다른 방법도 있으면 알려주심 감사하겠습니다...ㅜㅡ
답변 2
메뉴를 클릭시 해당 메뉴의 인덱스값을 localStorage에 저장하시고
해당 인덱스값이 존재한다면 그 해당에 맞는 인덱스메뉴의 컬러를 유지하시면 되겠네요.
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
예제및속성확인해보세요.
특정한 앵커(#)나
페이지 이동되었다면 해당부분에 파라미터를 주어
앵커또는 파라미터를 갖고있다면(IF문)
해당메뉴를 active라는 클래스를 만들어 주셔도 될 듯
합니다.
답변을 작성하시기 전에 로그인 해주세요.
