web standard/jquery2012. 2. 13. 15:57

수평네비게이션 기초

출처 : http://naradesign.net/wp/2011/07/02/1634/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    var gnbHr = $('.gnbHr');
    gnbHr.find('>ul>li>ul').hide();
    gnbHr.find('>ul>li>a')
        .mouseenter(function(){
            gnbHr
                .find('>ul>li>ul:visible')
                .slideUp(200)
                .parent('li')
                .removeClass('active')
                .find('>a')
                .css('fontWeight','');
            $(this)
                .next('ul:hidden')
                .slideDown(200)
                .parent('li')
                .addClass('active')
                .find('>a')
                .css('fontWeight','bold');
        })
        .focus(function(){
            //$(this).mouseover();
        })
        .end()
        .mouseleave(function(){
            gnbHr
                .find('>ul>li>ul')
                .slideUp(200)
                .prev('a')
                .css('fontWeight','');
        });
});
</script>
</head>

<body>
<div class="gnbHr">
    <ul>
        <li><a href="#">#1</a>
            <ul>
                <li><a href="#">#1-1</a></li>
                <li><a href="#">#1-2</a></li>
            </ul>
        </li>
        <li><a href="#">#2</a>
            <ul>
                <li><a href="#">#2-1</a></li>
                <li><a href="#">#2-2</a></li>
            </ul>
        </li>
        <li><a href="#">#3</a>
            <ul>
                <li><a href="#">#3-1</a></li>
                <li><a href="#">#3-2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

좌우(상하) 슬라이드  (0) 2012.02.29
lnb 슬라이드메뉴  (0) 2012.02.21
수직네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
Posted by 수라

티스토리툴바