메뉴 슬라이드 다운 > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

JQUERY | 메뉴 슬라이드 다운

페이지 정보

작성자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일18-08-01 12:31 조회17,802 회 댓글0 건

본문

 

 

 

<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 40건 1 페이지
정보공유 목록
번호 제목 글쓴이 날짜 조회
40 JQUERY jquery fullcalendar eventOrder 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 1712
39 JQUERY 주소복사 계좌번호복사 URL복사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 4401
38 JQUERY jquery 스와이프 메뉴 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 3161
37 JQUERY datepicker range select 커스터마이징 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 4719
36 JQUERY URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 5395
35 JQUERY 설문응답 유효성 검사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 4231
34 JQUERY 모두 선택 체크박스 가 한페이지에 2개이상있을경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-20 7688
33 JQUERY 복잡한 rowspan 처리 쉽게 처리하는 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-22 10791
32 JQUERY 확장성있는 글깜빡임 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-29 12330
31 JQUERY 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-01 15833
열람중 JQUERY 메뉴 슬라이드 다운 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-01 17803
29 JQUERY 갤러리 슬라이더 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-10 14644
28 JQUERY 원하는 영역 프린트 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-08 16433
27 JQUERY jquery.validate 다중옵션 입력 체크 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-18 16128
26 JQUERY jquery 슬라이드 배너 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 17997
게시물 검색