연말까지 매일 웹 사이트를 만드는 대학생들~ 29일째 내비게이터의 슬라이드 제작 실패~

4057 단어 CSS

입문


안녕하세요@70days_js
먼저 말해 봐, 오늘 네비게이터를 옆으로 미끄러지게 하려다가 실패했어.
나는 한 시간만 있으면 할 수 있다고 생각한다. 왜냐하면 늦은 시간부터 시작하는 자부심 때문이다.전혀 못 했어요.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 29일째다.(2019/11/16)
잘 부탁드립니다.

사이트 URL

  • https://sin2cos21.github.io/day29.html

    • 한 일


    하고 싶은 일 → 네비게이션 표시줄 아이콘을 누르면 네비게이션 표시줄 메뉴가 옆으로 미끄러져 들어간다
    했던 일 → 버튼에 코를 골면 옆으로 미묘한 느낌 메뉴가 미끄러져 들어간다
    gif↓

    버튼을 누르자 메뉴가 바로 옆에서 나왔다.
    보시다시피 글이 파괴되어 유감입니다.
    <body>
    <div class="button">ボタン</div>
    <div>
        <div class="test">メニュー1</div>
        <div class="test">メニュー2</div>
        <div class="test">メニュー3</div>
        <div class="test">メニュー4</div>
        <div class="test">メニュー5</div>
    </div>
</body>

    .button:hover + div > .test {
    width:  7rem;
    color: white;
}


.test {
    width:  0px;
    height: 2rem;
    color: white;
    background-color: rgba(0, 0, 0, .8);
    transition-duration: .5s;
    transition-timing-function: ease;
    transition-property: width color;
}
    사실 호버의 앞글자 자체도 이미 나타났다.하지만 색깔이 흰색이 아닌 척 했을 뿐이다.
    또 호버가 아닌 active로 클릭하려고 했는데 잘 움직이지 못해 시간을 초과했습니다.

    감상


    이것은 못난 말이다.나는 내가 단지 한 시간의 학습 시간을 쓴 것이 본래의 원인이라고 반성하며 득의양양해졌다.이번 불순한 일은 반드시 원인을 따져 극복해야 한다.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
    CSS로만 아코디언 메뉴를 만듭니다.❏CSS❏
    display: table; 사용 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage