간단하게 메뉴꾸미기 1 > 퍼블리싱강좌

퍼블리싱강좌

간단하게 메뉴꾸미기 1 정보

CSS 간단하게 메뉴꾸미기 1

본문

menu01.html

<!DOCTYPE html>
<html lang="en">
<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>Responsive Navigation Drawer using HTML CSS & Javascript | Drawer Menu</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="css/menu01.css">
</head>
<body>
  <div class="container">
    <div class="navigation">
      <ul>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span>
            <span class="title">Home</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span>
            <span class="title">Profile</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-comment" aria-hidden="true"></i></span>
            <span class="title">Message</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
            <span class="title">Help</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
            <span class="title">Setting</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
            <span class="title">Password</span>
            </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-sign-out" aria-hidden="true"></i></span>
            <span class="title">sign Out</span>
            </a>
        </li>
      </ul>
    </div>
    <div class="toggle"></div>
  </div>
  <script>
    const navigation = document.querySelector('.navigation');
    document.querySelector('.toggle').onclick = function(){
      this.classList.toggle('active');
      navigation.classList.toggle('active');
    }
  </script>   
</body>
</html>

menu01.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #6843d1; }
.container { position: relative; }
.container .navigation { position:relative; width: 80px; height: 420px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.5s; }
.container .navigation.active { width: 300px }
.container .navigation ul { position: absolute; top: 0; left: 0; width: 100%; }
.container .navigation ul li { position: relative; list-style: none; width: 100%; }
.container .navigation ul li:hover { background: #efefef; }
.container .navigation ul li a { position: relative; display: block; width: 100%; display: flex; text-decoration: none; color: #6843cf; font-weight: 500; }
.container .navigation ul li a .icon { position: relative; display: block; min-width: 80px; height: 60px; line-height: 60px; text-align: center; }
.container .navigation ul li a .icon .fa { font-size: 24px;  }
.container .navigation ul li a .title { position: relative; display: block; height: 60px; line-height: 60px; white-space: nowrap; }

.toggle { position: absolute; top: calc(50% - 20px); right: -20px; width: 40px; height: 40px; background: #f5f5f5; cursor: pointer; border: 5px solid #4843d1; border-radius: 50%; }


.toggle::before { content: '\f054'; font-family: fontAwesome; position: absolute; width:100%; height: 100%; line-height: 32px; text-align: center; font-size: 16px; color: #4843d1 }
.toggle.active::before { content: '\f053'; }


ps :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
추천
5

댓글 16개

전체 283
퍼블리싱강좌 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT