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

정보공유

[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 49건 1 페이지
번호 제목 글쓴이 날짜 조회
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 806
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 773
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 897
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1828
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1897
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2018
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1989
42 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 2515
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 3277
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 11103
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 10731
38 jquery 스와이프 메뉴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 10967
37 datepicker range select 커스터마이징 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 14763
36 URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 13167
35 설문응답 유효성 검사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 11620