[jQuery] Select Box 스타일 Family Site 링크
오늘 만들고자 했던 것은 Select Box 스타일의 Family Site 링크 부분이다. 아래 이미지와 같다.
기존까지는 html select 태그와 자바스크립트를 이용해서 작업을 했는데.. 이 방식이 팝업이 차단되어 있는
브라우저에서는 새창이 뜨지 않는 문제가 있고 또 select 태그는 스타일 적용도 쉽지 않아 div를 이용해 새롭게
만들어 봤다. jQuery의 .animate() 를 이용해서 위로 천천히 올라오는 모습으로 구현을 했다.
#Bottom #BottomArea #familySite { position: absolute; top: -96px; right: 0; width: 108px; height: 100px; z-index: 30; overflow: hidden; display: none; }
#Bottom #BottomArea #familySite #fWrap { position: absolute; top: 100px; width: 108px; height: 100px; background: #2b2b2b; }
#Bottom #BottomArea #familySite #fWrap #fSite { position: absolute; top: 5px; left: 5px; width: 98px; height: 90px; z-index: 30; overflow-x: hidden; overflow-y: auto; font-size: 11px; }
#Bottom #BottomArea #familySite #fWrap #fSite ul { margin: 0; padding: 0; list-style: none; }
#Bottom #BottomArea #familySite #fWrap #fSite li { padding-bottom: 3px; white-space: nowrap; }
a.familysite:link, a.familysite:active, a.familysite:visited { color: #ccc; text-decoration: none; }
a.familysite:hover { text-decoration: underline; }
#Bottom #BottomArea #familySite #fWrap { position: absolute; top: 100px; width: 108px; height: 100px; background: #2b2b2b; }
#Bottom #BottomArea #familySite #fWrap #fSite { position: absolute; top: 5px; left: 5px; width: 98px; height: 90px; z-index: 30; overflow-x: hidden; overflow-y: auto; font-size: 11px; }
#Bottom #BottomArea #familySite #fWrap #fSite ul { margin: 0; padding: 0; list-style: none; }
#Bottom #BottomArea #familySite #fWrap #fSite li { padding-bottom: 3px; white-space: nowrap; }
a.familysite:link, a.familysite:active, a.familysite:visited { color: #ccc; text-decoration: none; }
a.familysite:hover { text-decoration: underline; }
CSS 파일의 일부분이다. 사이트 링크가 보여질 부분과 사이트 링크 리스트에 관련된 스타일이 들어가 있다.
<div id=”family”><img src=”<?=$g4[img_path]?>/family_site.png” /></div>
<div id=”familySite”>
<div id=”fWrap”>
<div id=”fSite”>
<ul>
<li><a href=”http://www.koic.or.kr/” target=”_blank” class=”familysite”>한국인테리어산업협동조합></a></li>
<li><a href=”http://www.egonggan.com” target=”_blank” class=”familysite”>e-공간엔</a></li>
</ul>
</div>
</div>
</div>
<div id=”familySite”>
<div id=”fWrap”>
<div id=”fSite”>
<ul>
<li><a href=”http://www.koic.or.kr/” target=”_blank” class=”familysite”>한국인테리어산업협동조합></a></li>
<li><a href=”http://www.egonggan.com” target=”_blank” class=”familysite”>e-공간엔</a></li>
</ul>
</div>
</div>
</div>
사이트 리스트를 구성하는 Div 페이지의 일부분이다. 일반적인 링크 스타일이기 때문에 새창에서 문제가 없다.
$(‘div#family’).click(function() {
if($(‘div#fWrap’).is(“.fVisible”)) {
$(‘div#fWrap’).animate({top: ‘100’}, “slow”, function() {
$(this).removeClass(“fVisible”);
$(‘div#familySite’).hide();
});
} else {
$(‘div#familySite’).show();
$(‘div#fWrap’).animate({top: ‘0’}, “slow”, function () {
$(this).addClass(“fVisible”);
});
}
});
if($(‘div#fWrap’).is(“.fVisible”)) {
$(‘div#fWrap’).animate({top: ‘100’}, “slow”, function() {
$(this).removeClass(“fVisible”);
$(‘div#familySite’).hide();
});
} else {
$(‘div#familySite’).show();
$(‘div#fWrap’).animate({top: ‘0’}, “slow”, function () {
$(this).addClass(“fVisible”);
});
}
});
버튼을 클릭했을 때 애니메이션을 만드는 부분이다. 사이트 링크가 열려있는지 체크하기 위해서 fVisible 라는
가상의 클래스를 이용하고 있다. 좀 더 간단한 방법이 있을 것도 같은데 지금 당장은 생각이 나지 않고 있다. ^^;