07일+08일차 css슬라이드 응용, 드롭다운메뉴

Front-end/HTML

by 본투비곰손 2023. 5. 30. 21:56

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>%슬라이드</title>
    <style>
        *{margin: 0 ;padding: 0;}
        li{list-style: none;}
        input{display: none;}
        .clearfix:after{content: "";display: block;clear: both;}
        
        #slide{width: 100%;overflow: hidden;}
        
        #slide ul{width: 400%;transition: 1s;}
        #slide li{width: 25%; float: left;}
        
        #scroll{width: 120px;margin: 25px auto;}
        #scroll label{width: 20px;height: 20px;border: 2px solid gray; background-color: azure;display: inline-block;cursor: pointer;}
        
        #scroll1:checked~ul{margin-left: 0px;}
        #scroll2:checked~ul{margin-left: -100%;}
        #scroll3:checked~ul{margin-left: -200%;}
        #scroll4:checked~ul{margin-left: -300%;}
        
        img{width: 100%;}
    </style>
</head>
<body>
        
    <div id="slide" class="clearfix">    
        <input type="radio" name="a" id=scroll1>
        <input type="radio" name="a" id=scroll2>
        <input type="radio" name="a" id=scroll3>
        <input type="radio" name="a" id=scroll4>
        <ul>
            <li><img src="1.png" alt=""></li>
            <li><img src="2.png" alt=""></li>
            <li><img src="3.png" alt=""></li>
            <li><img src="4.png" alt=""></li>
        </ul>
    </div>
    <div id="scroll">
        <label for="scroll1"></label>
        <label for="scroll2"></label>
        <label for="scroll3"></label>
        <label for="scroll4"></label>

    </div>
</body>
</html>

7일차에서 만든 슬라이드에 사진을 넣고 ul태그에 8일차에 배운 transition 을 적용하면 아래와 같이 출력된다.

드롭다운 메뉴

마우스 커서를 올렸을때 메뉴일부 또는 메뉴 전체가 나타나는 메뉴

1. 메뉴 목록 구조

기본구조는 아래와같이 ul태그안 li태그안에 또다른 ul태그와 li태그가 있는 구조이다.

<body>
    <ul id="one" class="clearfix">
        <li>과일종류
            <ul class="two">
                <li>사과</li>
                <li>딸기</li>
                <li>포도</li>
                <li>복숭아</li>
            </ul>
        </li>
        
        <li>동물종류
            <ul class="two">
                <li>호랑이</li>
                <li>사자</li>
                <li>하마</li>
                <li>기린</li>
            </ul>
        </li>
       
        <li>운동종류
            <ul class="two">
                <li>축구</li>
                <li>배구</li>
                <li>농구</li>
                <li>야구</li>
            </ul>
        </li>
    </ul>
</body>

아래와같이 style 적용 후 출력하면 메뉴가 숨겨져있다가 나타나게 된다.

<style>
            *{margin: 0;padding: 0;}
            li{list-style: none;}
            .clearfix:after{content: "";display: block;clear: both;}
            
            #one{margin-top: 200px;margin-left: 200px;}
            #one >li{float: left;background-color: pink;}
            #one li{width: 200px;text-align: center;line-height: 40px;}
            
            .two li{background-color: #123456;color: white;}
            .two{display: none;}
            
            #one > li:hover .two{display: block;}
 </style>

2. 메뉴 애니메이션 효과 주기

메뉴에도 transition을 사용하여 애니메이션 효과를 줄 수 있는다. 다만 style에 display:none ,display:block 를 사용하면 태그가 존재해야만 효과가 적용이 되는 transition의 특성상 태그를 삭제하는 개념인 display:none의 경우 애니메이션 효과가 적용되지 않는다. 애니메이션 효과를 적용 시켜 주기 위해선 아래와 같이 transition: 1s ; opacity:0 과 opacity:1을 사용하여 애니메이션 효과를 적용할 수 있다. 하지만 배경색이 있을경우 transition: 1s ; opacity:0 과 opacity:1을 사용하면 아래 출력물과 같이 부자연스러울 수 있다.

            .two{transition:1s;opacity:0;}
            
            #one > li:hover .two{opacity:1;}

3. 드롭다운 메뉴 만들기

보다 자연스럽게 부가 메뉴가 나타나게 하기위해서는 height:0px;overflow:hidden;transition:1s;와 height: "세로의길이"를 사용해준다.

overflow:hidden은 disply:none와 다르게 완전한 삭제가아닌 대상태그의 가로 세로 값 밖으로 표시되는 출력물들을 나타나지 않게 하기 때문이다. style에 적용시켜주면 아래와 같이 자연스럽게 아래로 떨어지는 부가메뉴가 출력되는것을 확인 할 수 있다.

.two{height: 0px;overflow: hidden;transition: 1s;}
            
 #one >li:hover .two{height: 100px;}

728x90

'Front-end > HTML' 카테고리의 다른 글

HTML web2 13일,14일차 - position (0)	2023.06.03
HTML web2 10일차 - 구글 개발자 도구, 지도사용법, 폰트사용법 (0)	2023.06.01
HTML web2 08일차 - transition (0)	2023.05.29
HTML web2 06일차 - dnf,wbr 태그, 슬라이드 (0)	2023.05.29
HTML web2 04일차 - cursor,iframe,form태그 (0)	2023.05.27