김코드의 웹디자인 세상

❏ jquery - 메뉴바 슬라이딩 효과 만들기 본문

⊹⠀𝚓𝚚𝚞𝚎𝚛𝚢

❏ jquery - 메뉴바 슬라이딩 효과 만들기

김_코드 2022. 12. 10. 21:48

 

안녕하세요!

 

오늘은 제이쿼리를 사용한 반응형 웹 메뉴바에 사용되는 슬라이딩 효과를 만들어보도록 하겠습니다.!

✎  html

<nav class="mobile_gnb">
    <ul class="menu_list_mobile">
        <li data-animation-scroll="true" data-taget=".container1"><a>이 달의 에디박스</a></li>
        <li data-animation-scroll="true" data-taget=".container2"><a>8만 반려견들의 후기</a></li>
        <li data-animation-scroll="true" data-taget=".container3"><a>구성소개</a></li>
        <li data-animation-scroll="true" data-taget=".container4"><a>QnA</a></li>
        <li data-animation-scroll="true" data-taget=".container5"><a>테마소개</a></li>
    </ul>
</nav>
<i class="fa-solid fa-bars"></i>

 

✎  css

.mobile_gnb{
        top: 71px;
        position: absolute;
        width: 100%;
}
.menu_list_mobile{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 10px;
}
.fa-solid.fa-bars{font-size: 1.5rem;}
.menu_list_mobile li{
    padding: 10px 0;
    font-size: 1.3rem;
}

 

css를 적용 후 나타나는 화면입니다.

저는 아이콘을 클릭 시 이벤트가 나타나게 만들기로 했습니다.

 

✎  jquery

$(document).ready(function(){
    $('.fa-solid.fa-bars').on("click",function(){
        $('.menu_list_mobile')
        .stop()
        .slideToggle();
    });
});
/*메뉴 클릭시 촤라락 열리는거*/


메뉴버튼을 클릭 시 메뉴 리스트가 열리게 하는 형식입니다. 

적용된 것을 한번 확인해볼까요??

 

✎ 제이쿼리 적용법!

 

제이쿼리를 적용하기 위해서는 하나의 준비물이 더 필요합니다!

jquery.min 파일을 다운로드한 후 html 파일의 <head>에 불러와야 적용된 모습을 볼 수 있습니다.

 

<script src="html/js/jquery.min.js"></script>

 

제이쿼리(𝚓𝚚𝚞𝚎𝚛𝚢) 파일을 받고 싶다면 아래의 홈페이지로 가서 다운을 받으면 됩니당!

 

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 


제이쿼리(𝚓𝚚𝚞𝚎𝚛𝚢)는 자바스크립트로 만든 라이브러리입니다. 자바스크립트로 길게 써야 하는 부분을 제이쿼리로 간결하게 코드를 작성할 수 있습니다.
그러나 제이쿼리는 처리속도 부분에서 많은 시간을 잡아먹어 대규모 프로젝트에서는 사용을 지양한다고 합니다.

점점 장단점이 보이는걸 볼 수 있었네요!


오늘도 읽어주셔서 감사합니다!

⸜(♡'ᗜ'♡)⸝

'⊹⠀𝚓𝚚𝚞𝚎𝚛𝚢' 카테고리의 다른 글

❏ JQuery - 스크롤 시 나타나는 요소만들기!(Fade In)  (0) 2023.06.27
❏ jQuery - fadeIn과 fadeOut로 이미지 슬라이드 만들기  (0) 2023.01.12
❏ jquery - 이벤트 등록 메서드  (0) 2023.01.03
❏jquery - 상단 스크롤 이동 버튼 만들기! (스크롤 up버튼 만들기)  (0) 2022.12.30
'⊹⠀𝚓𝚚𝚞𝚎𝚛𝚢' Related Articles more
Comments