위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 메뉴 슬라이드 다운

 

 

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

<style>

.hd-menu > li{position:relative}

.hd-menu-sub-wrap{position:absolute;display:none;z-index:9999;left:0;top:100%;width:100%;}

.hd-menu-sub{background:#c0bebe;list-style:none;padding:0;margin:0;border-top: 3px solid #999999;}

.hd-menu-sub > li{padding:0;line-height:25px;margin:0;border-bottom:1px solid #f3f3f3}

.hd-menu-sub > li:last-child {border-bottom:none}

.hd-menu-sub > li a{font-family:'Nanum Gothic';font-size:12px;margin:0;padding:0;display:block;text-align:center;padding: 6px 12px;line-height: 20px;transition: all 0.25s ease-in-out;}

.hd-menu-sub > li a:hover {color: #fff;font-weight: 600;text-decoration: none;    background: #999999 !important;}

 

.in-main-menu {}

.in-main-menu > ul {list-style:none;padding:0;margin-bottom:0;width:770px;height:100%;}

.in-main-menu > ul:after {display:block;visibility:hidden;clear:both;content:""}

.in-main-menu > ul > li {float: left;width:110px;height:100%;}

.in-main-menu > ul > li > a {display:block;text-align:center;padding:0 0px 40px;color:#821143;height:40px;overflow:hidden;font-family:'Nanum Gothic'; font-size:14px;white-space: nowrap;transition: all 0.25s ease-in-out;}

.in-main-menu > ul > li > a .menu-span {display: inline-block;padding: 7px 8px;line-height: 20px;}

.in-main-menu > ul > li > a:hover .menu-span {background: rgba(0,0,0,0.05);border-radius: 4px;transition: all 0.25s ease-in-out;}

 

</style>

 

<div class="in-main-menu">

<ul class="hd-menu">

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴1</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴1-1</a></li>

                <li><a href="#" target="_self">메뉴1-2</a></li>

            </ul>

        </div>

    </li>

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴2</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴2-1</a></li>

                <li><a href="#" target="_self">메뉴2-2</a></li>

            </ul>

        </div>

    </li>

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴3</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴3-1</a></li>

                <li><a href="#" target="_self">메뉴3-2</a></li>

            </ul>

        </div>

    </li>

</ul>

</div>


 

<script type="text/javascript">

<!--

var check_width = $( window ).width();

$(function(){

    

    $( window ).resize(function() {

        check_width = $( window ).width();

    });

 

    $('.hd-menu li').hover(function(){

        if (check_width > 768) {

            $('.hd-menu-sub-wrap',this).slideDown(300, 'swing');

        }

    }, function(){

        $('.hd-menu-sub-wrap',this).slideUp(100, 'swing');

    });  

 

});

//-->

</script>


정보공유
Total 436건 1 페이지
번호 제목 글쓴이 날짜 조회
436 입금된 주문도 준비, 배송전까지는 취소할 수 있도록 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-10 202
435 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 232
434 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 813
433 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 777
432 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 901
431 mysql 사용자 함수 생성 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-09 664
430 html 로 된 svg 태그를 png 파일로 만들기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-08 841
429 prepare bind_param 쿼리구분 select * 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-14 1527
428 javascript 플랫폼 디바이스 확인 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 1598
427 stmt 등록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-14 1881
426 prepare 함수 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-16 1887
425 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1832
424 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1899
423 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2022
422 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1993