MENU EFFECT01 - JAVASCRIPT

메뉴 튜토리얼입니다.

이 강의는 기본적인 HTML, CSS, JavaScript, JQuery를 알고 있어야 배울 수 있는 강의입니다.
웹표준 강의, 반응형 강의, 메가박스 강의를 보고 오시면 도움이 됩니다.^^

모든 강의는 소스를 보면서 따라하는 튜토리얼입니다.

Code Youtube

Code Sample

전체 소스는 여기서 다운 받을 수 있습니다.

바로가기

샘플 소스는 여기서 확인 할 수 있습니다.

바로가기

Sourece Reference

Value	link
이미지1	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg1.jpg
이미지2	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg2.jpg
이미지3	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg3.jpg
이미지4	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg4.jpg
이미지5	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg5.jpg
이미지6	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg6.jpg
이미지7	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg7.jpg
이미지8	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg8.jpg
이미지9	https://webstoryboy.github.io/wtss/refer-effect/assets/img/bg9.jpg
jquery	https://webstoryboy.github.io/wtss/refer-effect/assets/js/jquery.min.js

Code example

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Effect</title>
</head>
<body class="bg">

    <!-- contents -->
    <main>
        <div id="tab__menu">
            <div class="tab__btn">
                <ul>
                    <li class="active"><a href="#">원칙1</a></li>
                    <li><a href="#">원칙2</a></li>
                    <li><a href="#">원칙3</a></li>
                    <li><a href="#">원칙4</a></li>
                    <li><a href="#">원칙5</a></li>
                </ul>
            </div>
            <div class="tab__cont">
                <div>
                    <h2>품위 없는 모든 버릇을 버려라.</h2>
                    <p>욕을 하고 투덜거릴는 것, 경박한 자세로 앉아 있는 것, 남을 비웃는 것, 지저분한 차림, 약속에 늦거나 변경하는 일 등의 모든 행동은 품위 없는 것이다.</p>
                </div>
                <div>
                    <h2>도움을 구하는 데 망설이지 마라.</h2>
                    <p>묻고 요청하고 찾아가고 부탁하라. 반드시 물에 답을 주고 도움을 주고 반기는 사람이 있다.</p>
                </div>
                <div>
                    <h2>희생을 할 각오를 해라.</h2>
                    <p>작은 목표에는 작은 희생이 따르고 큰 목표에는 큰 희생이 따른다. 공부를 위해서는 잠을 포기해야 하고 돈을 모으기 위해서 더 많은 시간을 일해야 한다.</p>
                </div>
                <div>
                    <h2>기록하고 정리하라.</h2>
                    <p>투자내역, 정보, 갑자기 생각나 아이디어, 명함, 사이트 암호들, 구매 기록 등을 모두 정리하거나 기억하라, 이것은 재산이여 동시에 당신을 보호한다.</p>
                </div>
                <div>
                    <h2>제발 모두에게 사랑받을 생각을 버려라.</h2>
                    <p>눈치를 보지 말고 비난에 의연하고 무리와 어울리는 것에 목숨을 걸지 마라. 진정한 친구는 두명도 많고 가족의 지지기 모든 것의 기초다. 부정적인 사람과 결별하고 당신보다 나은 사람들과 어울려라.</p>
                </div>
            </div>
        </div>
    </main>
    <!-- //contents -->

    <!-- info -->
    <div class="info">
        <h1><a href="index.html">javascript Menu Effect01</a></h1>
        <p>메뉴 이펙트 - 탭 메뉴</p>
    </div>

    <div class="info right">
        <ul>
            <li class="active"><a href="javascriptME01.html">1</a></li>
            <li><a href="javascriptME02.html">2</a></li>
            <li><a href="javascriptME03.html">3</a></li>
            <li><a href="javascriptME04.html">4</a></li>
            <li><a href="javascriptME05.html">5</a></li>
            <li><a href="javascriptME06.html">6</a></li>
            <li><a href="javascriptME07.html">7</a></li>
            <li><a href="javascriptME08.html">8</a></li>
            <li><a href="javascriptME09.html">9</a></li>
        </ul>
        <ul>
            <li><a href="jqueryME01.html">1</a></li>
            <li><a href="jqueryME02.html">2</a></li>
            <li><a href="jqueryME03.html">3</a></li>
            <li><a href="jqueryME04.html">4</a></li>
            <li><a href="jqueryME05.html">5</a></li>
            <li><a href="jqueryME06.html">6</a></li>
            <li><a href="jqueryME07.html">7</a></li>
            <li><a href="jqueryME08.html">8</a></li>
            <li><a href="jqueryME09.html">9</a></li>
        </ul>
    </div>
    <!-- //info -->

</body>
</html>

