아는 것이 좋은 것이다.

[HTML] jQuery를 이용한 2차메뉴 본문

HTML

[HTML] jQuery를 이용한 2차메뉴

start0 2014. 7. 16. 13:44

기능구현만 해놓은 상태이며 css는 적용하지 않은 소스예제 입니다.



<htmL>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){$("ul.sub").hide();

$("ul.menu li").hover(function(){$("ul:not(:animated)",this).slideDown("fast");},

function(){$("ul",this).slideUp("fast");});});

</script>

<body>

<div id="container">

    <ul class="menu">

        <li>

        <a href="#">HOME</a>

        <ul class="sub">

            <li><a href="#">SUB1</a></li>

            <li><a href="#">SUB2</a></li>

            <li><a href="#">SUB3</a></li>

        </ul>

        </li>

        <li>

        <a href="#">CAMPANY</a>

        </li>

        <li>

        <a href="#">ABOUT US</a>

        </li>


        <li>

        <a href="#">PRODUCTS</a>

        <ul class="sub">

            <li><a href="#">ROOF BOX</a></li>

            <li><a href="#">BAR</a></li>

            <li><a href="#">ACC</a></li>

        </ul>

        </li>

    </ul>

</div>

</body>

</htmL>



저작자표시

'HTML' 카테고리의 다른 글

[HTML] 간단한 form 검색 기능  (0) 2014.07.11
[HTML] readonly 커서 제거  (0) 2014.07.01
[HTML] 모바일 웹페이지 북마크 링크 추가  (0) 2014.06.20
[HTML] 우클릭 방지  (0) 2014.05.26
[HTML] tabindex 탭 순서 지정하기(input에서 탭 tab할시 순서지정)  (0) 2014.05.19
공유하기 링크
'HTML' Related Articles more
Comments