순수 css 드롭다운 목록 구현

21925 단어 웹 프런트 바이올린 길css프런트엔드web
작자의 말
우연한 기회에 인터넷에서 ted 공개 수업[우리 아이에게 프로그래밍을 가르쳐 줍시다]에 실례가 하나 있는데 한 소년이 큰 물고기를 먹고 작은 물고기를 먹는 게임을 만들었다고 합니다. 그는 이 게임을 위해 점수판(물고기 한 마리 먹고 1점 추가)을 만들고 싶어서 인터넷에서 가르침을 구했습니다. 나중에 사이트 창작자에게 발견되자 그에게 답: 변수를 알려주었습니다.이것을 통해 배운 지식점[변수]은 아마도 소년이 영원히 잊지 못할 것이다.
이를 통해 알 수 있듯이 수요를 통해 프로그래밍을 배우는 것이 프로그래밍을 배우기 위해 프로그래밍을 배우는 것보다 더 힘들고 가치가 있다.이것 또한 나의 이후의 학습과 쓰기에 생긴 변화이다.
PS: 다음 코드는 매번 변경된 부분만 쓰고 변경되지 않은 부분은 군말하지 않습니다.모든 부분의 격식은 효과도-사고방식-코드의 순서대로 작성하는 것이다. 목적은 초보자가 효과도에 따라 사고방식에 따라 스스로 코드를 써 보고 마지막으로 작가의 코드와 비교하는 것이다. 이 방법을 통해 효과를 실현하는 방식이 다양하다는 것을 알 수 있기를 바란다. 작가의 사고방식에만 국한되지 말고물론 가장 중요한 것은 코드를 작성하는 능력을 단련하는 것이다
작업 개요
필요한 효과
  • 마우스 띄우기 팝업 메뉴
  • 마우스 드롭다운 메뉴에서 튕김
    • 관련된 지식점
  • ul,li 목록의 사용
  • css:display, 위조 선택기, 관계 기반 선택기
    • 과업
    제작 html 부분
    효과도:
    사고방식: 1.전체 아키텍처는
  • 구성 요소를 통해 이루어집니다. 2.레벨 관계는 새로운 를 이전 레벨
  • 에 추가하여 완성됩니다.
    참고: 다음 코드는 드롭다운 하나로, 세 번 반복하면 됩니다.
        <div class="menu-bar">
        <ul>
            <li>
                <a href="#">Menua>
                <ul>
                    <li><a href="#">Menu_1a>li>
                    <li><a href="#">Menu_2a>
                        <ul>
                            <li><a href="#">Menu_2_1li>
                            <li><a href="#">Menu_2_2li>
                            <li><a href="#">Menu_2_3li>
                        ul>
                    li>
                ul>
            li>
        ul>
    div>

    css 부분
    세로 드롭다운 목록
    효과도:
    아이디어:
  • 통과display:none로 목록 사라짐
  • hover를 통해 부상 상태 설정
    • 코드:
    .menu-bar ul ul{
    display: none;
}
.menu-bar li:hover>ul{
    display: block;
}

    가로 드롭다운 목록
    효과도:
    아이디어:
  • float를 통해 가로 레이아웃
  • 목록이 겹치지 않도록 주의
    • 코드:
    .menu-bar>ul>li{
    float: left;
    width: 64px;
    }

    살짝 꾸며볼게요.
    효과도:
    아이디어:
  • 우선 목록, 링크의 기본 스타일을 취소하고 글꼴 색을 변경
  • 리스트에 높이를 설정하고 문자를 수직으로 가운데로 배치
  • 관계 기반 선택기를 통해 다중 목록을 선택할 수 있음
  • 색상을 설정할 때 rgba를 사용하여 색상을 더욱 편안하게 할 수 있습니다.

    • 코드:
    ul,li{
    list-style: none;}
li{
    height: 40px;border-radius: 20px;}
a{
    text-decoration: none;color: black;}
.menu-bar>ul>li{
margin-left: 30px;
    line-height: 40px;
    text-align: center;
background-color: rgba(228,238,243,.5);
.menu-bar>ul>li>ul>li{
    width: 70px;
    background-color: rgb(228,238,243);
}
.menu-bar>ul>li>ul>li li{
    width: 85px;
    background-color: rgb(228,238,243);
}
.menu-bar li:hover>ul,.menu-bar li:hover{
    background-color: rgb(228,238,243);
}

    모든 코드
    html 
    <body>
    <div class="menu-bar">
        <ul>
            <li>
                <a href="#">Menua>
                <ul>
                    <li><a href="#">Menu_1a>li>
                    <li><a href="#">Menu_2a>
                        <ul>
                            <li><a href="#">Menu_2_1li>
                            <li><a href="#">Menu_2_2li>
                            <li><a href="#">Menu_2_3li>
                        ul>
                    li>
                ul>
            li>
            <li>
                <a href="#">biua>
                <ul>
                    <li><a href="#">biu_1a>li>
                    <li><a href="#">biu_2a>
                        <ul>
                            <li><a href="#">biu_2_1li>
                            <li><a href="#">biu_2_2li>
                            <li><a href="#">biu_2_3li>
                        ul>
                    li>
                ul>
            li>
            <li>
                <a href="#">duanga>
                <ul>
                    <li><a href="#">duang_1a>li>
                    <li><a href="#">duang_2a>
                        <ul>
                            <li><a href="#">duang_2_1li>
                            <li><a href="#">duang_2_2li>
                            <li><a href="#">duang_2_3li>
                        ul>
                    li>
                ul>
            li>
        ul>
    div>
div>

    css: 
    div{
     position: relative;
left: 35%;margin-top: 20%;
}
ul,li{
     list-style: none;}
li{
     height: 40px;
    border-radius: 20px;}
a{
     text-decoration: none;color: black;}
.menu-bar>ul>li{
    float: left;
    width: 64px;
    margin-left: 30px;
    line-height: 40px;
    text-align: center;
background-color: rgba(228,238,243,.5);}
.menu-bar>ul>li>ul>li{
    width: 70px;
    background-color: rgb(228,238,243);
}
.menu-bar>ul>li>ul>li li{
    width: 85px;
    background-color: rgb(228,238,243);
}
.menu-bar ul ul{
    display: none;
}
.menu-bar li:hover>ul,.menu-bar li:hover{
    display: block;
    background-color: rgb(228,238,243);
}

    끝맺다
    JS 용법 CSS3의transform 용법 이용, JS는transoform 사용 완료
    CSS 페이지 렌더링 최적화 속성 will-change

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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