[jQuery] 순차적으로 내려오는 라인 서브메뉴
정확하게 제목을 쓴 것인지 모르겠는데.. 아래 그림을 보면 이해가 쉽지 않을까 싶다.
간단하게 테스트해보려고 만든 것인데 1번 메뉴가 보인 후 2번.. 이런 식으로 5번까지 메뉴가 순차적으로 위에서
아래로 내려오면서 보이게 되는 것을 구현하고 싶었다. 구글링을 통해서 간단한 소스를 찾기도 했는데 IE8에서
이상하게 작동을 해서 이 부분을 수정할 수 없을까 고민하다가 내 식대로 그냥 하나 코드를 짜게 되었다.
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #fff; font-size: 12px; }
ul { float: left; margin: 0; padding: 0; list-style: none; }
li { float: left; width: 100px; height: 20px; background-color: #f1f1f1; text-align: center; line-height: 20px; color: #333; font-weight: bold; margin-right: 5px; margin-top: -20px; }
li.last { width: 1px; }
div { float: left; width: 700px; height: 20px; overflow-y: hidden; }
</style>
<script src=”./js/jquery-1.7.2.min.js”></script>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class=”last”>6</li>
</ul>
</div>
<script>
var i = 0;
var max = 0;
$(function() {
max = $(‘li’).size() – 1;
animate_menu(0);
});
function animate_menu(idx)
{
$(‘li’).eq(idx).animate(
{ “margin-top”: 0 }, 200,
function() {
idx++;
if(idx < max) {
animate_menu(idx);
}
}
);
}
</script>
</body>
</html>
이 코드를 실행했을 때 IE8에서는 마지막 5번이 나온 후 1번부터 4번이 한번 더 아래로 내려가서 아예 보이지 않는
문제가 생겼는데 그것을 해결하기 위해서 마지막 6이라는 메뉴를 넣고 그건 애니메이션이 적용되지 않도록 코드를
만들어서 문제를 해결했다. 의미도 없는 6번 li를 넣는 것이 마음에 들지 않았지만 지금으로써는 이 방법 밖에 없어서
조금 더 연구해보면 다른 방법이 있지 않을까도 싶은데.. position을 이용한 방법도 테스트를 했는데 IE6과 IE7에서
원하는 결과가 나오지 않아서 결국은 이 방법을 쓰자고 정했다. 이런 거 자꾸 만들면 나만 피곤해지는데.. ㅋㅋ
넘 멋지십니다
찾고 있던건데 한번 수정해서 잘 사용해 볼게요^^좋은 하루되십시오~
블로그 방문해 주셔서 감사합니다.
허접한 코드라서 에러가 있을 수 있습니다. ^^; 좋은 하루되세요..