<style>
    @font-face {
        font-family: "NEXONLv2Gothic";
        font-weight: 300;
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Light.woff") format("woff");
        font-style: normal;
    }
    @font-face {
        font-family: "NEXONLv2Gothic";
        font-weight: 400;
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff") format("woff");
        font-style: normal;
    }
    @font-face {
        font-family: "NEXONLv1Gothic";
        font-weight: 300;
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff") format("woff");
        font-style: normal;
    }
    @font-face {
        font-family: "NEXONLv1Gothic";
        font-weight: 400;
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff") format("woff");
        font-style: normal;
    }
    * {
        margin: 0; padding: 0;
    }
    .bg {
        position: relative;
        height: 100vh;
        background-image: url(../assets/img/bg0.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: -1;
    }
    .info {
        color: #fff;
        font-family: "NEXONLv1Gothic";
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .info.right {
        left: auto;
        right: 0px;
        top: 0px;
    }
    .info h1 {
        font-weight: 300;
        font-size: 20px;
        line-height: 1.6;
        border-bottom: 1px dashed #fff;
        display: inline-block;
        margin-bottom: 10px;
    }
    .info h1 a {
        color: #fff;
        text-decoration: none;
    }
    .info p {
        font-weight: 300;
        font-size: 16px;
    }
    .info li {
        list-style: none;
        display: inline;
    }
    .info li a {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        border: 1px dashed #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        margin-bottom: 5px;
    }
    .info li.active a {
        background: #fff;
        color: #000;
    }

    /* tab-menu */
    #tab__menu {
        max-width: 600px;
        background: rgb(173, 173, 173);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        overflow: hidden;
        font-family: 'NEXONLv2Gothic';
        color: #fff;
    }
    .tab__btn ul {
        display: flex;
    }
    .tab__btn li {
        width: 20%;
        list-style: none;
        text-align: center;
    }
    .tab__btn li a {
        color: #fff;
        text-decoration: none;
        padding: 18px 15px 15px 15px;
        display: block;
    }
    .tab__btn li.active a {
        border-bottom: 3px solid #000;
        color: #000;
    }
    .tab__cont {
        background: #fff;
        padding: 20px;
        color: #222;
    }
    .tab__cont > div {
        display: none;
    } 
    .tab__cont > div:first-child {
        display: block;
    }
    .tab__cont > div h2 {
        margin-bottom: 10px; 
    }
    .tab__cont > div p {
        line-height: 1.6;
    }
    @media (max-width: 800px){
        #tab__menu {
            width: 90%;
        }
        .tab__btn li a {
            padding: 13px 10px 10px 10px;
            font-size: 14px;
        }
        .tab__cont > div h2 {
            font-size: 16px;
        }
        .tab__cont > div p {
            font-size: 14px;
        }
    }
</style>

<!-- script -->
<script>
    const tabBtn = document.querySelectorAll(".tab__btn ul li");
    const tabCont = document.querySelectorAll(".tab__cont > div");

    tabBtn.forEach((element, index) => {
        element.addEventListener("click", function(){
            
            tabBtn.forEach( el => {
                el.classList.remove("active");
            });
            element.classList.add("active");

            tabCont.forEach( el => {
                el.style.display = "none";
            })
            tabCont[index].style.display = "block";
        });
    })
</script>

Site Reference

INSTAGRAM 바로가기

STUDY 바로가기

YOUTUBE 바로가기

INFLUENCER 바로가기

도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.

728x90

저작자표시

webs portfoliodeveloper

Port developer

challenge

1.

2.

3.

completed 전체 보기

스터디 과정 26기 수료 | 김현* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

스터디 과정 25기 수료 | 이태* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

국비지원 과정 30기 수료 | 김성* 프론트 취업 완료

국비지원 과정 30기 수료 | 양다* 프론트 취업 완료

국비지원 과정 30기 수료 | 이영* 프론트 취업 완료

국비지원 과정 30기 수료 | 이중* 프론트 취업 완료

국비지원 과정 30기 수료 | 박선* 프론트 취업 완료

국비지원 과정 30기 수료 | 최진* 프론트 취업 완료

국비지원 과정 30기 수료 | 김석* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

국비지원 과정 30기 수료 | 권규* 프론트 취업 완료

국비지원 과정 30기 수료 | 권혜* 프론트 취업 완료

국비지원 과정 30기 수료 | 김민* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

portfolio 전체 보기

재밌는 포트폴리오

포트포리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 포트폴리오

가로 세로 포트폴리오

귀여운 포트폴리오

쿨한 포트폴리오

페이지 포트폴리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

웹 퍼블리셔

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

디자인 및 퍼블리셔

프론트앤드 개발자

interview 전체보기

review

스터디 후기 이다*

스터디 후기 이다*

MENU EFFECT01 - JAVASCRIPT

Code Youtube

Code Sample

Sourece Reference

Code example

Site Reference

기타(삭제예정)/01 MENU EFFECT Related Articles

더보기

티스토리툴바